Puppeteer的入门与实践
1.背景
在web端自动化测试中目前使用较多的是selenium、webdriver等的解决方案，这些的依赖较多。puppeteer是一款基于chrome的自动化测试以及爬虫工具。
2.了解puppeteer
Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。
Puppeteer 核心功能
利用网页生成PDF、图片
爬取SPA应用，并生成预渲染内容（即“SSR” 服务端渲染）
可以从网站抓取内容
自动化表单提交、UI测试、键盘输入等
帮你创建一个最新的自动化测试环境（chrome），可以直接在此运行测试用例
捕获站点的时间线，以便追踪你的网站，帮助分析网站性能问题
3环境和安装
Puppeteer因为是一个npm的包，所以安装很简单：(在此之前需要安装node)
npm i puppeteer
或者
yarn add puppeteer
Puppeteer安装时自带一个最新版本的Chromium，可以通过设置环境变量或者npm config中的PUPPETEER_SKIP_CHROMIUM_DOWNLOAD跳过下载。如果不下载的话，启动时可以通过puppeteer.launch([options])配置项中的executablePath指定Chromium的位置。
4 使用和例子
Puppeteer类似其他框架，通过操作Browser实例来操作浏览器作出相应的反应。
上述代码通过puppeteer.launch方法生成了一个browser的实例，对应于浏览器，launch方法可以传入配置项，比较有用的是在本地调试时传入可以关闭headless模式。
browser.newPage方法可以打开一个新tab并且返回这个tab的事例page，通过page的各种方法可以对页面进行常用操作,如元素查找、点击、输入等的操作。上述代码中page.screenshot是截屏，page.pdf是打印pdf。
puppeteer提供了一个强大的方法page.evaluate，来看下这个函数
page.evaluate(pageFunction, …args)
要在页面实例上下文中执行的方法
要传给 的参数
返回: > 执行的结果
如果pageFunction返回的是[Promise]，将等待promise完成，并返回其返回值。
如果pageFunction返回的是不能序列化的值，将返回
来看下事例：
给传参数示例：
也可以传一个字符串：
可以通过该函数向页面注入我们的函数，这样就有了无限可能
4 调试技巧
先来了解launch方法：
puppeteer.launch([options])
在浏览器上设置的一组可配置选项。 有以下字段：
是否在导航期间忽略 HTTPS 错误. 默认是 。
是否以 无头模式 运行浏览器。默认是 ，除非 选项是 。
可运行 Chromium 或 Chrome 可执行文件的路径，而不是绑定的的 Chromium。如果 是一个相对路径，那么他相对于 当前工作路径 解析。
将 Puppeteer 操作减少指定的毫秒数。这样你就可以看清发生了什么，这很有用。
> 传递给浏览器实例的其他参数。 这些参数可以参考 这里。
不要使用 。危险的选项; 谨慎使用。默认是 。
Ctrl-C 关闭浏览器进程。默认是 。
关闭 SIGTERM 上的浏览器进程。默认是 。
关闭 SIGHUP 上的浏览器进程。默认是 .
等待浏览器实例启动的最长时间（以毫秒为单位）。默认是 (30 秒). 通过 来禁用超时。
是否将浏览器进程标准输出和标准错误输入到 和 中。默认是 。
用户数据目录 路径。
指定浏览器可见的环境变量。默认是 。
是否为每个选项卡自动打开DevTools面板。如果这个选项是 ， 选项将会设置成 。
通过管道而不是WebSocket连接到浏览器。默认是 。
returns: > 浏览器实例支持 Promise。
该方法启动具有给定参数的浏览器实例。当父节点 node.js 进程关闭时，浏览器将被关闭。
chrome提供了headless模式，在puppeteer中可以在launch中配置headless为false关掉无界面模式，查看浏览器显示的内容。使用以下命令可以启动完整版浏览器：
减慢速度，slowMo选项以指定的毫秒减慢Puppeteer的操作。这是另一个看到发生了什么的方法：
下篇文章将会介绍page相关的操作。
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20180720G0IULX00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
