使用 Headless Chrome 进行自动化测试

Marksmeng

2017-09-12

关注关注

如果你想使用 Headless Chrome 进行自动化测试，那么就往下！这篇文章将让你完全使用 Karma 作为运行器runner，并且使用 Mocha+Chai 来编撰测试。

这些东西是什么？

Karma、Mocha、Chai、Headless Chrome，哦，我的天哪！

Karma 是一个测试工具，可以和所有最流行的测试框架（Jasmine、Mocha、 QUnit）配合使用。

Chai 是一个断言库，可以与 Node 和浏览器一起使用。这里我们需要后者。

Headless Chrome 是一种在没有浏览器用户界面的无需显示环境中运行 Chrome 浏览器的方法。使用 Headless Chrome（而不是直接在 Node 中测试）的一个好处是 JavaScript 测试将在与你的网站用户相同的环境中执行。Headless Chrome 为你提供了真正的浏览器环境，却没有运行完整版本的 Chrome 一样的内存开销。

设置

安装

使用 yarn 安装 Karma、相关插件和测试用例：

yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai

或者使用 npm：

npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai

在这篇文章中我使用 Mocha 和 Chai，但是你也可以选择自己最喜欢的在浏览器中工作的断言库。

配置 Karma

创建一个使用 ChromeHeadless 启动器的 karma.config.js 文件。

karma.conf.js：

module.exports =function(config){
 config.set({
 frameworks:['mocha','chai'],
 files:['test/**/*.js'],
 reporters:['progress'],
 port:9876, // karma web server port
 colors:true,
 logLevel: config.LOG_INFO,
 browsers:['ChromeHeadless'],
 autoWatch:false,
 // singleRun: false, // Karma captures browsers, runs the tests and exits
 concurrency:Infinity
 })
}

注意： 运行 ./node_modules/karma/bin/karma init karma.conf.js 生成 Karma 的配置文件。

写一个测试

在 /test/test.js 中写一个测试：

/test/test.js：

describe('Array',()=>{
 describe('#indexOf()',()=>{
 it('should return -1 when the value is not present',()=>{
 assert.equal(-1,[1,2,3].indexOf(4));
 });
 });
});

运行你的测试

在我们设置好用于运行 Karma 的 package.json 中添加一个测试脚本。

package.json：

"scripts":{
 "test":"karma start --single-run --browsers ChromeHeadless karma.conf.js"
}

当你运行你的测试（yarn test）时，Headless Chrome 会启动并将运行结果输出到终端：

使用 Headless Chrome 进行自动化测试

创建你自己的 Headless Chrome 启动器

ChromeHeadless 启动器非常棒，因为它可以在 Headless Chrome 上进行测试。它包含了适合你的 Chrome 标志，并在端口 9222 上启动 Chrome 的远程调试版本。

但是，有时你可能希望将自定义的标志传递给 Chrome 或更改启动器使用的远程调试端口。要做到这一点，可以通过创建一个 customLaunchers 字段来扩展基础的 ChromeHeadless 启动器：

karma.conf.js：

module.exports =function(config){
 ...
 config.set({
 browsers:['Chrome','ChromeHeadless','MyHeadlessChrome'],
 customLaunchers:{
 MyHeadlessChrome:{
 base:'ChromeHeadless',
 flags:['--disable-translate','--disable-extensions','--remote-debugging-port=9223']
 }
 },
 }
};

完全在 Travis CI 上运行它

在 Headless Chrome 中配置 Karma 运行测试是很困难的。而在 Travis 中持续集成就只有几种！

要在 Travis 中运行测试，请使用 dist: trusty 并安装稳定版 Chrome 插件：

.travis.yml：

language: node_js
node_js:
 -"7"
dist: trusty # needs UbuntuTrusty
sudo:false #no need for virtualization.
addons:
 chrome: stable # have Travis install chrome stable.
cache:
 yarn:true
 directories:
 - node_modules
install:
 - yarn
script:
 - yarn test

作者简介

Eric Bidelman 谷歌工程师，Lighthouse 开发，Web 和 Web 组件开发，Chrome 开发

via: https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai

作者：Eric Bidelman 译者：firmianay 校对：wxy

本文由 LCTT 原创编译，Linux中国荣誉推出

karma 谷歌浏览器 ext

安科网

使用 Headless Chrome 进行自动化测试

Marksmeng

设置

安装

配置 Karma

写一个测试

运行你的测试

创建你自己的 Headless Chrome 启动器

完全在 Travis CI 上运行它

Marksmeng

相关推荐

一步一步实现现代前端单元测试

使用Karma做vue组件单元测试的实现

karma mocha angular angular-mock 测试

详解Angular Karma测试的持续集成实践

前端单元测试（未完。。）

使用karma+mocha+chai+sinon+@vue/test-utils为你的组件库增加单元测试

搭建 vue2 单元测试环境（karma+mocha+webpack3)

npm install karma时报错的问题解决

从零开始做Vue前端架构（6）单元测试 & 代码覆盖率

配置js测试环境

搭建 karma + jasmine 测试环境

JS测试框架Karma安装使用

netbeans和karma进行单元测试二【jasmine入门】

netbeans和karma进行单元测试

win7 64bint 基于Karma+qunit的前端测试架构的搭建

Vue单元测试实战教程(Mocha/Karma + Vue-Test-Utils + Chai)

用karma对基于cmd(seajs)的前端代码进行单元测试

karma如何与测试框架合作

vue组件测试用例实践一(搭建vue测试框架)

使用 Headless Chrome 进行自动化测试

Marksmeng