iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
1

第一天先偷懶一下
應該沒什麼前言可以說
直接開始吧


先補充說明一下為什麼要使用Puppeteer

簡單介紹我覺得的Puppeteer優點

  • 使用Chromium瀏覽器直接模擬
  • 登入驗證簡單化
  • 非常直覺性的使用
  • google開發的

缺點我覺得最大就是每次測試都需要瀏覽器重新開啟模擬,速度就降低了

不然用request+cherrio也可以更快速的開發但稍微有點不直覺

開發語言需求 javascript
我使用 Visual Studio Code(這不影響開發)
當然也可以用簡單的文字編輯器開發
最主要使用的套件是

輔助套件

這邊會用Ubuntu示範為主

先來安裝環境(要有NPM)

1. 安裝 nodejs

Windos
下載 nodejs

Ubuntu
開啟terminal並下

sudo apt-get install node

2. 安裝套件

打開Terminal(Ubuntu,Mac),CMD(windows)
先新增一個資料夾並進入

mkdir test-project && cd test-project

安裝Puppeteer

npm i puppeteer
# or "yarn add puppeteer"

沒出現什麼錯誤就是成功了

3. 簡單測試

先建立一個檔案test.js
在裡面輸入
這是套件裡面第一隻範例程式

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.google.com.tw');
  await page.screenshot({path: 'google.png'});

  await browser.close();
})();

儲存檔案
接著在Terminal(Ubuntu,Mac),Nodjs(windows)輸入

node test.js

接著打開資料夾就可以看到已經對google網頁建立一張截圖了
檔名為google.png

上面怎麼運作下一篇稍微解釋一下


今天先這樣
明天看看我會不會偷懶又不認真打
我比較是心血來潮型
這些文章之後應該都會在修改一次讓它便更好看吧?
不過內容大致不變
哪裡說不清楚,錯誤或需要更詳細講解歡迎大家跟我說
有需求我寫文章的動力才比較高 :)

感謝幫我補充說明的人 不過我等級太低沒辦法回應:(


下一篇
Day 2 範例程式解釋
系列文
Puppeteer 簡單快速建立自己的 Nodejs 爬蟲25

1 則留言

0
marlin12
iT邦新手 3 級 ‧ 2018-10-02 21:41:03

幫助補充一下。

Puppeteer是一套基於NodeJS的工具庫,讓我們可以輕易地操控Chromium(即headless Chrome)和Chrome。

它的功能包括:

  1. 生成頁面的截圖和PDF
  2. 爬取SPA應用,並生成預渲染內容(即“SSR”服務端渲染)
  3. 用作爬蟲去抓取網站內容
  4. 自動表單提交,UI測試,鍵盤輸入等
  5. 創建一個自動化測試環境,並運行相關的測試
  6. 追踪網站的時間線,用以分柝不同部份的性能問題

Puppeteer和Chromium都是由Chrome官方團隊來維護的。

要安裝Puppeteer,Node版本至少 v7.6.0,因為要使用async/await。

安裝Puppeteer的時候,會同時下載Chromium。如果不需要Chromium,可以改為安裝puppeteer-core。

Selenium和Puppeteer的比較:

  • Selenium加上不同的WebDriver,可以支援不同的瀏覽器(例如:chrome、firefox、IE), 但是Puppeteer僅適用於Chromium或Chrome瀏覽器。
  • 相對於Selenium,Puppeteer的語法較為簡潔。

cheerio是一套用來解析靜態網頁內容的模組。

我要留言

立即登入留言