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:UsersAdministratorAppDataLocalGoogleChromeApplicationchrome.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/#/