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/

原文发布于微信公众号 - 较真的前端(gh_7af41a2be77e)

原文发表时间:2018-02-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王磊的博客

一些好用的开源控件

      工作两年,一直都在做些编码方面的表面功夫,实现了很多很炫的功能,在此写下一些体验。有些比较小的dll文件我会发上来,如果是开源组织的代码我会把地址附...

38960
来自专栏前端布道

Angular开发实践(五):深入解析变化监测

什么是变化监测 在使用 Angular 进行开发中,我们常用到 Angular 中的绑定——模型到视图的输入绑定、视图到模型的输出绑定以及视图与模型的双向绑定。...

41680
来自专栏挖掘大数据

Cobub无码埋点关键技术实现流程(附图)

随着大数据时代的到来,数据采集也已经变的越来越重要。前端埋点作为一个比较成熟的数据接入手段被广泛应用着。目前埋点分为两种方式,有码与无码埋点。有码埋点比较容易理...

27160
来自专栏落影的专栏

iOS开发笔记(八)---- 键盘、静态库、动画、Crash定位

41890
来自专栏小白安全

XSS跨站脚本攻击的原理分析与解剖

《xss攻击手法》一开始在互联网上资料并不多(都是现成的代码,没有从基础的开始),直到刺的《白帽子讲WEB安全》和cn4rry的《XSS跨站脚本攻击剖析与防...

33650
来自专栏码生

ReactNative 面试题

今天有一个 ReactNative 的面试。 时间紧迫,临时写了几个问题,初级面试问题。 都是关键字

97930
来自专栏淡定的博客

使用cropper实现图片裁剪功能并保存图片到数据库

58820
来自专栏QQ音乐技术团队的专栏

使用 Jest 进行前端单元测试

目前 Jest 已经在 Facebook 开源的 React, React Native 等前端项目中被做为标配测试框架。下面简单介绍一些 Jest 比较有用的...

1K90
来自专栏java一日一条

优化 iOS 程序性能的 25 个方法

ARC(Automatic ReferenceCounting, 自动引用计数)和iOS5一起发布,它避免了最常见的也就是经常是由于我们忘记释放内存所造成的内存...

14040
来自专栏技术之路

Qt5 新特性

Qt 5 已经临近发布,其最大的特点就是模块化。将原来庞大的模块更细分为不同的部分,同时,一个大版本的升级,当然少不了添加、删除各个功能类。文本简单介绍 Qt5...

41080

扫码关注云+社区

领取腾讯云代金券