使用 Headless Chrome 進(jìn)行自動(dòng)化測(cè)試

caozhijian 發(fā)布于2019-08-20 17:58 / 669人閱讀

摘要：安裝安裝依賴庫(kù)安裝已經(jīng)相關(guān)的插件，可以使用或者使用在這篇文章中，我使用和，如果你不喜歡這兩個(gè)庫(kù)，你可以選擇你喜歡的任何一個(gè)庫(kù)，只要它能在瀏覽器中運(yùn)行就可以。

本文翻譯自：Automated testing with Headless Chrome
作者：Eric Bidelman (Google 工程師)
譯者：justjavac

如果您想使用 Headless Chrome 進(jìn)行自動(dòng)測(cè)試，請(qǐng)不要再觀望了！本文將教你如何使用 Karma 作為 test runner ，并配合 Mocha + Chai 進(jìn)行測(cè)試。

這些是什么呢？

Karma？Mocha？Chai？Headless Chrome？oh my!

Karma 是一種測(cè)試套件，可以與任何流行的測(cè)試框架 (例如 Jasmine, Mocha, QUnit) 一起使用。

Chai 是一個(gè)斷言庫(kù)，可以與 Node.js 或者瀏覽器一起使用。我們需要后者。

Headless Chrome 是一種在 headless 環(huán)境運(yùn)行的 Chrome 瀏覽器，這種運(yùn)行方式?jīng)]有 UI。使用 Headless Chrome（而不是直接在 Node 中測(cè)試）的好處之一是您的 JavaScript 測(cè)試將在與您網(wǎng)站用戶相同的環(huán)境中執(zhí)行。Headless Chrome 為您提供真正的瀏覽器環(huán)境，而無(wú)需運(yùn)行完整版本的 Chrome，這樣也避免了高昂的內(nèi)存開(kāi)銷。

安裝 安裝依賴庫(kù)

安裝 Karma 已經(jīng)相關(guān)的插件，可以使用 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，如果你不喜歡這兩個(gè)庫(kù)，你可以選擇你喜歡的任何一個(gè)庫(kù)，只要它能在瀏覽器中運(yùn)行就可以。

配置 Karma

創(chuàng)建 karma.config.js 文件，ChromeHeadless 啟動(dòng)器會(huì)使用這個(gè)文件。

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
  })
}

注意: 運(yùn)行 ./node_modules/karma/bin/ init karma.conf.js 以生成 Karma 配置文件。

寫(xiě)一個(gè)測(cè)試

新建文件 /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));
    });
  });
});

運(yùn)行你的測(cè)試

在 package.json 中添加一個(gè) test 腳本，通過(guò)前面我們的配置文件運(yùn)行 Karma。

package.json

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

當(dāng)您運(yùn)行測(cè)試（yarn test）時(shí)，Headless Chrome 會(huì)啟動(dòng)并將結(jié)果輸出到終端：

創(chuàng)建自定義的 Headless Chrome 啟動(dòng)器

ChromeHeadless 啟動(dòng)器非常重要，因?yàn)樗鼮槲覀兲峁┝碎_(kāi)箱即用的 Headless Chrome 測(cè)試。它包含適合您的
Chrome flag，并啟動(dòng) Chrome 的遠(yuǎn)程調(diào)試功能，監(jiān)聽(tīng) 9222 端口。

有時(shí)您可能希望將自定義的 flag 傳遞給 Chrome 或更改啟動(dòng)器使用的遠(yuǎn)程調(diào)試端口。我們創(chuàng)建一個(gè)customLaunchers 來(lái)擴(kuò)展 ChromeHeadless 啟動(dòng)器的默認(rèn)字段：

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 上運(yùn)行測(cè)試

配置 Karma 并在 Headless Chrome 中運(yùn)行測(cè)試雖然不十分簡(jiǎn)單。不過(guò)在 Travis 中做持續(xù)集成只需要幾行代碼！

To run your tests in Travis, use dist: trusty and install the Chrome stable addon:

要在 Travis 中運(yùn)行測(cè)試，使用 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

注: 這個(gè)倉(cāng)庫(kù)（example repo）有可供參考的代碼。

GPU云服務(wù)器云服務(wù)器 chrome webrtc 測(cè)試進(jìn)行測(cè)試 java進(jìn)行接口測(cè)試自動(dòng)續(xù)費(fèi)在什么時(shí)間進(jìn)行扣款

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83972.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

caozhijian

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

UAT測(cè)試的帶隊(duì)經(jīng)驗(yàn)

閱讀 3010·2021-10-13 09:39
軟件開(kāi)發(fā)與生命周期

閱讀 2706·2021-09-27 13:34
給自己的博客網(wǎng)站加上酷炫的初音未來(lái)音樂(lè)游戲？

閱讀 2046·2019-08-30 15:55
前端面試題

閱讀 3269·2019-08-30 15:43
CSS、Sass、Scss，以及sass和scss的區(qū)別

閱讀 3650·2019-08-30 11:16
npm run dev 和 npm run build 解析（轉(zhuǎn)載）

閱讀 1769·2019-08-26 18:28
5、TypeScript 之不可以重復(fù)聲明類型

閱讀 1302·2019-08-26 13:56
新上課程推薦：TypeScript完全解讀(總26課時(shí)）

閱讀 928·2019-08-26 13:35

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

使用 Headless Chrome 進(jìn)行自動(dòng)化測(cè)試

相關(guān)文章