轉載自：聊一聊前端自動化測試

• 前沿
• 測試工具
• 持續測試

前言

為什么要測試

首先，我們要清楚為什么要測試。說白了就是檢驗我們寫的代碼是否有錯誤或者是需要優化的地方，從而提高我們的代碼質量。要有自動化測試就需要寫測試用例，在發布之前跑一遍測試用例，可以保證測試用例覆蓋的地方是沒有bug。

自動化測試另一個好處就是效率高，比如一個按鈕的功能交給測試人員去測，需要找到頁面點擊對應按鈕然后根據才能知道這個功能是否有問題。那交給機器，通過腳本去跑程序來判斷是否正確要更快更準確，而且每次改動代碼之后可以馬上接入自動化測試檢查是否有錯誤。總之，機器測試的效率肯定是要去人測試快多啦。

既然測試這么好，那是不是所有代碼都要有測試用例支持呢

我認為測試覆蓋率還是要和測試成本結合起來，比如一個不會經常變的公共方法就盡可能的將測試覆蓋率做到趨于100%。而對于一個完整項目，我建議前期先做最短的時間覆蓋80%的測試用例，后期再慢慢完善。

經常做更改的活動頁面我認為沒必要必須趨近100%，因為要不斷的更改測試永用例，維護成本太高。

測試工具

1. 測試框架：Mocha、Jasmine等等，主要是提供了清晰簡明的語法來描述測試用例，測試分組以及測試不通過報錯，具體哪報的錯，什么原因報錯等等。測試框架通常提供BDD(行為驅動開發)和TDD(測試驅動開發)兩種測試語法來編寫測試用例。Mocha支持兩種，而Jasmine只支持BDD，下面會以Mocha的BDD為例。
2. 斷言庫：Should.js、chai、expect.js等等，斷言庫提供了多少語義化的方法提供各種情況的判斷。當然也不可以不用斷言庫，nodejs本來也有assert斷言模塊，下面會以Should.js為例。
3. 代碼覆蓋率：Istanbul是本地測試代碼覆蓋率常用的工具之一，它提供了一系列代碼覆蓋率的測試指標，可以清晰的知道哪方面的代碼沒有覆蓋到。

下面以一個最簡單nodejs項目為例
目錄結構如下

.
├── LICENSE
├── README.md
├── index.js
├── node_modules
├── package.json
└── test
    └── test.js

首先需要安裝測試框架和斷言庫：

  npm install mocha should --save-dev

測試用例

然后在index.js中編寫一行代碼

'use strict'
module.exports = () => 'hello world!';

那么在test中就需要寫一個測試用例來判斷index.js輸出的值是否是'hello world!'

'use strict'
require('should');
const exp = require('../index');

describe('test', function () {
  it('should get "hello world!"', function () {
    exp().should.be.eql('hello world!');
  })
});

在package.json文件中加入命令

"scripts": {
  "test": "mocha"
},

然后就可以在終端中運行

npm test

測試結果：

如果測試通過就可以看到 1 passing

如果沒有測試通過就可以看到 1 failing,通過也可以看到報錯信息啦

mocha還有很多配置項

一種是直接更改 package.json 中的 test 命令，例如

"scripts": {
  "test": "mocha --require should"
},

這樣mocha就會在每個文件中自動引入should不用自己引入了。

還有一種寫法就是在test文件夾中新建 mocha.opts 配置文件，并寫入

--require should

效果和第一種一樣

代碼覆蓋率

首先需要安裝istanbul：

  npm install istanbul --save-dev

Node.js端做代碼覆蓋率測試很簡單，只需要用istanbul啟動Mocha即可

修改test命令

"scripts": {
  "test": "istanbul cover mocha -- --delay"
},

當使用istanbul運行Mocha時，istanbul命令自己的參數放在--之前，需要傳遞給Mocha的參數放在--之后

運行完成后，項目下會多出一個 coverage 文件夾，這里就是放代碼覆蓋率結果的地方

接入Karma

Karma 是一個測試集成框架，可以方便地以插件的形式集成測試框架、測試環境、覆蓋率工具等等。首先需要使用npm安裝一些依賴：

1. karma：框架本體
2. karma-mocha：Mocha測試框架
3. karma-coverage：覆蓋率測試
4. karma-spec-reporter：測試結果輸出
5. karma-chrome-launcher：Chrome環境
6. karma-firefox-launcher：Firefox環境

安裝完成之后，我們把之前的項目該刪除的刪除，只留下源文件和測試文件，并增加一個 karma.conf.js 文件：

.
├── karma.conf.js
├── package.json
├── src
│   └── index.js
└── test
    └── test.js

karma.conf.js是karma的配置文件。

持續測試

開源的持續集成

開源比較出名的持續集成測試服務器當屬Travis了，而代碼覆蓋率則通過Coveralls，只要有GitHub賬號，就能接入Travis和Coveralls了。

Travis會讀取項目下的 travis.yml 文件，一個簡單的例子：

language: node_js
sudo: true
node_js:
  - "6"

addons:
  firefox: "latest"
  chrome: "stable"

before_script:
  - "export DISPLAY=:99.0"
  - "sh -e /etc/init.d/xvfb start"
  - sleep 3 # give xvfb some time to start

before_install:
  npm install karma-cli -g

after_success:
  - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js

karma.conf.js 文件在這個例子里面，它大致是這樣的

module.exports = function(config) {
  var configuration = {
    basePath: '',
    frameworks: ['mocha'],
    files: [
      'https://cdn.bootcss.com/jquery/2.2.4/jquery.js',
      'node_modules/should/should.js',
      'test/**.js'
    ],
    exclude: [
    ],
    preprocessors: {
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    customLaunchers: {
      Chrome_travis_ci: {
        base: 'Chrome',
        flags: ['--no-sandbox']
      }
    },
    singleRun: true,
    concurrency: Infinity
  };
  if(process.env.TRAVIS){
    configuration.browsers = ['Chrome_travis_ci'];
  }
  config.set(configuration);
}

這些配置都是什么意思呢？這里挨個說明一下：

• frameworks: 使用的測試框架，這里依舊是我們熟悉又親切的Mocha

• files：測試頁面需要加載的資源，上面的test目錄下已經沒有test.html了，所有需要加載內容都在這里指定，如果是CDN上的資源，直接寫URL也可以，不過建議盡可能使用本地資源，這樣測試更快而且即使沒網也可以測試。這個例子里，第一行載入的是斷言庫Should.js，第二行是src下的所有代碼，第三行載入測試代碼

• preprocessors：配置預處理器，在上面files載入對應的文件前，如果在這里配置了預處理器，會先對文件做處理，然后載入處理結果。這個例子里，需要對src目錄下的所有資源添加覆蓋率打點（這一步之前是通過gulp-istanbul來做，現在karma-coverage框架可以很方便的處理，也不需要鉤子啥的了）。后面做React組件測試時也會在這里使用webpack

• plugins：安裝的插件列表

• browsers：需要測試的瀏覽器，這里我們選擇了PhantomJS、FireFox、Chrome

• reporters：需要生成哪些代碼報告

• coverageReporter：覆蓋率報告要如何生成，這里我們期望生成和之前一樣的報告，包括覆蓋率頁面、lcov.info、coverage.json、以及命令行里的提示

最后將package.json中test命令改為：

{
  "scripts": {
    "test": "karma start --single-run"
  }
}

項目接入持續集成在多人開發同一個倉庫時候能起到很大的用途，每次push都能自動觸發測試，測試沒過會發生告警。如果需求采用Issues+Merge Request來管理，每個需求一個Issue+一個分支，開發完成后提交Merge Request，由項目Owner負責合并，項目質量將更有保障

總結

這里介紹的只是前端自動化測試的表面，還有很多可以深入研究的東西。還有很多更加高效的自動化測試方法等待我們去深入挖掘。