使用 Headless Chrome 进行自动化测试

caozhijian 发布于2019-08-20 17:58 / 626人阅读

摘要：安装安装依赖库安装已经相关的插件，可以使用或者使用在这篇文章中，我使用和，如果你不喜欢这两个库，你可以选择你喜欢的任何一个库，只要它能在浏览器中运行就可以。

本文翻译自：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进行接口测试自动续费在什么时间进行扣款

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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