使用 Headless Chrome 進行自動化測試

justjavac發表於2017-07-13
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 justjavac
Headless Chrome justjavac

建立自定義的 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）有可供參考的程式碼。

相關文章