puppeteer UI自動化測試demo（一）

一.簡介

這個不大常見，比較常見的是selenium和weddriver；

所以就增加一個說明，來自官網的。

---

Puppeteer 是一個 Node 庫，它提供了一個高級 API 來通過 DevTools 協議控制 Chromium 或 Chrome。Puppeteer 默認以 headless 模式運行，但是可以通過修改配置文件運行“有頭”模式。

你可以在瀏覽器中手動執行的絕大多數操作都可以使用 Puppeteer 來完成！ 下面是一些示例：

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

二.安裝

1）node

由上可知，該框架依賴於node，先安裝node6+

到該地址 ：http://nodejs.cn/download/選擇合適的版本進行安裝；

安裝結束后(比如我是window)，在cmd執行：node -v 

以上說明安裝成功了。

2）puppeteer  

同樣來源於官網：

安裝
在項目中使用 Puppeteer：
npm i puppeteer
# or "yarn add puppeteer"
Note: 當你安裝 Puppeteer 時，它會下載最新版本的Chromium（~170MB Mac，~282MB Linux，~280MB Win），以保證可以使用 API。 如果想要跳過下載，請閱讀環境變量。
puppeteer-core
自 1.7.0 版本以來，我們都會發布一個 puppeteer-core 包，這個包默認不會下載 Chromium。
npm i puppeteer-core
# or "yarn add puppeteer-core"
puppeteer-core 是一個的輕量級的 Puppeteer 版本，用於啟動現有瀏覽器安裝或連接到遠程安裝。
具體見 puppeteer vs puppeteer-core.

三.運行

1）編寫example.js腳本

官網都是以默認Chromium執行，我這邊以自帶的chrome執行。腳本如下：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({executablePath:"C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe"});
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'd:\\example.png'});
  await browser.close();
})();

2）執行example.js

執行命令：node example.js

報錯

解決：將該js放置到node puppeteer模塊的目錄下再執行；

四. 結果

1）在D盤目錄，產生example.png文件

2）打開文件，為該url界面的截圖

 五.缺點

1）該工具是基於Chromium提供出的api，適合Chromium的接口，在chrome上執行未必成功；而我們客戶一般是安裝chrome，所以，就看涉及到的api了；

附：

官網地址：https://github.com/GoogleChrome/puppeteer

api地址：https://zhaoqize.github.io/puppeteer-api-zh_CN/#/