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
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励