成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Puppeteer 初探

oysun / 2103人閱讀

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

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

Puppeteer是什么？

Puppeteer是一個Node庫，它提供了一個高級API來通過DevTools協(xié)議控制無頭 Chrome或Chromium ，它也可以配置為使用完整（非無頭）Chrome或Chromium。

你可以通過Puppeteer的提供的api直接控制Chrome模擬大部分用戶操作來進行UI Test或者作為爬蟲訪問頁面來收集數(shù)據(jù)。

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

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

UI 自動化測試：擺脫手工瀏覽點擊頁面確認功能模式

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

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

PhantomJS, 基于 Webkit

SlimerJS, 基于 Gecko

HtmlUnit, 基于 Rhnio

TrifleJS, 基于 Trident

Splash, 基于 Webkit

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

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

Puppeteer能做什么？

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

生成頁面的屏幕截圖和PDF。

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

自動表單提交，UI測試，鍵盤輸入等。

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

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

入門

安裝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()來更改

實例二 創(chuàng)建一個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();
}
實例三 在渲染的頁面中執(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();
}
進階

page.type 獲取輸入框焦點并輸入文字

page.keyboard.press 模擬鍵盤按下某個按鍵，目前mac上組合鍵無效為已知bug

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

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

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

iframe.evaluate() 在瀏覽器中執(zhí)行函數(shù)，相當于在控制臺中執(zhí)行函數(shù)，返回一個 Promise

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

page.click() 點擊一個元素

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

iframe.$$eval 相當于在 iframe 中運行 document.querySelectorAll 獲取指定元素數(shù)組，并將其作為第一個參數(shù)傳遞

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

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

Puppeteer默認以Headless模式加載Chromium，如果想加載完整的Chromium（這樣方便觀察網(wǎng)頁加載的效果究竟是怎么樣的），可以執(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. 獲取控制臺輸出

可以監(jiān)聽console的事件，也可以通過evaluate來執(zhí)行console

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

 await page.evaluate(() => console.log(`url is ${location.href}`));
5. 設(shè)置頁面視窗大小 
await page.setViewport({
        width: 1366,
        height: 768 * 2
    });
參考鏈接



Puppeteer的入門教程和實踐 任乃千 https://www.jianshu.com/p/2f0...



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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95648.html

相關(guān)文章

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

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

    JerryWangSAP 評論0 收藏0

  • 小程序測試方案初探

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

    church 評論0 收藏0

  • Puppeteer 初探

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

    appetizerio 評論0 收藏0

  • ELSE 技術(shù)周刊(2017.10.30期)

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

    AprilJ 評論0 收藏0

  • 2017-10-18 前端日報

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

    cyrils 評論0 收藏0

發(fā)表評論

0條評論

oysun

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<