在Puppeteer出现之前，测试web应用程序通常依靠两种方式：有头浏览器，和构建在JavaScript引擎之上的无头浏览器。无头浏览器意味着没有用户界面，有头浏览器是最终用户与产品进行交互的窗口。

这就造成了一种必须权衡的局面：速度（无头）与可靠性（有头）。Puppeter的设计目标是消除这种权衡，能够让开发人员利用Chromium浏览器环境来运行测试，并让他们能够灵活地利用有头与无头浏览器来实现用户场景的测试。

Puppeteer也非常适合开发人员，开发人员可以基于熟悉的测试框架集成Puppeteer来实现、拓展自己的测试能力。

简单来说使用Puppeteer，我们可以实现：

  • 快速爬取网页内容
  • 自动完成表单数据提交
  • 实现在浏览器上的所有自动化操作
  • 跟踪并记录页面加载性能
  • 浏览器屏幕截图
  • 实现自动化测试
  • 从网页生成PDF

安装Puppeteer

使用如下命令安装：

Copy to Clipboard

使用Puppeteer

在Node.js文件中加载Puppeteer

Copy to Clipboard
使用launch() 方法用于创建浏览器的实例对象:
Copy to Clipboard
Copy to Clipboard
调用browser对象的newPage() 方法返回页面对象:
Copy to Clipboard
在页面对象上调用goto() 方法用以访问测试页面:
Copy to Clipboard
使用page.$() 等同于使用Selectors API querySelector()获取页面元素, page.$$() 等同于querySelectorAll()获取全部页面满足条件对象。
测试结束后可以使用close()方法关闭浏览器:
Copy to Clipboard

Page对象内置函数

page.$() 提供对页面上的选择器API方法querySelector()的访问权限

page.$$() 提供对页面上的选择器API方法querySelectorAll()的访问权限

page.$eval() 接收2个或多个参数。第一个是选择器，第二个是函数。如果有更多参数，则这些参数将作为附加参数传递给函数。

Copy to Clipboard

click()  对页面元素进行点击事件模拟

Copy to Clipboard

content() 获取HTML的页面源代码

emulate() 模拟设备信息，可以通过配置Agent和viewport 模拟不同设备访问网站。

Copy to Clipboard

evaluate() 在页上下文中执行用户指定的函数。在这个函数中，可以直接访问document对象，因此可以调用任何DOM API：

Copy to Clipboard

focus() 选中当前元素
goBack() 后退页面
goForward() 前进页面
goto() 打开某一网址
hover() 悬停在某元素上
pdf() 生成当前页面的PDF文档
reload() 重新加载当前页面
screenshot() 截图当前页面并存储为PNG图片
setViewPort() 默认的viewport 为800x600px， 可以通过setViewport 来模拟不同窗口尺寸

waitFor() 等待某些条件成立，内置以下等待条件:

  • waitForFunction
  • waitForNavigation
  • waitForRequest
  • waitForResponse
  • waitForSelector
  • waitForXPath
Copy to Clipboard

结论

本文介绍了Puppeteer的原理以及常用API，在接下来的文章中，我们将详细比较Selenium和pupperter框架的优缺点，如何针对项目的技术背景有针对的选择测试框架。