Headless Testing入坑指南

本文首发于知乎

Headless Testing是什么

Headless是指没有界面的浏览器运行环境。那么Headless Testing也就不难理解，是基于无界面化提供的命令行工具和api进行的前端测试手段。

为什么要使用Headless Testing

Headless Testing有下面的优势：

• 比真实浏览器更快
• 抓取数据更加方便
• 便于构建自动化测试脚本
• 轻松模拟多个浏览器

●比真实浏览器更快

由于无头测试不需要启动浏览器的GUI界面，所以你可以绕过真正浏览的加载CSS、JavaScript和打开、绘制HTML的所有环节。

●抓取数据更加方便

如果没有无头测试工具的话，在抓取页面数据时，你需要打开一个浏览器，输入页面地址，找到指定的页面数据。而有了无头测试工具之后，这一切操作都可以自动化完成。

●便于构建自动化测试脚本

你可以利用无头测试工具和js的测试框架（如mocha、jasmin、karma等）轻松地进行前端页面的单元测试。因为你可以利用无头测试工具提供的命令行+api来自动化地替代大量的简单重复操作，如输入页面地址、刷新页面、表单提交、确认显示数据是否正确等等。

●轻松模拟多个浏览器

在非自动化的测试流程中，测试人员为了能在不同浏览器（不同内核、不同尺寸）上确认页面的表现与运行是否正常，不得不来回切换浏览器，移动端测试还不得不切换机型。如果有了无头测试则可以轻松通过api和配置项来控制当前浏览器的属性。此外，你也可以通过脚本进行并发测试。

无头测试工具

无头测试工具有很多，下面列出一些比较流行的：

1. PhantomJS + CasperJS
2. Nightmare + mocha
3. Headless Chrome
4. Puppeteer

PhantomJS + CasperJS

PhantomJS是一个无头的WebKit框架，它对外提供了JavaScript API来与WebKit框架进行交互。他可以帮助开发者实现页面测试，页面截屏，页面自动化交互，网络监控等功能。

CasperJS专为PhantomJS而生，它提供了一个基本的测试套件，它允许你运行完整的功能测试，也允许你从Web页面中获取数据。

安装phantomjs方法（Linux）

安装casperjs方法

下面是一个使用PhantomJS+CasperJS来进行无头测试的例子。

首先你需要创建一个caspergoogle.js文件，它的代码如下：

上面的例子里，我们用CasperJS抓取了http://Google.com的数据，然后我们利用CasperJS向搜索框中模拟输入了一段字符串，然后把运行结果输出到了终端。

为了运行上面的例子，你需要执行下面这个命令。

Nightmare+Mocha

Nightmare是Segment的一套高级浏览器自动化库。

Nightmare对外提供了一些模拟用户的简单操作，如goto、type或click等。他提供的API全部都是同步的，不是深度嵌套在回调中的。它最初设计用于在没有对外提供api的站点上自动执行任务，但它最常用的点是UI测试和爬去数据。

Mocha是一个运行在Node和浏览器上的测试框架。他可以辅助Nightmare更好的完成自动化测试。

将Nightmare和Mocha安装成开发依赖的方法：

下面是一个基于Nightmare和Mocha的例子：

这里我还使用到了断言库——chai。在上面的例子中，我们先跳转到“duckduckgo.com”网站，然后在指定的元素内输入“github nightmare”，接着通过选择器点击指定的按钮，再等到指定的元素出现后，最终确认元素中的链接是否与期待一致。

Headless Chrome

Headless Chrome是在无头环境下运行Chrome浏览器的一种方式，最终达到帮助开发者完成自动化测试的目的。目前Chrome 59以上已经支持无头运行。

Headless Chrome带来了由Chromium和Blink渲染引擎提供的所有现代web平台功能。这是一种不需要在屏幕上打开窗口的全新页面交互方式。

要想体验Headless Chrome很简单，你只需要在控制台输入下面的命令。运行该命令之前，你需要确保两个事情，一是你要安装最新的chrome版本，另一个是你需要将chrome加入到环境变量中。

你可以利用Headless Chrome将页面转换为pdf

你可以Headless Chrome对页面进行截屏

就像你看到的一样，Headless Chrome是通过命令行的方式来与浏览器进行交互。如果你想利用它进行自动化脚本或者写代码来控制的话，你就需要学习Puppeteer了。

Puppeteer

Puppeteer是Chrome团队开发的Node库。它提供了一系列的高级别API来控制Headless Chrome。它和其他自动化测试框架一样，如PhantomJS和NightmareJS，不过它只适用于59+版本的Chrome。

安装Puppeteer的方法

下面的例子中，使用Puppeteer来对页面进行截屏。

下面的例子中，使用Puppeteer来对页面数据进行抓取。

总结

在本文中，我们了解了无头测试如何帮助作为开发者的你，并探索了一些无头测试工具和示例。

无头测试在web开发中是非常有用的工具。通过无头测试，您可以生成网站的截图和pdf文件，从网站上抓取内容，自动提交表单，并模拟键盘输入。

当与无头浏览器结合使用时，它允许你在完全成熟的浏览器中做任何你可以做的事情，而不需要浏览器。

参考文章：

Introduction to Headless Browser Testing

https://blog.logrocket.com/introduction-to-headless-browser-testing-44b82310b27c

Headless Browser Testing Pros and Cons

https://www.joecolantonio.com/2017/09/21/headless-browser-testing-pros-cons/