[推薦] 利用 Puppeteer 抓取 SPA 內容與 UI 測試

      在〈[推薦] 利用 Puppeteer 抓取 SPA 內容與 UI 測試〉中尚無留言

有的時候會為了方便收集資料可能會撰寫一些爬蟲工具來收集資料, 不過現在的網頁越來越多都做成 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();
})();

發表迴響