Puppeteer 初探

oysun 發布于2019-08-22 18:14 / 2093人閱讀

摘要：抓取并生成預先呈現的內容即。自動表單提交，測試，鍵盤輸入等。創建一個最新的自動化測試環境。使用最新的的和瀏覽器功能，直接在最新版本的瀏覽器中運行測試。捕獲您網站的時間線跟蹤，以幫助診斷性能問題。

木偶 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...

GPU云服務器云服務器 Puppeteer puppeteer_node puppeteer關閉webrtc 初探webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95648.html

Puppeteer初探--爬取并生成《ES6標準入門》PDF

摘要：首先介紹是一個庫，他提供了一組用來操縱的默認也就是無的，也可以配置為有有點類似于，但是官方團隊進行維護的，前景更好。使用，相當于同時具有和的能力，應用場景會非常多。首先介紹Puppeteer Puppeteer是一個node庫，他提供了一組用來操縱Chrome的API（默認headless也就是無UI的chrome，也可以配置為有UI）有點類似于PhantomJS，但Puppet...

JerryWangSAP 2019-08-21 12:00 評論0 收藏0
小程序測試方案初探

摘要：前言年月號微信小程序正式上線，小程序不需要安裝就能使用，依托微信強大的生態環境，能做到很多所不能做的事情。當然更希望的是小程序官方能給出相應的單元測試方案吧。前言 2017年1月9號微信小程序正式上線，小程序不需要安裝就能使用，依托微信強大的生態環境，能做到很多H5所不能做的事情。從微信小程序發布這段時間，陸陸續續開發了不少小程序相關的項目，總結了一些通用性的組件，但是對于小程序如何...

church 2019-05-29 17:01 評論0 收藏0
Puppeteer 初探

摘要：獲取獲取上下文句柄執行計算銷毀句柄除此之外，還可以使用意為在瀏覽器環境執行腳本，可傳入第二個參數作為句柄，而則針對選中的一個元素執行操作。我們日常使用瀏覽器或者說是有頭瀏覽器時的步驟為：啟動瀏覽器、打開一個網頁、進行交互。無頭瀏覽器指的是我們使用腳本來執行以上過程的瀏覽器，能模擬真實的瀏覽器使用場景。有了無頭瀏覽器，我們就能做包括但不限于以下事情：對網頁進行截圖保存為圖片或 ...

appetizerio 2019-08-21 17:08 評論0 收藏0
ELSE 技術周刊(2017.10.30期)

摘要：技術縱橫調試指南協議是新加入的調試協議，通過與交互，同時基于瀏覽器的提供了圖形化的調試界面。使得多業務線在復雜架構情況下能夠獨立開發測試，互不干擾，并統一調用接口。技術周刊由小組出品，匯聚一周好文章，周刊原文。本期推薦寫在 2017 的前端數據層不完全指北在前端技術的發展中，各個層面演進出不同的技術方案，如數據類型層面的 TypeScript，Flow，PropTypes，應用架...

AprilJ 2019-08-22 11:13 評論0 收藏0
2017-10-18 前端日報

摘要：前端日報精選無頭瀏覽器初探鼠標無限移動簡介譯深入分析變更檢測發布前必須排查的安全如何開發中文第期關鍵和減少阻塞渲染的的自動化解決方案譯網頁設計掘金年最受歡迎的個編程挑戰網站簡書系列和深入理解掘金發布后臺管理系統，沒錯，它就是你想 2017-10-18 前端日報精選無頭瀏覽器 Puppeteer 初探鼠標無限移動 JS API Pointer Lock簡介[譯] 深入分析 Angul...

cyrils 2019-08-21 17:07 評論0 收藏0