iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
2

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


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

簡單介紹我覺得的Puppeteer優點

  • 可以解決需要javascript內容後渲染的問題
  • 使用Chromium瀏覽器直接模擬
  • 登入驗證簡單化
  • 非常直覺性的使用
  • google開發的

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

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

所需語言環境: Nodejs
開發語言: javascript
IDE: Visual Studio Code(這不影響開發,當然也可以用簡單的文字編輯器開發)
主要套件: Puppeteer
輔助套件: Cheerio

這邊會用Ubuntu示範為主

1. 安裝 nodejs

作業系統

  • Mac (Terminal)

    curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg</a>.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"
    
  • Ubuntu (Terminal)

    sudo apt-get install node
    
  • Windos
    下載 nodejs

  • 其他
    https://nodejs.org/zh-tw/download/package-manager/

如果可以還是推薦node管理套件安裝

2. 安裝套件

打開Terminal(Ubuntu,Mac),CMD(windows)

先新增一個資料夾(mkdir)並進入(cd)

mkdir test-project && cd test-project

初始化資料夾並安裝Puppeteer

npm init -y && npm i puppeteer
# or "yarn init -y yarn add puppeteer"

不懂NPM可以去看看NPM

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

3. 簡單測試

先建立一個檔案test.js(可以touch一個或打開資料夾手動建立一個)
在裡面輸入

//這是套件裡面第一隻範例程式
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();
})();

儲存檔案(ctrl+s)

接著在Terminal(Ubuntu,Mac),Nodjs(windows)同個目錄下輸入

node test.js

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

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


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

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


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

1 則留言

1
marlin12
iT邦新手 1 級 ‧ 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是一套用來解析靜態網頁內容的模組。

我要留言

立即登入留言