mirror of
https://github.com/LCTT/TranslateProject.git
synced 2024-12-23 21:20:42 +08:00
170 lines
5.1 KiB
Markdown
170 lines
5.1 KiB
Markdown
使用 Headless Chrome 进行自动化测试
|
||
============================================================
|
||
|
||
如果你想使用 Headless Chrome 进行自动化测试，那么就往下！这篇文章将让你完全使用 Karma 作为<ruby>运行器<rt>runner</rt></ruby>，并且使用 Mocha+Chai 来编撰测试。
|
||
|
||
**这些东西是什么？**
|
||
|
||
Karma、Mocha、Chai、Headless Chrome，哦，我的天哪！
|
||
|
||
[Karma][2] 是一个测试工具，可以和所有最流行的测试框架（[Jasmine][3]、[Mocha][4]、 [QUnit][5]）配合使用。
|
||
|
||
[Chai][6] 是一个断言库，可以与 Node 和浏览器一起使用。这里我们需要后者。
|
||
|
||
[Headless Chrome][7] 是一种在没有浏览器用户界面的无需显示环境中运行 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][8] 和 [Chai][9]，但是你也可以选择自己最喜欢的在浏览器中工作的断言库。
|
||
|
||
#### 配置 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 启动器
|
||
|
||
`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 Ubuntu Trusty
|
||
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][1] 谷歌工程师，Lighthouse 开发，Web 和 Web 组件开发，Chrome 开发
|
||
|
||
----------------
|
||
|
||
via: https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai
|
||
|
||
作者：[Eric Bidelman][a]
|
||
译者：[firmianay](https://github.com/firmianay)
|
||
校对：[wxy](https://github.com/wxy)
|
||
|
||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||
|
||
[a]:https://developers.google.com/web/resources/contributors#ericbidelman
|
||
[1]:https://developers.google.com/web/resources/contributors#ericbidelman
|
||
[2]:https://karma-runner.github.io/
|
||
[3]:https://jasmine.github.io/
|
||
[4]:https://mochajs.org/
|
||
[5]:https://qunitjs.com/
|
||
[6]:http://chaijs.com/
|
||
[7]:https://developers.google.com/web/updates/2017/04/headless-chrome
|
||
[8]:https://mochajs.org/
|
||
[9]:http://chaijs.com/
|