专栏首页较真的前端Headless Testing入坑指南

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),作者:英俊潇洒你冲哥

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于如何做一个“优秀网站”的清单——基础篇

    用户1687375
  • 什么是Promise串行

    Promise串行是指每一个由promise封装的任务都顺序执行,即上一个执行完成后再执行下一个。

    用户1687375
  • Chrome开发者工具还有这些功能,你知道吗?

    用户1687375
  • 第146天:移动H5前端性能优化

    4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB

    半指温柔乐
  • 移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点,首屏加载3秒...

    腾讯大讲堂
  • 移动H5前端性能优化指南 - 腾讯ISUX

    腾讯ISUX
  • [Chrome 83]谷歌浏览器升级后对表单控件和焦点元素黑框取消掉方法,磕碜啦啦的难看死了-chrome://flags/#form-controls-refresh

    最新发布的 Chrome 83 对表单控件进行了视觉效果的更新,其中对焦点元素的处理引起了众人的关注,当文本输入框处于焦点以及选定下拉菜单中的选项时,浏览器会在...

    landv
  • 第九节 - 部门管理模块(模糊查询)

    剽悍一小兔
  • AngularJS入门心得1——directive和controller如何通信

      粗略地翻了一遍《JavaScript DOM编程艺术》,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too...

    JackieZheng
  • PHP的switch和ifelse谁更快?

    对于多个if条件判断的情况下,我们使用switch来代替ifelse对于代码来说会更加的清晰明了,那么他们的效率对比呢?从PHP手册中发现有人已经对比过了,自己...

    硬核项目经理

扫码关注云+社区

领取腾讯云代金券