使用 Headless Chrome 進行自動化測試

如果你想使用 Headless Chrome 進行自動化測試，那麼就往下！這篇文章將讓你完全使用 Karma 作為執行器runner，並且使用 Mocha+Chai 來編撰測試。

這些東西是什麼？

Karma、Mocha、Chai、Headless Chrome，哦，我的天哪！

Karma 是一個測試工具，可以和所有最流行的測試框架（Jasmine、Mocha、 QUnit）配合使用。

Chai 是一個斷言庫，可以與 Node 和瀏覽器一起使用。這裡我們需要後者。

Headless Chrome 是一種在沒有瀏覽器使用者介面的無需顯示環境中執行 Chrome 瀏覽器的方法。使用 Headless Chrome（而不是直接在 Node 中測試） 的一個好處是 JavaScript 測試將在與你的網站使用者相同的環境中執行。Headless Chrome 為你提供了真正的瀏覽器環境，卻沒有執行完整版本的 Chrome 一樣的記憶體開銷。

 

設定

 

安裝

使用 yarn 安裝 Karma、相關外掛和測試用例：

1. yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
2. yarn add --dev mocha chai

或者使用 npm：

1. npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
2. npm i --save-dev mocha chai

在這篇文章中我使用 Mocha 和 Chai，但是你也可以選擇自己最喜歡的在瀏覽器中工作的斷言庫。

 

設定 Karma

建立一個使用 ChromeHeadless 啟動器的 karma.config.js 檔案。

karma.conf.js：

1. module.exports =function(config){
2.   config.set({
3.     frameworks:['mocha','chai'],
4.     files:['test/**/*.js'],
5.     reporters:['progress'],
6.     port:9876,  // karma web server port
7.     colors:true,
8.     logLevel: config.LOG_INFO,
9.     browsers:['ChromeHeadless'],
10.     autoWatch:false,
11.     // singleRun: false, // Karma captures browsers, runs the tests and exits
12.     concurrency:Infinity
13.   })
14. }

注意： 執行 ./node_modules/karma/bin/karma init karma.conf.js 生成 Karma 的組態檔。

 

寫一個測試

在 /test/test.js 中寫一個測試：

/test/test.js：

1. describe('Array',()=>{
2.   describe('#indexOf()',()=>{
3.     it('should return -1 when the value is not present',()=>{
4.       assert.equal(-1,[1,2,3].indexOf(4));
5.     });
6.   });
7. });

 

執行你的測試

在我們設定好用於執行 Karma 的 package.json 中新增一個測試指令碼。

package.json：

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

當你執行你的測試（yarn test）時，Headless Chrome 會啟動並將執行結果輸出到終端：

 

建立你自己的 Headless Chrome 啟動器

ChromeHeadless 啟動器非常棒，因為它可以在 Headless Chrome 上進行測試。它包含了適合你的 Chrome 標誌，並在埠 9222 上啟動 Chrome 的遠端偵錯版本。

但是，有時你可能希望將自定義的標誌傳遞給 Chrome 或更改啟動器使用的遠端偵錯埠。要做到這一點，可以通過建立一個 customLaunchers 欄位來擴充套件基礎的 ChromeHeadless 啟動器：

karma.conf.js：

1. module.exports =function(config){
2.   ...
3.   config.set({
4.     browsers:['Chrome','ChromeHeadless','MyHeadlessChrome'],
5.     customLaunchers:{
6.       MyHeadlessChrome:{
7.         base:'ChromeHeadless',
8.         flags:['--disable-translate','--disable-extensions','--remote-debugging-port=9223']
9.       }
10.     },
11.   }
12. };

 

完全在 Travis CI 上執行它

在 Headless Chrome 中設定 Karma 執行測試是很困難的。而在 Travis 中持續整合就只有幾種！

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

.travis.yml：

1. language: node_js
2. node_js:
3.   -"7"
4. dist: trusty # needs UbuntuTrusty
5. sudo:false  #no need for virtualization.
6. addons:
7.   chrome: stable # have Travis install chrome stable.
8. cache:
9.   yarn:true
10.   directories:
11.     - node_modules
12. install:
13.   - yarn
14. script:
15.   - yarn test

---

作者簡介

Eric Bidelman 谷歌工程師，Lighthouse 開發，Web 和 Web 元件開發，Chrome 開發

---

via: https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai

作者：Eric Bidelman 譯者：firmianay 校對：wxy

本文由 LCTT 原創編譯，Linux中國 榮譽推出

本文永久更新連結地址：http://www.linuxidc.com/Linux/2017-09/146843.htm