使用 Headless Chrome 進行自動化測試

caozhijian 發布于2019-08-20 17:58 / 660人閱讀

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

本文翻譯自：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 啟動器

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）有可供參考的代碼。

云服務器 GPU云服務器 chrome webrtc 測試進行測試 java進行接口測試自動續費在什么時間進行扣款

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83972.html

使用 Headless Chrome 進行自動化測試

摘要：安裝安裝依賴庫安裝已經相關的插件，可以使用或者使用在這篇文章中，我使用和，如果你不喜歡這兩個庫，你可以選擇你喜歡的任何一個庫，只要它能在瀏覽器中運行就可以。本文翻譯自：Automated testing with Headless Chrome作者：Eric Bidelman (Google 工程師)譯者：justjavac 如果您想使用 Headless Chrome 進行自動測試...

Guakin_Huang 2019-05-29 17:01 評論0 收藏0
使用 headless chrome進行測試

注:文章聚合了現在 headless chrome 介紹和使用方式包含了三個部分 chrome 在 mac 上的安裝和簡單使用(來自官方) 利用 selenium 的 webdrive 驅動 headless chrome(自己添加) 利用Xvfb方式實現偽 headless chrome 概念 Headless模式解決了什么問題: 自動化工具例如 selenium 利用有頭瀏覽器進行測試...

ephererid 2019-07-31 10:56 評論0 收藏0
使用瀏覽器的HEADLESS模式進行自動化測試

摘要：了解模式指的是不需要用戶界面的瀏覽器，這種瀏覽器在自動化測試和爬蟲領域有著廣泛的應用。實踐使用瀏覽器的模式進行自動化測試，你需要先滿足以下前提運行環境或者或者最新版已加入萬事俱備，廢話不多說我們直接上演示代碼。了解HEADLESS模式 HEADLESS BROWSER 指的是不需要用戶界面的瀏覽器，這種瀏覽器在自動化測試和爬蟲領域有著廣泛的應用。例如你想在網頁上運行一些測試，從網頁...

lanffy 2019-07-30 16:34 評論0 收藏0
前端每周清單第 29 期：Web 現狀分析與優化策略、Vue 單元測試、Headless Chrom

摘要：前端每周清單第期現狀分析與優化策略單元測試爬蟲作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清單第 29 期：Web 現狀分析與優化策略...

HackerShell 2019-08-21 12:05 評論0 收藏0
三分鐘學會如何在函數計算中使用 puppeteer

摘要：函數計算就是這里的膠水。總結函數計算有如下優勢無需采購和管理服務器等基礎設施專注業務邏輯的開發提供日志查詢性能監控報警等功能快速排查故障以事件驅動的方式觸發應用響應用戶請求毫秒級別彈性伸縮，快速實現底層擴容以應對峰值壓力按需付費。摘要：使用 puppeteer 結合函數計算，可以快速的構建彈性的服務完成各種功能，包括：生成網頁截圖或者 PDF、高級爬蟲，可以爬取大量異步渲染內容的網...

zhkai 2019-06-21 16:46 評論0 收藏0