Puppeteer 初探

木偶 Puppeteer

更友好的 Headless Chrome Node API

木偶也是有心的 (=･ω･=)

Puppeteer是什麼？

Puppeteer是一個Node庫，它提供了一個進階API來通過DevTools協定控制無頭 Chrome或Chromium ，它也可以配置為使用完整（非無頭）Chrome或Chromium。

你可以通過Puppeteer的提供的api直接控制Chrome模拟大部分使用者操作來進行UI Test或者作為爬蟲通路頁面來收集資料。

為什麼會産生Puppeteer呢？

很早很早之前，前端就有了對 headless 浏覽器的需求，最多的應用場景有兩個

UI 自動化測試：擺脫手工浏覽點選頁面确認功能模式
爬蟲：解決頁面内容異步加載等問題

在Chrome headless 和Puppeteer出現之前，headless 浏覽器有以下幾種：

PhantomJS, 基于 Webkit
SlimerJS, 基于 Gecko
HtmlUnit, 基于 Rhnio
TrifleJS, 基于 Trident
Splash, 基于 Webkit

但這些都有共同的通病，環境安裝複雜，API 調用不友好

2017 年 Chrome 官方團隊連續放了兩個大招 Headless Chrome 和對應的 NodeJS API Puppeteer，直接讓 PhantomJS 和 Selenium IDE for Firefox 作者宣布暫停繼續維護其産品，PhantomJs的開發者更直接宣稱自己要失業了。

Puppeteer能做什麼？

你可以在浏覽器中手動完成的大部分事情都可以使用Puppteer完成

比如：

生成頁面的螢幕截圖和PDF。
抓取SPA并生成預先呈現的内容（即“SSR”）。
自動表單送出，UI測試，鍵盤輸入等。
建立一個最新的自動化測試環境。使用最新的的JavaScript和浏覽器功能，直接在最新版本的Chrome浏覽器中運作測試。
捕獲您網站的時間線跟蹤，以幫助診斷性能問題。

入門

安裝Puppeteer

npm install puppeteer
或者
yarn add puppeteer

複制

Puppeteer至少需要Node v6.4.0，但如果想要使用async / await，它僅在Node v7.6.0或更高版本中受支援。

執行個體一截屏儲存

導航到 https://example.com 并将截屏儲存為 example.png：

const puppeteer = require('puppeteer');
async function screenShot(url, path, name) {
    await console.log('Screen Shot ... ');
    await console.log('Save path: ' + path + name + '.png');
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url);
    await page.screenshot({path: path + name + '.png'});

    await browser.close();
}

複制

puppeteer 預設的頁面大小為800x600分辨率，頁面的大小可以通過

Page.setViewport()

來更改

執行個體二建立一個PDF

const puppeteer = require('puppeteer');

async function downloadPdf(url, path, name) {
    await console.log('Download Pdf ... ');
    await console.log('Save path: ' + path + name + '.pdf');
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    //networkidle2: consider navigation to be finished when there are no more than 2 network connections for at least 500 ms.
    await page.goto(url, {waitUntil: 'networkidle2'});
    await page.pdf({path: path + name + '.pdf', format: 'A4'});

    await browser.close();
}

複制

執行個體三在渲染的頁面中執行代碼

const puppeteer = require('puppeteer');

async function getDimension(url) {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.goto(url);

    // 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();
}

複制

進階

page.type

擷取輸入框焦點并輸入文字

page.keyboard.press

模拟鍵盤按下某個按鍵，目前mac上組合鍵無效為已知bug

page.waitFor

頁面等待，可以是時間、某個元素、某個函數

page.frames()

擷取目前頁面所有的 iframe，然後根據 iframe 的名字精确擷取某個想要的 iframe

iframe.$('.srchsongst')

擷取 iframe 中的某個元素

iframe.evaluate()

在浏覽器中執行函數，相當于在控制台中執行函數，傳回一個 Promise

Array.from

将類數組對象轉化為對象

page.click()

點選一個元素

iframe.$eval()

相當于在 iframe 中運作 document.queryselector 擷取指定元素，并将其作為第一個參數傳遞

iframe.$$eval

相當于在 iframe 中運作 document.querySelectorAll 擷取指定元素數組，并将其作為第一個參數傳遞

還是看這篇文章吧，作者寫了兩個執行個體Demo，看一下代碼就能懂上面的基礎用法了。

一些預設的設定和開發調試建議

1. 使用Headless模式

Puppeteer預設以Headless模式加載Chromium，如果想加載完整的Chromium（這樣友善觀察網頁加載的效果究竟是怎麼樣的），可以執行以下指令

const browser = await puppeteer.launch({headless: false}); // default is true

複制

2. 使執行本地版本的Chrome或者Chromium

const browser = await puppeteer.launch({executablePath: '/path/to/Chrome'});

複制

3. 延遲執行Puppeteer

const browser = await puppeteer.launch({
   headless: false,
   slowMo: 250 // slow down by 250ms
 });

複制

4. 擷取控制台輸出

可以監聽console的事件，也可以通過evaluate來執行console

page.on('console', msg => console.log('PAGE LOG:', msg.text()));

 await page.evaluate(() => console.log(`url is ${location.href}`));

複制

5. 設定頁面視窗大小

await page.setViewport({
        width: 1366,
        height: 768 * 2
    });

複制

參考連結

Puppeteer的入門教程和實踐任乃千 https://www.jianshu.com/p/2f0...
官方文檔 https://github.com/GoogleChro...