如果您想使用 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