使用 Headless Chrome 進行自動化測試

如果您想使用 Headless Chrome 執行自動化測試，現在不必了！本文將引導您設定使用 Karma 做為執行器，以及使用 Mocha+Chai 編寫測試。

這是什麼？

Karma、Mocha、Chai、Headless Chrome 等，

Karma 是測試工具，可與任何最熱門的測試架構 (Jasmine、Mocha、QUnit) 搭配使用。

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

無頭 Chrome 是在沒有完整瀏覽器使用者介面的情況下，在無頭環境中執行 Chrome 瀏覽器的方法。使用無頭 Chrome 的好處之一是可以直接在節點上執行 JavaScript 測試，與在節點中進行測試不同。Headless 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 應啟動，並將結果輸出至終端機：

建立自己的無頭 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 在無頭 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