Test Cafe 如何使用 headless 浏览器

无界面浏览器

headless（无界面）浏览器在其他文章（selenium、Puppeteer）里介绍过，十分便于自动化执行浏览器动作。下面我们看 TestCafe 是如何使用 headless 浏览器的。

使用 chromium

安装 chromium

在 debian/ubuntu 系统中命令行界面下安装 chrome（实际上是 chromium），使用下面的命令：

$ sudo apt install chromium

在 CentOs 系统中使用：

$ sudo yum install chromium

安装好后提示：

Installed:
  chromium.x86_64 0:78.0.3904.108-1.el7

Dependency Installed:
  adwaita-cursor-theme.noarch 0:3.28.0-1.el7    adwaita-icon-theme.noarch 0:3.28.0-1.el7            at-spi2-atk.x86_64 0:2.26.2-1.el7
  at-spi2-core.x86_64 0:2.28.0-1.el7            audit-libs-python.x86_64 0:2.8.5-4.el7              avahi.x86_64 0:0.6.31-19.el7
  cairo-gobject.x86_64 0:1.15.12-4.el7          checkpolicy.x86_64 0:2.5-8.el7                      chromium-common.x86_64 0:78.0.3904.108-1.el7
  chromium-libs.x86_64 0:78.0.3904.108-1.el7    chromium-libs-media.x86_64 0:78.0.3904.108-1.el7    colord-libs.x86_64 0:1.3.4-1.el7
  dconf.x86_64 0:0.28.0-4.el7                   gstreamer1.x86_64 0:1.10.4-2.el7                    gtk3.x86_64 0:3.22.30-3.el7
  json-glib.x86_64 0:1.4.2-2.el7                libXScrnSaver.x86_64 0:1.2.2-6.1.el7                libcanberra.x86_64 0:0.30-5.el7
  libcanberra-gtk3.x86_64 0:0.30-5.el7          libcgroup.x86_64 0:0.41-21.el7                      libepoxy.x86_64 0:1.5.2-1.el7
  libgusb.x86_64 0:0.2.9-1.el7                  libsemanage-python.x86_64 0:2.5-14.el7              libtdb.x86_64 0:1.3.16-1.el7
  libtool-ltdl.x86_64 0:2.4.2-22.el7_3          libwayland-cursor.x86_64 0:1.15.0-1.el7             libwayland-egl.x86_64 0:1.15.0-1.el7
  libxkbcommon.x86_64 0:0.7.1-3.el7             minizip.x86_64 0:1.2.7-18.el7                       nss-mdns.x86_64 0:0.14.1-1.el7
  policycoreutils-python.x86_64 0:2.5-33.el7    python-IPy.noarch 0:0.75-6.el7                      rest.x86_64 0:0.8.1-2.el7
  setools-libs.x86_64 0:3.3.8-4.el7             sound-theme-freedesktop.noarch 0:0.8-3.el7          xkeyboard-config.noarch 0:2.24-1.el7

Dependency Updated:
  atk.x86_64 0:2.28.1-1.el7                       audit.x86_64 0:2.8.5-4.el7                       audit-libs.i686 0:2.8.5-4.el7
  audit-libs.x86_64 0:2.8.5-4.el7                 cairo.x86_64 0:1.15.12-4.el7                     libselinux.i686 0:2.5-14.1.el7
  libselinux.x86_64 0:2.5-14.1.el7                libselinux-devel.x86_64 0:2.5-14.1.el7           libselinux-python.x86_64 0:2.5-14.1.el7
  libselinux-ruby.x86_64 0:2.5-14.1.el7           libselinux-utils.x86_64 0:2.5-14.1.el7           libsemanage.x86_64 0:2.5-14.el7
  libsepol.i686 0:2.5-10.el7                      libsepol.x86_64 0:2.5-10.el7                     libsepol-devel.x86_64 0:2.5-10.el7
  policycoreutils.x86_64 0:2.5-33.el7             zlib.i686 0:1.2.7-18.el7                         zlib.x86_64 0:1.2.7-18.el7
  zlib-devel.x86_64 0:1.2.7-18.el7

Complete!

使用 chromium

安装好后可以在命令行调用验证是否安装成功：

$ chromium ---headless ---disable-gpu ---dump-dom https://www.example.com/

得到下面的结果，说明已经正常安装了：

[1126/174644.157079:WARNING:audio_manager.cc(321)] Multiple instances of AudioManager detected
[1126/174644.157165:WARNING:audio_manager.cc(278)] Multiple instances of AudioManager detected

<div>
    <h1>Example Domain</h1>
    <p>This domain is for use in illustrative examples in documents. You may use this
    domain in literature without prior coordination or asking for permission.</p>
    <p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>

报错信息处理

上面两行 audio_manager.cc 报错需要安装 pulseaudio 解决：

$ sudo apt-get install pulseaudio

安装 pulseaudio 后，运行于后台：

$ pulseaudio ---daemonize

就可以消除报错信息。

用 testcafe 调用

安装好 chromium 后，就可以用 testcafe 调用：

//package.json

"scripts": {
     "test": "testcafe chromium:headless \"./test/*.test.ts\"",
  },

使用 docker

Testcafe 提供了 官方 docker 镜像 以方便的开展离线 UI 测试。官方镜像有下列优点：

• 自带 Chromium ，免去 上面 各种复杂、易错的安装步骤
• 体积小，使用 alpine 基础镜像，解压后镜像 700M+

项目的目录结构

假设项目的目录结构如下：

项目根目录
    ├─ package.json
    ├─ Dockerfile
    ├─ .dockerignore
    ├─ Downloads
    |   └─ (空)
    └─ test
        └─ test.js

下面将逐项介绍根目录中的内容

package.json

项目的 package.json 的例子如下：

{
  "name": "tester",
  "version": "1.0.0",
  "description": "......",
  "scripts": {
    "test": "testcafe chrome ./test/test.js"
  },
  "author": "....",
  "dependencies": {
  },
  "devDependencies": {
    "testcafe": "^1.6.1"
  }
}

上面 package.json 中，testcafe 记录在 devDependencies 中，是因为 testcafe 仅在开发时才需要安装，而构建镜像时并不需要安装。

Dockerfile

项目的 Dockerfile 的例子如下：

FROM testcafe/testcafe
USER root
COPY . /root
WORKDIR /root
RUN npm install --production && npm cache clean --force
ENV SOME_VAR=some_value ANOTHER_VAR=another_value

Dockerfile 用来构建你自己的镜像，里面的每一行步骤用来指明新镜像的步骤，同时还能声明新镜像中的环境变量。

.dockerignore

这个文件用来将特定名称的文件排除在构建的镜像之外，比如如下的例子：

node_modules
.DS_Store
*.log
Dockerfile

Downloads

这是个空文件夹，chrome 浏览器下载的文件默认将保存在这个目录下，而不需要你费心处理下载文件时的选择路径问题。

这个 Downloads 目录，你可以预先建立在本地项目目录下，也可以使用 RUN mkdir 命令声明在 Dockerfile 中。

test.js

这是你编写的测试脚本入口

构建镜像

上面的这些文件（夹）都齐备后，就可以使用下面的命令构建镜像了：

$ docker build -t tester .

注意最后面的点不能省略，表示将当前文件夹作为镜像的根目录。这样 build 出来的镜像的名称就是 tester:latest

运行镜像

上一部构建好的镜像，可以使用下面的命令运行起来：

$ docker run ---rm tester

上面命令中的 --rm 参数表示当执行结束后，自动删除容器。

修改镜像的 ENTRYPOINT

基础镜像 testcafe/testcafe 的 ENTRYPOINT 是这么写的:

ENTRYPOINT ["/opt/testcafe/docker/testcafe-docker.sh"]

如果你想给你的镜像加个参数开关，比如用来指定不同的测试场景，那么可以借助一个脚本 run.sh 来当中间人。具体做法如下：

首先，编写 run.sh ：

#!/bin/sh
if [ $1 == "scenario1" ]; then
    /opt/testcafe/docker/testcafe-docker.sh chromium /root/test/$1.test.js
else
    echo "$1 is not acceptable." >&2
    exit 1
fi

注意这个 shell 脚本的 shebang 是 sh 而不是 bash，因为 基础镜像 使用的是 alpine，未包含 bash .

然后将 run.sh 放置在项目目录下，由于前面的 Dockerfile 将项目 COPY 到 /root下，所以 run.sh 在镜像中将位于 /root 目录。在 Dockerfile 的最后，加上：

ENTRYPOINT [ "/root/run.sh" ]

带参数运行镜像

根据 上节 中的方法修改好 ENTRYPOINT 后，运行镜像 一节中介绍的启动镜像命令修改如下：

$ docker run --rm tester scenario1

如果您对本文有疑问或者寻求合作，欢迎 联系邮箱 。邮箱已到剪贴板

精彩评论