Test Cafe 如何使用 headless 浏览器

发表时间

testcafe 可以方便用来执行页面的自动化动作,而自动化离不开在命令行下执行。所以使用 testcafe 的必然选择是使用 headless (无界面)浏览器。

目录

无界面浏览器

headless(无界面)浏览器在其他文章( seleniumPuppeteer)里介绍过,十分便于自动化执行浏览器动作。下面我们看 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/testcafeENTRYPOINT 是这么写的:

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

相关文章
除非特别说明,本站文章均系原创,并采用 署名协议 CC-BY 授权。
欢迎转载,惟请保留原文链接:https://lfhacks.com/tech/testcafe-headless-browsers