前言

对于 web 的自动测试，很多人熟悉的是 selenium、webdriver 的解决方案，比如说 webdriver 是按照 server – client 的经典设计模式设计的，server 端是 remote server，可以是任意的浏览器。以及常用到的一个爬虫框架 PhantomJS 。对于这两款工具环境安装复杂，API 调用不友好的问题。puppeteer 是一款基于 chrome 的自动化测试以及爬虫工具。

一、认识 puppeteer

在 chrome 59 chrome 团队支持了 headless 模式，在 Headless 模式下，用于自动化测试和不需要可视化用户界面的服务器。例如，你想在一个网页上运行一些测试，从网页创建一个 PDF，或者只是检查浏览器怎样递交 URL。

Puppeteer 是谷歌官方出品的一个通过 DevTools 协议控制 headless Chrome 的 Node 库。可以通过 Puppeteer 的提供的 api 直接控制 Chrome 模拟大部分用户操作来进行 UI Test 或者作为爬虫访问页面来收集数据。puppeteer 的出现让很多 lib 的开发者放弃继续开发，比如 PhantomJS 的作者当他看到 puppeteer 的出现就果断的放弃了 PhantomJS 的维护，很多小伙伴该伤心了吧。

Puppeteer 核心功能:

•利用网页生成 PDF、图片

•爬取 SPA 应用，并生成预渲染内容（即“SSR” 服务端渲染）

•可以从网站抓取内容

•自动化表单提交、UI 测试、键盘输入等

•帮你创建一个最新的自动化测试环境（chrome），可以直接在此运行测试用例

•捕获站点的时间线，以便追踪你的网站，帮助分析网站性能问题

Puppeteer 是使用 node 语言进行开发的，在使用中你可以使用 async/await 异步解决方案，async/await 可能是目前为止最简单的异步方案了。

二、环境准备

node：

Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/。选着对应的版本进行安装，对于 node 官方介绍需要 V6.4 以后的版本，如果要使用 async/await 需要 V7.6.而以后的版本，这里建议使用最新的稳定版本。

通过 node -v 查看版本信息

Npm：

就像 NPM 的官网（http://npmjs.org/）上介绍的那样，安装 NPM 仅仅是一行命令的事情：

curl http://npmjs.org/install.sh | sh

这里详解一下这句命令的意思，curl http://npmjs.org/install.sh是通过 curl 命令获取这个安装 shell 脚本，按后通过管道符| 将获取的脚本交由 sh 命令来执行。这里如果没有权限会安装不成功，需要加上 sudo 来确保权限

yarn：

brew install yarn mac 下使用该命令即可安装，yarn 的安装也是很简单的

其他平台参https://yarn.bootcss.com/docs/install.html

Puppeteer：

Puppeteer 因为是一个 npm 的包，所以安装很简单，你可以通过 npm 或者 yarn 的方式去安装：

npm i puppeteer/yarn add puppeteer

三、使用与例子

本篇内容主要介绍启动实例以及 debug 相关

Class：Puppeteer

Puppeteer 模块提供了一种启动 Chromium 实例的方法。

1.下面就是使用 Puppeteer 进行自动化的一个典型示例：

上述代码通过 puppeteer.launch 方法生成了一个 browser 的实例，此时在默认情况下是 headless 模式，对应于浏览器，接着通过 browser.newPage 方法去打开一个 tab，然后使用 page.goto 打开一个 url，接着使用 page.screenshot()进行截图，最后 browser.close 关闭 browser。

image.gif

2.通过 launch 的 options 设置参数

image.gif

image.gif

上述代码通过 puppeteer.launch({headless:false})此时 headless 模式是关闭的，但我们执行代码的时候回发现此时会打开一个 chrome，并且可以看到执行的步骤，这在我们平时的调试过程中是非常重要的。

image.gif

上述代码中在 options 中加了 slowMo:250,减慢速度，slowMo 选项以指定的毫秒减慢 Puppeteer 的操作。这种情况下执行的每个步骤都会变缓慢，当然对于人眼而言 250ms 是很难分出差别的，你可以把 slowMo 设置成 2500，这时候你就能清晰的看出做了什么。

3.控制台输出

上述代码通过 await page.evaluate(() => console.log(url is ${location.href}));在控制台把 url 打印出来，evaluate 是个非常强大的函数，来看下这个函数：

page.evaluate(pageFunction, …args)

• pageFunction <[function]|[string]> 要在页面实例上下文中执行的方法

• ...args <…[Serializable]|[JSHandle]> 要传给 pageFunction 的参数

• 返回: <[Promise]<[Serializable]>> pageFunction 执行的结果

如果 pageFunction 返回的是[Promise]，page.evaluate 将等待 promise 完成，并返回其返回值。

如果 pageFunction 返回的是不能序列化的值，将返回 undefined

来看下事例：

给 pageFunction 传参数示例：

const result = await page.evaluate(x => {

return Promise.resolve(8 * x);

}, 7); // 7 可以是你自己代码里任意方式得到的值

console.log(result); // prints "56"

也可以传一个字符串：

console.log(await page.evaluate('1 + 2')); // prints "3"

const x = 10;

console.log(await page.evaluate(1 + ${x})); // prints "11"

可以通过该函数向页面注入我们的函数，这样就有了无限可能

4.调试技巧

对于在测试中的调试，在 puppeteer 中可以在 launch 中配置 headless 为 false 关掉无界面模式，查看浏览器显示的内容这是一种调试方式，同是通过添加 slowMo 的方式也是为调试提供了方便。除了这些我们还可以打开 debug 的方式进行调试。直接上代码

image

上述代码中通过 await puppeteer.launch({devtools: true});打开调试模式。

image

我们可以看到在打开的界面中可以通过 paused in debugger 中的执行或者跳过对代码进行任意的操作了。

今天就写到这里吧，这里给出 git 源代码的地址 https://github.com/SummerGancf/puppeteerDemo.git

如何执行代码呢？？？

1.通过 git clone https://github.com/SummerGancf/puppeteerDemo.git把代码 checkout 在本地。

2.接着进入代码目录执行 yarn install 该命令会自动的安装相关的依赖，当然这是在你吧文章中的环境相关的都安装好了的情况下。

3.最后执行 node package/launchSetting.js 这会执行本篇文章中的所有的实例，如果你不想执行所有的话可以对它进行注释，如果有疑问欢迎咨询。