有的時候會為了方便收集資料可能會撰寫一些爬蟲工具來收集資料, 不過現在的網頁越來越多都做成 Single Page Application 的方式, 比較難以直接使用傳統 GET method 就抓取內容了, 本篇介紹一個套件 Puppeteer 可以使用 NodeJS 操作 Chrome 與 Chromium 擷取 HTML 內容, 並且也可用於 UI 自動化測試。
功能與特點
- 可以使用 headless 模式或是一般模式來操作
- 能夠直接用 Node.js 操作瀏覽器取得 HTML 與截圖
安裝套件
首先安裝套件 puppeteer
npm install puppeteer --save
擷取網頁與取得 html
puppeteer 提供的 API 也非常的容易使用
這邊先以蝦皮這個網站當範例, 蝦皮是一個 SPA 網站, 直接 GET 只會有一堆的 js 與 css 程式碼而已
以下範例程式碼便可以直接操作 render 出來的 html, 並且取得截圖
const puppeteer = require('puppeteer'); (async () => { // 啟動瀏覽器 const browser = await puppeteer.launch(); // 開啟分頁並前往蝦皮頁面 const page = await browser.newPage(); await page.goto('https://shopee.tw'); // 進行截圖 await page.screenshot({ path: 'shopee.png' }); // 取得 html let html = await page.content(); console.log(html); await browser.close(); })();
進行 UI 測試與 debug
有的時候在做流程測試時會需要有一連串的動作
而每次都需要手動會比較花費時間
這時可以使用 puppeteer 對 UI 進行操作並截圖
並且可以關閉 headless 來查看操作過程
const puppeteer = require('puppeteer'); (async () => { // 啟動瀏覽器 const browser = await puppeteer.launch({ headless: false, }); // 開啟分頁並前往 Google 頁面 const page = await browser.newPage(); await page.goto('https://www.google.com/'); // 進行 UI 操作 page.keyboard.sendCharacter('辛比誌'); page.keyboard.down('Enter'); // 等待三秒 await new Promise((resolve, reject) => setTimeout(resolve, 3000)); // 進行截圖 await page.screenshot({ path: 'result.png' }); await browser.close(); })();