Web UI自動化框架-Puppeteer

Puppeteer 是什么

  • Puppeteer 是 Node.js 工具引擎
  • Puppeteer 提供了一個高級 API 來通過 DevTools 協(xié)議控制 Chromium 或 Chrome
  • Puppeteer 默認情況下是以 headless無界面 啟動 Chrome 的，也可以通過參數(shù)控制啟動有界面的 Chrome
  • Puppeteer 默認綁定最新的 Chromium 版本，也可以自己設(shè)置不同版本的綁定

Puppeteer 能做什么

  • 生成頁面 PDF。
  • 抓取 SPA（單頁應(yīng)用）并生成預(yù)渲染內(nèi)容（即“SSR”（服務(wù)器端渲染））。
  • 自動提交表單，進行 UI 測試，鍵盤輸入等。
  • 創(chuàng)建一個時時更新的自動化測試環(huán)境。 使用最新的 JavaScript 和瀏覽器功能直接在最新版本的Chrome中執(zhí)行測試。
  • 捕獲網(wǎng)站的 timeline trace用來幫助分析性能問題。
  • 測試瀏覽器擴展。

安裝

在項目中使用 Puppeteer：

npm I puppeteer
# or "yarn add puppeteer"

Note: 安裝 Puppeteer 時，它會下載最新版本的Chromium（~170MB Mac，~282MB Linux，~280MB Win），以保證可以使用 API。 如果想要跳過下載，請閱讀環(huán)境變量。

HTTP_PROXY，HTTPS_PROXY，NO_PROXY-定義用于下載和運行Chromium的HTTP代理設(shè)置。
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD-在安裝步驟中請勿下載捆綁的Chromium。
PUPPETEER_DOWNLOAD_HOST-覆蓋用于下載Chromium的URL的主機部分
PUPPETEER_CHROMIUM_REVISION-指定您希望Puppeteer使用的特定版本的Chromium。 
PUPPETEER_EXECUTABLE_PATH-指定要在puppeteer.launch中使用的可執(zhí)行路徑。
安裝報錯

本地node版本為v10.11.0，默認安裝puppeteer最新3.1.0版本時，一直報錯：

$ npm install puppeteer --save

> puppeteer@3.1.0 install /Users/wangpingyang/Program/puppeteer2e/node_modules/puppeteer
> node install.js

(node:42761) ExperimentalWarning: The fs.promises API is experimental
ERROR: Failed to set up Chromium r756035! Set "PUPPETEER_SKIP_DOWNLOAD" env variable to skip download.
{ Error: read ECONNRESET
    at TLSWrap.onStreamRead (internal/stream_base_commons.js:111:27)
  -- ASYNC --
    at BrowserFetcher.<anonymous> (/Users/wangpingyang/Program/puppeteer2e/node_modules/puppeteer/lib/helper.js:94:19)
    at fetchBinary (/Users/wangpingyang/Program/puppeteer2e/node_modules/puppeteer/install.js:148:8)
    at download (/Users/wangpingyang/Program/puppeteer2e/node_modules/puppeteer/install.js:54:9) errno: 'ECONNRESET', code: 'ECONNRESET', syscall: 'read' }
npm WARN ws@7.3.0 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN ws@7.3.0 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN puppeteer2e@1.0.0 No description
npm WARN puppeteer2e@1.0.0 No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! puppeteer@3.1.0 install: `node install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the puppeteer@3.1.0 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/wangpingyang/.npm/_logs/2020-05-23T07_29_44_741Z-debug.log

在github的issues中找到其他人也有同樣問題，給出的解決方法是將puppeteer安裝版本指定為2.1.1
npm install puppeteer@2.1.1 --save
終于安裝成功

$ npm install puppeteer@2.1.1 --save

> puppeteer@2.1.1 install /Users/wangpingyang/Program/puppeteer2e/node_modules/puppeteer
> node install.js

Downloading Chromium r722234 - 116.4 Mb [====================] 100% 0.0s 
Chromium downloaded to /Users/wangpingyang/Program/puppeteer2e/node_modules/puppeteer/.local-chromium/mac-722234
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN puppeteer2e@1.0.0 No description
npm WARN puppeteer2e@1.0.0 No repository field.

+ puppeteer@2.1.1
added 44 packages from 26 contributors in 221.508s

puppeteer-core

puppeteer-core 是一個的輕量級的 Puppeteer 版本，用于啟動現(xiàn)有瀏覽器安裝或連接到遠程安裝。自 1.7.0 版本以來，會發(fā)布一個 puppeteer-core 包，這個包默認不會下載 Chromium。

npm i puppeteer-core
# or "yarn add puppeteer-core"

具體見 puppeteer vs puppeteer-core.

使用

環(huán)境要求
1、Puppeteer 至少需要 Node v6.4.0
2、 async / await，僅在 Node v7.6.0 或更高版本中被支持。

示例

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://zhaoqize.github.io/puppeteer-api-zh_CN/');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

上述代碼執(zhí)行的操作為：
1、puppeteer.launch() 創(chuàng)建一個瀏覽器實例 Browser 對象
2、 Browser 對象創(chuàng)建頁面 Page 對象
3、 page.goto() 跳轉(zhuǎn)到指定的頁面
4、調(diào)用 page.screenshot() 對頁面進行截圖
5、關(guān)閉瀏覽器

執(zhí)行無瀏覽器界面結(jié)束后，會在項目目錄下生成一張截圖：


Chrome擴展插件

功能

Chrome擴展程序，用于記錄瀏覽器的交互并生成Puppeteer腳本。
-記錄點擊次數(shù)，輸入事件等
-記錄屏幕截圖。
-導(dǎo)航時暫停錄音。
-監(jiān)視記錄的事件。
-導(dǎo)出到Puppeteer代碼。
-調(diào)整生成代碼的設(shè)置。

安裝后直接點擊插件開始錄制，在瀏覽器中對web頁面進行操作，會自動生成Puppeteer腳本。錄制完成后，直接將已生成的腳本復(fù)制出來即可。


常用API

1、加載導(dǎo)航頁面
page.goto：打開新頁面
page.goBack ：回退到上一個頁面
page.goForward ：前進到下一個頁面
page.reload ：重新加載頁面
page.waitForNavigation：等待頁面跳轉(zhuǎn)

2、等待元素、請求、響應(yīng)
page.waitForXPath：等待 xPath 對應(yīng)的元素出現(xiàn)，返回對應(yīng)的 ElementHandle 實例
page.waitForSelector ：等待選擇器對應(yīng)的元素出現(xiàn)，返回對應(yīng)的 ElementHandle 實例
page.waitForResponse ：等待某個響應(yīng)結(jié)束，返回 Response 實例
page.waitForRequest：等待某個請求出現(xiàn)，返回 Request 實例

3、獲取元素
page.('#uniqueId')：獲取某個選擇器對應(yīng)的第一個元素 page.$$('div')：獲取某個選擇器對應(yīng)的所有元素 page.x('//img')：獲取某個 xPath 對應(yīng)的所有元素
page.waitForXPath('//img')：等待某個 xPath 對應(yīng)的元素出現(xiàn)
page.waitForSelector('#uniqueId')：等待某個選擇器對應(yīng)的元素出現(xiàn)

4、元素操作
elementHandle.click()：點擊某個元素
elementHandle.tap()：模擬手指觸摸點擊
elementHandle.focus()：聚焦到某個元素
elementHandle.hover()：鼠標 hover 到某個元素上
elementHandle.type('hello')：在輸入框輸入文本

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容