《LINUX入門：使用 Headless Chrome 進行自動化測試》要點：
本文介紹了LINUX入門：使用 Headless Chrome 進行自動化測試，希望對您有用。如果有疑問，可以聯(lián)系我們。

如果你想使用 Headless Chrome 進行自動化測試,那么就往下!這篇文章將讓你完全使用 Karma 作為運行器runner,而且使用 Mocha+Chai 來編撰測試.

這些器械是什么?

Karma、Mocha、Chai、Headless Chrome,哦,我的天哪!

Karma?是一個測試對象,可以和所有最流行的測試框架(Jasmine、Mocha、?QUnit)配合使用.

Chai?是一個斷言庫,可以與 Node 和瀏覽器一起使用.這里我們必要后者.

Headless Chrome?是一種在沒有瀏覽器用戶界面的無需顯示環(huán)境中運行 Chrome 瀏覽器的辦法.使用 Headless Chrome(而不是直接在 Node 中測試) 的一個好處是 JavaScript 測試將在與你的網(wǎng)站用戶相同的環(huán)境中執(zhí)行.Headless Chrome 為你提供了真正的瀏覽器環(huán)境,卻沒有運行完整版本的 Chrome 一樣的內(nèi)存開銷.

?

設置

?

安裝

使用 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

創(chuàng)立一個使用 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：

?

運行你的測試

在我們設置好用于運行 Karma 的 package.json 中添加一個測試劇本.

package.json：

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

當你運行你的測試(yarn test)時,Headless Chrome 會啟動并將運行成果輸出到終端：

?

創(chuàng)建你自己的 Headless Chrome 啟動器

ChromeHeadless 啟動器非常棒,因為它可以在 Headless Chrome 上進行測試.它包括了適合你的 Chrome 標志,并在端口 9222 上啟動 Chrome 的遠程調(diào)試版本.

但是,有時你可能希望將自定義的標志傳遞給 Chrome 或變動啟動器使用的遠程調(diào)試端口.要做到這一點,可以通過創(chuàng)建一個 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 中持續(xù)集成績只有幾種!

要在 Travis 中運行測試,請使用 dist: trusty 并安裝穩(wěn)固版 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 開發(fā),Web 和 Web 組件開發(fā),Chrome 開發(fā)

---

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

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

本文由 LCTT 原創(chuàng)編譯,Linux中國 榮譽推出

本文永遠更新鏈接地址：

《LINUX入門：使用 Headless Chrome 進行自動化測試》是否對您有啟發(fā)，歡迎查看更多與《LINUX入門：使用 Headless Chrome 進行自動化測試》相關教程，學精學透。維易PHP學院為您提供精彩教程。

轉載請注明本頁網(wǎng)址：
http://www.snjht.com/jiaocheng/7054.html