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

> [email protected] 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. (/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 [email protected] requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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 [email protected] --save
终于安装成功

$ npm install [email protected] --save

> [email protected] 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 [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
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.x('//img')：获取某个 xPath 对应的所有元素
page.waitForXPath('//img')：等待某个 xPath 对应的元素出现
page.waitForSelector('#uniqueId')：等待某个选择器对应的元素出现

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