使用 Headless Chrome 進行自動化測試

如要使用無頭 Chrome 執行自動化測試，請參考以下說明。本文將介紹使用 Karma 做為執行器的所有設定，並以 Mocha+Chai 做為編寫測試的方式完成。

這些是什麼？

Karma、Mocha、Chai、無頭 Chrome，天啊！

Karma 是一種測試輔助工具，可搭配任何熱門測試架構 (Jasmine、Mocha、QUnit) 使用。

Chai 是斷言程式庫，可與 Node 及瀏覽器搭配使用。我們需要後者。

無頭 Chrome 是一種在無頭環境中執行 Chrome 瀏覽器的方法，不必使用完整的瀏覽器 UI。使用無頭 Chrome (而非直接在 Node 中進行測試) 的好處之一，就是 JavaScript 測試會在與網站使用者相同的環境中執行。無頭 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 和 Chai，但如果您不是粉絲，請選擇您偏好在瀏覽器中使用的斷言程式庫。

設定 Karma

建立使用 ChromeHeadless 啟動器的 karma.conf.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
  })
}

編寫測試

在 /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 中新增 test 指令碼。

package.json

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

執行測試 (yarn test) 時，無頭 Chrome 應會啟動並將結果輸出至終端機：

Karma 的輸出內容。

建立您自己的 Headless Chrome 啟動器

ChromeHeadless 啟動器非常適合用來在無頭 Chrome 上進行測試，其中包含適當的 Chrome 旗標，並在 9222 連接埠上啟動 Chrome 的遠端偵錯版本。

不過，有時您可能會想將自訂標記傳遞至 Chrome，或變更啟動器使用的遠端偵錯埠。如要這麼做，請建立可擴充基本 ChromeHeadless 啟動器的 customLaunchers 欄位：

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 中實現持續整合！

如要在 Travis 中執行測試，請使用 dist: trusty 並安裝 Chrome 穩定版外掛程式：

.travis.yml

language: node_js
node_js:
  - "7"
dist: trusty # needs Ubuntu Trusty
# Note: if you switch to sudo: false, you'll need to launch Chrome with --no-sandbox.
# See https://github.com/travis-ci/travis-ci/issues/8836
sudo: required
addons:
  chrome: stable # have Travis install Chrome stable.
cache:
  yarn: true
  directories:
    - node_modules
install:
  - yarn
script:
  - yarn test