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相关的操作。
领取专属 10元无门槛券
私享最新 技术干货