Puppeteer 初探

oysun 發(fā)布于2019-08-22 18:14 / 2101人閱讀

摘要：抓取并生成預(yù)先呈現(xiàn)的內(nèi)容即。自動(dòng)表單提交，測(cè)試，鍵盤(pán)輸入等。創(chuàng)建一個(gè)最新的自動(dòng)化測(cè)試環(huán)境。使用最新的的和瀏覽器功能，直接在最新版本的瀏覽器中運(yùn)行測(cè)試。捕獲您網(wǎng)站的時(shí)間線跟蹤，以幫助診斷性能問(wèn)題。

木偶 Puppeteer

更友好的 Headless Chrome Node API
木偶也是有心的 (=?ω?=)

Puppeteer是什么？

Puppeteer是一個(gè)Node庫(kù)，它提供了一個(gè)高級(jí)API來(lái)通過(guò)DevTools協(xié)議控制無(wú)頭 Chrome或Chromium ，它也可以配置為使用完整（非無(wú)頭）Chrome或Chromium。

你可以通過(guò)Puppeteer的提供的api直接控制Chrome模擬大部分用戶操作來(lái)進(jìn)行UI Test或者作為爬蟲(chóng)訪問(wèn)頁(yè)面來(lái)收集數(shù)據(jù)。

為什么會(huì)產(chǎn)生Puppeteer呢？

很早很早之前，前端就有了對(duì) headless 瀏覽器的需求，最多的應(yīng)用場(chǎng)景有兩個(gè)

UI 自動(dòng)化測(cè)試：擺脫手工瀏覽點(diǎn)擊頁(yè)面確認(rèn)功能模式

爬蟲(chóng)：解決頁(yè)面內(nèi)容異步加載等問(wèn)題

在Chrome headless 和Puppeteer出現(xiàn)之前，headless 瀏覽器有以下幾種：

PhantomJS, 基于 Webkit

SlimerJS, 基于 Gecko

HtmlUnit, 基于 Rhnio

TrifleJS, 基于 Trident

Splash, 基于 Webkit

但這些都有共同的通病，環(huán)境安裝復(fù)雜，API 調(diào)用不友好

2017 年 Chrome 官方團(tuán)隊(duì)連續(xù)放了兩個(gè)大招 Headless Chrome 和對(duì)應(yīng)的 NodeJS API Puppeteer，直接讓 PhantomJS 和 Selenium IDE for Firefox 作者宣布暫停繼續(xù)維護(hù)其產(chǎn)品，PhantomJs的開(kāi)發(fā)者更直接宣稱自己要失業(yè)了。

Puppeteer能做什么？

你可以在瀏覽器中手動(dòng)完成的大部分事情都可以使用Puppteer完成
比如：

生成頁(yè)面的屏幕截圖和PDF。

抓取SPA并生成預(yù)先呈現(xiàn)的內(nèi)容（即“SSR”）。

自動(dòng)表單提交，UI測(cè)試，鍵盤(pán)輸入等。

創(chuàng)建一個(gè)最新的自動(dòng)化測(cè)試環(huán)境。使用最新的的JavaScript和瀏覽器功能，直接在最新版本的Chrome瀏覽器中運(yùn)行測(cè)試。

捕獲您網(wǎng)站的時(shí)間線跟蹤，以幫助診斷性能問(wèn)題。

入門(mén)

安裝Puppeteer

npm install puppeteer
或者
yarn add puppeteer

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

實(shí)例一截屏保存

導(dǎo)航到 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 默認(rèn)的頁(yè)面大小為800x600分辨率，頁(yè)面的大小可以通過(guò)Page.setViewport()來(lái)更改

實(shí)例二創(chuàng)建一個(gè)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();
}

實(shí)例三在渲染的頁(yè)面中執(zhí)行代碼

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

進(jìn)階

page.type 獲取輸入框焦點(diǎn)并輸入文字

page.keyboard.press 模擬鍵盤(pán)按下某個(gè)按鍵，目前mac上組合鍵無(wú)效為已知bug

page.waitFor 頁(yè)面等待，可以是時(shí)間、某個(gè)元素、某個(gè)函數(shù)

page.frames() 獲取當(dāng)前頁(yè)面所有的 iframe，然后根據(jù) iframe 的名字精確獲取某個(gè)想要的 iframe

iframe.$(".srchsongst") 獲取 iframe 中的某個(gè)元素

iframe.evaluate() 在瀏覽器中執(zhí)行函數(shù)，相當(dāng)于在控制臺(tái)中執(zhí)行函數(shù)，返回一個(gè) Promise

Array.from 將類數(shù)組對(duì)象轉(zhuǎn)化為對(duì)象

page.click() 點(diǎn)擊一個(gè)元素

iframe.$eval() 相當(dāng)于在 iframe 中運(yùn)行 document.queryselector 獲取指定元素，并將其作為第一個(gè)參數(shù)傳遞

iframe.$$eval 相當(dāng)于在 iframe 中運(yùn)行 document.querySelectorAll 獲取指定元素?cái)?shù)組，并將其作為第一個(gè)參數(shù)傳遞

還是看這篇文章吧，作者寫(xiě)了兩個(gè)實(shí)例Demo，看一下代碼就能懂上面的基礎(chǔ)用法了。

一些默認(rèn)的設(shè)置和開(kāi)發(fā)調(diào)試建議 1. 使用Headless模式

Puppeteer默認(rèn)以Headless模式加載Chromium，如果想加載完整的Chromium（這樣方便觀察網(wǎng)頁(yè)加載的效果究竟是怎么樣的），可以執(zhí)行以下命令

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

2. 使執(zhí)行本地版本的Chrome或者Chromium

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

3. 延遲執(zhí)行Puppeteer

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

4. 獲取控制臺(tái)輸出

可以監(jiān)聽(tīng)console的事件，也可以通過(guò)evaluate來(lái)執(zhí)行console

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

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

5. 設(shè)置頁(yè)面視窗大小

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

參考鏈接

Puppeteer的入門(mén)教程和實(shí)踐 任乃千 https://www.jianshu.com/p/2f0...

官方文檔 https://github.com/GoogleChro...

云服務(wù)器 GPU云服務(wù)器 Puppeteer puppeteer_node puppeteer關(guān)閉webrtc 初探webrtc

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/95648.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

oysun

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow源碼

閱讀 737·2023-04-25 19:28
指針學(xué)習(xí)進(jìn)階

閱讀 1397·2021-09-10 10:51
清除浮動(dòng) or 閉合浮動(dòng)

閱讀 2393·2019-08-30 15:55
端到端測(cè)試神器Cypress!進(jìn)階

閱讀 3416·2019-08-26 13:55
JavaScript是怎樣編碼數(shù)字的[How numbers are encoded in Java

閱讀 3005·2019-08-26 13:24
ES6的demo代碼

閱讀 3332·2019-08-26 11:46
ES6中數(shù)組之some、findIndex和filter方法

閱讀 2760·2019-08-23 17:10
Vue自定義單選按鈕和復(fù)選框組件

閱讀 1422·2019-08-23 16:57

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Puppeteer 初探

相關(guān)文章