document/TranslateProject
2
0
Fork 0
mirror of https://github.com/LCTT/TranslateProject.git synced 2025-01-25 23:11:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

PRF&PUB:20170815 Automated testing with Headless Chrome.md

Browse Source 
@firmianay
This commit is contained in:
wxy 2017-09-12 15:24:29 +08:00
parent b04ebae023
commit 4302111014
1 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
translated/tech/20170815 Automated testing with Headless Chrome.md → published/20170815 Automated testing with Headless Chrome.md
View File

@ -1,22 +1,21 @@
使用 Headless Chrome 进行自动化测试
============================================================
如果你想使用 Headless Chrome 进行自动化测试，就看下去吧！这篇文章将让你完全使用 Karma 作为 runner，并且使用 Mocha+Chai 进行 authoring 测试。
如果你想使用 Headless Chrome 进行自动化测试，那么就往下！这篇文章将让你完全使用 Karma 作为<ruby>运行器<rt>runner</rt></ruby>，并且使用 Mocha+Chai 来编撰测试。
**这些东西是什么？**
Karma, Mocha, Chai, Headless Chrome, oh my!
Karma、Mocha、Chai、Headless Chrome，哦，我的天哪！
[Karma][2] 是一个测试工具，可以和所有最流行的测试框架（[Jasmine][3], [Mocha][4], [QUnit][5]）配合使用。
[Karma][2] 是一个测试工具，可以和所有最流行的测试框架（[Jasmine][3]、[Mocha][4]、 [QUnit][5]）配合使用。
[Chai][6] 是一个断言库，可以与 Node 和浏览器一起使用。这里我们需要后者。
[Headless Chrome][7] 是一种在没有浏览器用户界面的 headless 环境中运行 Chrome 浏览器的方法。使用 Headless Chrome（而不是直接在 Node 中测试） 的一个好处是 JavaScript 测试将在与你的网站用户相同的环境中执行。Headless Chrome 为你提供了真正的浏览器环境，却没有运行完整版本的 Chrome 一样的内存开销。
[Headless Chrome][7] 是一种在没有浏览器用户界面的无需显示环境中运行 Chrome 浏览器的方法。使用 Headless Chrome（而不是直接在 Node 中测试） 的一个好处是 JavaScript 测试将在与你的网站用户相同的环境中执行。Headless Chrome 为你提供了真正的浏览器环境，却没有运行完整版本的 Chrome 一样的内存开销。
### Setup
### 设置
### 安装
#### 安装
使用 `yarn` 安装 Karma、相关插件和测试用例：
@ -34,11 +33,11 @@ npm i --save-dev mocha chai
在这篇文章中我使用 [Mocha][8] 和 [Chai][9]，但是你也可以选择自己最喜欢的在浏览器中工作的断言库。
### 配置 Karma
#### 配置 Karma
创建一个使用 `ChromeHeadless` 启动器的 `karma.config.js` 文件。
**karma.conf.js**
**karma.conf.js**：
```
module.exports = function(config) {
@ -57,13 +56,13 @@ module.exports = function(config) {
}
```
<aside class="note" style="box-sizing: inherit; font-size: 14px; margin-top: 16px; margin-bottom: 16px; padding: 12px 24px 12px 60px; background: rgb(225, 245, 254); color: rgb(2, 136, 209);">**注意：** 运行 `./node_modules/karma/bin/ init karma.conf.js` 生成 Karma 的配置文件。</aside>
> **注意：** 运行 `./node_modules/karma/bin/karma init karma.conf.js` 生成 Karma 的配置文件。
### 写一个测试
在 `/test/test.js` 中写一个测试：
**/test/test.js**
**/test/test.js**：
```
describe('Array', () => {
@ -79,7 +78,7 @@ describe('Array', () => {
在我们设置好用于运行 Karma 的 `package.json` 中添加一个测试脚本。
**package.json**
**package.json**：
```
"scripts": {
@ -97,7 +96,7 @@ describe('Array', () => {
但是，有时你可能希望将自定义的标志传递给 Chrome 或更改启动器使用的远程调试端口。要做到这一点，可以通过创建一个 `customLaunchers` 字段来扩展基础的 `ChromeHeadless` 启动器：
**karma.conf.js**
**karma.conf.js**：
```
module.exports = function(config) {
@ -116,13 +115,13 @@ module.exports = function(config) {
};
```
### 在 Travis CI 上运行它
### 完全在 Travis CI 上运行它
在 Headless Chrome 中配置 Karma 运行测试是很困难的。而在 Travis 中持续整合就只有几种！
在 Headless Chrome 中配置 Karma 运行测试是很困难的。而在 Travis 中持续集成就只有几种！
要在 Travis 中运行测试，请使用 `dist: trusty` 并安装稳定版 Chrome 插件：
**.travis.yml**
**.travis.yml**：
```
language: node_js
@ -154,7 +153,7 @@ via: https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai
作者：[Eric Bidelman][a]
译者：[firmianay](https://github.com/firmianay)
校对：[校对者ID](https://github.com/校对者ID)
校对：[wxy](https://github.com/wxy)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出