LINUX入门：使用 Headless Chrome 进行自动化测试

《LINUX入门：使用 Headless Chrome 进行自动化测试》要点：
本文介绍了LINUX入门：使用 Headless Chrome 进行自动化测试，希望对您有用。如果有疑问，可以联系我们。

如果你想使用 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、相关插件和测试用例：

1. yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
2. yarn add --dev mocha chai

或者使用 npm：

1. npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
2. npm i --save-dev mocha chai

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

?

配置 Karma

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

karma.conf.js：

1. module.exports =function(config){
2. ? config.set({
3. ? ? frameworks:['mocha','chai'],
4. ? ? files:['test/**/*.js'],
5. ? ? reporters:['progress'],
6. ? ? port:9876, ?// karma web server port
7. ? ? colors:true,
8. ? ? logLevel: config.LOG_INFO,
9. ? ? browsers:['ChromeHeadless'],
10. ? ? autoWatch:false,
11. ? ? // singleRun: false,// Karma captures browsers,runs the tests and exits
12. ? ? concurrency:Infinity
13. ? })
14. }

注意：?运行 ./node_modules/karma/bin/karma init karma.conf.js 生成 Karma 的设置装备摆设文件.

?

写一个测试

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

/test/test.js：

?

运行你的测试

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

package.json：

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

当你运行你的测试(yarn test)时,Headless Chrome 会启动并将运行成果输出到终端：

?

创建你自己的 Headless Chrome 启动器

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

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

karma.conf.js：

1. module.exports =function(config){
2. ? ...
3. ? config.set({
4. ? ? browsers:['Chrome','ChromeHeadless','MyHeadlessChrome'],
5. ? ? customLaunchers:{
6. ? ? ? MyHeadlessChrome:{
7. ? ? ? ? base:'ChromeHeadless',
8. ? ? ? ? flags:['--disable-translate','--disable-extensions','--remote-debugging-port=9223']
9. ? ? ? }
10. ? ? },
11. ? }
12. };

?

完全在 Travis CI 上运行它

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

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

.travis.yml：

1. language: node_js
2. node_js:
3. ? -"7"
4. dist: trusty # needs UbuntuTrusty
5. sudo:false ?#no need for virtualization.
6. addons:
7. ? chrome: stable # have Travis install chrome stable.
8. cache:
9. ? yarn:true
10. ? directories:
11. ? ? - node_modules
12. install:
13. ? - yarn
14. script:
15. ? - 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中国 荣誉推出

本文永远更新链接地址：

《LINUX入门：使用 Headless Chrome 进行自动化测试》是否对您有启发，欢迎查看更多与《LINUX入门：使用 Headless Chrome 进行自动化测试》相关教程，学精学透。编程之家PHP学院为您提供精彩教程。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!