Web UI自动化框架-Puppeteer

Puppeteer 是什么

Puppeteer 是 Node.js 工具引擎
Puppeteer 提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome
Puppeteer 默认情况下是以 headless无界面启动 Chrome 的，也可以通过参数控制启动有界面的 Chrome
Puppeteer 默认绑定最新的 Chromium 版本，也可以自己设置不同版本的绑定

Puppeteer 能做什么

生成页面 PDF。
抓取 SPA（单页应用）并生成预渲染内容（即“SSR”（服务器端渲染））。
自动提交表单，进行 UI 测试，键盘输入等。
创建一个时时更新的自动化测试环境。使用最新的 JavaScript 和浏览器功能直接在最新版本的Chrome中执行测试。
捕获网站的 timeline trace用来帮助分析性能问题。
测试浏览器扩展。

安装

在项目中使用 Puppeteer：

npm I puppeteer
# or "yarn add puppeteer"

Note: 安装 Puppeteer 时，它会下载最新版本的Chromium（~170MB Mac，~282MB Linux，~280MB Win），以保证可以使用 API。如果想要跳过下载，请阅读环境变量。

HTTP_PROXY，HTTPS_PROXY，NO_PROXY-定义用于下载和运行Chromium的HTTP代理设置。
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD-在安装步骤中请勿下载捆绑的Chromium。
PUPPETEER_DOWNLOAD_HOST-覆盖用于下载Chromium的URL的主机部分
PUPPETEER_CHROMIUM_REVISION-指定您希望Puppeteer使用的特定版本的Chromium。 
PUPPETEER_EXECUTABLE_PATH-指定要在puppeteer.launch中使用的可执行路径。

安装报错

本地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 版本，用于启动现有浏览器安装或连接到远程安装。自 1.7.0 版本以来，会发布一个 puppeteer-core 包，这个包默认不会下载 Chromium。

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

具体见 puppeteer vs puppeteer-core.

使用

环境要求
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();
})();

上述代码执行的操作为：
1、puppeteer.launch() 创建一个浏览器实例 Browser 对象
2、 Browser 对象创建页面 Page 对象
3、 page.goto() 跳转到指定的页面
4、调用 page.screenshot() 对页面进行截图
5、关闭浏览器

执行无浏览器界面结束后，会在项目目录下生成一张截图：

Chrome扩展插件

功能

Chrome扩展程序，用于记录浏览器的交互并生成Puppeteer脚本。
-记录点击次数，输入事件等
-记录屏幕截图。
-导航时暂停录音。
-监视记录的事件。
-导出到Puppeteer代码。
-调整生成代码的设置。

安装后直接点击插件开始录制，在浏览器中对web页面进行操作，会自动生成Puppeteer脚本。录制完成后，直接将已生成的脚本复制出来即可。

常用API

1、加载导航页面
page.goto：打开新页面
page.goBack ：回退到上一个页面
page.goForward ：前进到下一个页面
page.reload ：重新加载页面
page.waitForNavigation：等待页面跳转

2、等待元素、请求、响应
page.waitForXPath：等待 xPath 对应的元素出现，返回对应的 ElementHandle 实例
page.waitForSelector ：等待选择器对应的元素出现，返回对应的 ElementHandle 实例
page.waitForResponse ：等待某个响应结束，返回 Response 实例
page.waitForRequest：等待某个请求出现，返回 Request 实例

3、获取元素
page. $('#uniqueId')：获取某个选择器对应的第一个元素 page.$$('div')：获取某个选择器对应的所有元素 page.$ x('//img')：获取某个 xPath 对应的所有元素
page.waitForXPath('//img')：等待某个 xPath 对应的元素出现
page.waitForSelector('#uniqueId')：等待某个选择器对应的元素出现

4、元素操作
elementHandle.click()：点击某个元素
elementHandle.tap()：模拟手指触摸点击
elementHandle.focus()：聚焦到某个元素
elementHandle.hover()：鼠标 hover 到某个元素上
elementHandle.type('hello')：在输入框输入文本