使用 Headless Chrome 進行自動化測試

本文翻譯自：Automated testing with Headless Chrome
做者：Eric Bidelman (Google 工程師)
譯者：justjavac

若是您想使用 Headless Chrome 進行自動測試，請不要再觀望了！本文將教你如何使用 Karma 做爲 test runner ，並配合 Mocha + Chai 進行測試。

這些是什麼呢？

Karma？Mocha？Chai？Headless Chrome？oh my!

• Karma 是一種測試套件，能夠與任何流行的測試框架 (例如 Jasmine, Mocha, QUnit) 一塊兒使用。

• Chai 是一個斷言庫，能夠與 Node.js 或者瀏覽器一塊兒使用。咱們須要後者。

• Headless Chrome 是一種在 headless 環境運行的 Chrome 瀏覽器，這種運行方式沒有 UI。使用 Headless Chrome（而不是直接在 Node 中測試）的好處之一是您的 JavaScript 測試將在與您網站用戶相同的環境中執行。Headless Chrome 爲您提供真正的瀏覽器環境，而無需運行完整版本的 Chrome，這樣也避免了高昂的內存開銷。

安裝

安裝依賴庫

安裝 Karma 已經相關的插件，能夠使用 yarn:

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

建立 karma.config.js 文件，ChromeHeadless 啓動器會使用這個文件。

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/ 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));
    });
  });
});

運行你的測試

在 package.json 中添加一個 test 腳本，經過前面咱們的配置文件運行 Karma。

package.json

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

當您運行測試（yarn test）時，Headless Chrome 會啓動並將結果輸出到終端：

建立自定義的 Headless Chrome 啓動器

ChromeHeadless 啓動器很是重要，由於它爲咱們提供了開箱即用的 Headless Chrome 測試。它包含適合您的
Chrome flag，並啓動 Chrome 的遠程調試功能，監聽 9222 端口。

有時您可能但願將自定義的 flag 傳遞給 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 上運行測試

配置 Karma 並在 Headless Chrome 中運行測試雖然不十分簡單。不過在 Travis 中作持續集成只須要幾行代碼！

To run your tests in Travis, use dist: trusty and install the Chrome stable addon:

要在 Travis 中運行測試，使用 dist: trusty 並安裝 Chrome stable 插件：

.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

注: 這個倉庫（example repo）有可供參考的代碼。