本文首发于知乎
Headless Testing是什么
Headless是指没有界面的浏览器运行环境。那么Headless Testing也就不难理解,是基于无界面化提供的命令行工具和api进行的前端测试手段。
为什么要使用Headless Testing
Headless Testing有下面的优势:
●比真实浏览器更快
由于无头测试不需要启动浏览器的GUI界面,所以你可以绕过真正浏览的加载CSS、JavaScript和打开、绘制HTML的所有环节。
●抓取数据更加方便
如果没有无头测试工具的话,在抓取页面数据时,你需要打开一个浏览器,输入页面地址,找到指定的页面数据。而有了无头测试工具之后,这一切操作都可以自动化完成。
●便于构建自动化测试脚本
你可以利用无头测试工具和js的测试框架(如mocha、jasmin、karma等)轻松地进行前端页面的单元测试。因为你可以利用无头测试工具提供的命令行+api来自动化地替代大量的简单重复操作,如输入页面地址、刷新页面、表单提交、确认显示数据是否正确等等。
●轻松模拟多个浏览器
在非自动化的测试流程中,测试人员为了能在不同浏览器(不同内核、不同尺寸)上确认页面的表现与运行是否正常,不得不来回切换浏览器,移动端测试还不得不切换机型。如果有了无头测试则可以轻松通过api和配置项来控制当前浏览器的属性。此外,你也可以通过脚本进行并发测试。
无头测试工具
无头测试工具有很多,下面列出一些比较流行的:
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/