初識 Puppeteer

什麼是 Puppeteer

Puppeteer 是一個基於 Chrome Devtools 協議，Puppeteer 可讓用戶界面測試變得很輕鬆。

安裝

當你安裝 Puppeteer 時，會下載一個最新版本的 Chromium。Puppeteer 依賴於 Node v6.4.0 及以上版本，推薦安裝 7.6 版本以上的 Node。

npm i puppeteer
複製代碼

或者

yarn add puppeteer
複製代碼

Demo

• 截屏

保存名爲 example.js 的文件

const puppeteer = require('puppeteer');

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

  await browser.close();
})();
複製代碼

在命令行中運行

node example.js
複製代碼

Puppeteer 默認截屏大小爲 800 * 600。這個大小能夠經過 Page.setViewport() 方法自定義。

• PDF

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.baidu.com', {
        waitUntil: 'networkidle2'
    });
    await page.pdf({
        path: 'hn.pdf',
        format: 'A4'
    });
    await browser.close();
})();
複製代碼

• 獲取頁面信息

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com');

  // Get the "viewport" of the page, as reported by the page.
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    };
  });

  console.log('Dimensions:', dimensions);

  await browser.close();
})();
複製代碼

經常使用 API

• setViewport 經常使用參數

{
    width: 1024,
    height: 3000,
    isMobile: false,    // 是否啓用移動設備模式
}
複製代碼

• screenshot 經常使用參數

{
    fullPage: true, // 是否截取整個頁面
    path: 'image',  // 文件名，也能夠寫成 image.png
    type: 'png',    // 僅支持 png 和 jpeg
    omitBackground: true    // 是否支持透明度
}
複製代碼

• pdf 經常使用參數

headless: false 不支持 pdf

{
    path: '1.pdf',
    scale: 1,   // 縮放比例
    printBackground: true,  // 是否打印背景色
    landscape: false,   // 是否橫向打印
    formart: 'A4'
}
複製代碼

調試運行

• 關掉無界面模式

headless 能夠啓動瀏覽器查看模式

const browser = await puppeteer.launch({
    headless: false
});
複製代碼

• 減慢速度

slowMo 屬性能夠幫助你看清發生了什麼。單位爲 ms。

const browser = await puppeteer.launch({
    slowMo: 250
});
複製代碼

實踐應用

咱們能夠經過使用 Puppeteer 來自動化測試網頁，從而解放雙手。

const puppeteer = require('puppeteer');

(async()=>{
    const browser = await puppeteer.launch({
        headless: false
    });
    const page = await browser.newPage();
    const mouse = await page.mouse;
    await page.goto('https://www.baidu.com/'); // 你的網址
    await page.type('#txtUserName', 'sa', { // 輸入 sa 帳號
        delay: 250
    });
    await page.tap('#btnLoginNew');
    await page.waitFor(2000);
    await page.evaluate(()=>{
        let array = Array.from(window.frames[2].document.querySelectorAll('li'));
        array.map(item=>{
            if(item.innerText==='XXX'){
                item.onclick();
            }
        });
    })
})();
複製代碼