使用 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));
    });
  });
});

執行測試

在 package.json 中新增 test 指令碼，以便使用我們的設定執行 Karma。

package.json

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

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

Karma 的輸出內容。

建立自己的 Headless Chrome 啟動器

ChromeHeadless 啟動器非常實用，因為它可直接在 Headless 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 在無頭 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