我正在参加「掘金·启航计划」

根据之前的文章，我们大致了解了前端测试的类型以及 Playwright 的基本使用。在我们完成了 Playwright 的搭建后，我们需要将测试引入到正常开发流程中来。

不过，在流程中总不可能每次在产品端发生变化后（通常涉及多个组件）手动跑一遍测试命令，因此，我们很自然的想到需要自动化这个流程。

ps: 本文建立在以下两点:

已经搭建好本地的 Playwright 测试，参考我的文章 E2E测试-Playwright总结
需要一台已经搭建好的 Jenkins 服务器😁。

测试容器化

为了 Jenkins 本机的安全，一般不会将代码直接放在本机上运行，所以需要以容器化的形式运行代码测试。

直接构建测试镜像（尝试）

我一开始的想法很直接，使用 Dockerfile 文件在 Playwright 进行推送时构建测试容器，配置如下：

# Get the latest version of Playwright
FROM mcr.microsoft.com/playwright:focal


# Set the work directory for the application
WORKDIR /app


# Set the environment path to node_modules/.bin
# ENV PATH /app/node_modules/.bin:$PATH


# COPY the needed files to the app folder in Docker image
COPY package.json /app/
COPY tests/ /app/tests/
COPY config/ /app/config/


# Install the dependencies in Node environment
RUN npm install

这样做没有起初任何问题，但是很快在实际过程中遇到了，就是每次构建出来的测试镜像极重！（大约在 2GB 左右）

而有效的测试代码不足 100mb ，因此我们想到是否可以将基础镜像独立出来，将代码放在基础镜像中去使用测试？

通过基础镜像运行测试代码（最佳实践）

最终的运行命令如下：

docker run --rm -i -e URL=$1 -v `pwd`/playwright-report/:/app/playwright-report -v `pwd`/test-results/:/app/test-results -v `pwd`:/app/ -w /app mcr.microsoft.com/playwright:v1.32.3-jammy npm run test

以下是整条命令的拆解：

在容器中执行的命令： npm run test
基础镜像（包含node环境）: mcr.microsoft.com/playwright:v1.32.3-jammy
指定命令工作区： -w /app
将本文件夹的代码挂载至容器中： -v pwd:/app/
将容器中产生的报告挂载出来： -v pwd/playwright-report/:/app/playwright-report -v pwd/test-results/:/app/test-results
传入参数（例：这里是我测试的域名地址）： -e URL=$1
创建容器并运行: docker run --rm -i ( -i 以交互方式运行， --rm 运行完此次容器后删除)

我们可以将命令置入拉取仓库的一个脚本中，这样在 Jenkins 中可以通过调用 shell 脚本很方便的调用此次测试

sh play.sh http://xxxxxx

# play.sh
if test -z $1
then
  echo "请输入需要测试的 URL，示例：sh play.sh http://10.0.0.107:8888 {"TYPE":"Mysql","IP":"10.0.0.66","PORT":"3301","DATABASE_USERNAME":"yunqu","DATABASE_PASSWORD":"p@sswr0d123","DATABASE_NAME":"information_schema"}"
else
  echo "正在测试，..."
  echo "测试执行的地址：$1"
  docker run --rm -i -e URL=$1 -v `pwd`/playwright-report/:/app/playwright-report -v `pwd`/test-results/:/app/test-results -v `pwd`:/app/ -w /app mcr.microsoft.com/playwright:v1.32.3-jammy npm run test
fi

Jenkins 配置

在 Jenkins 中我们构建一个自由风格的软件项目

配置参数化的构建流程

将 URL 通过每次构建时的输入传递给端到端测试

配置拉取仓库

在 Repsository 中配置拉取的测试代码仓库
在 credentials 中配置使用的私钥
选择类型 SSH Username with private key

在 Private Key 中点击 enter directly , Add 用来拉取代码的私钥

最后指定拉取的分支

运行命令

添加构建步骤，选择执行 shell 。在 shell 中输入运行我们之前预设好的脚本

构建后生成测试报告

我们需要在 Jenkins 中添加插件 HTML Publisher plugin

之后在任务中配置构建后操作，如下：

这样每次测试运行完毕后，都可以通过点击 HTML Report 查看每次运行的测试情况了。

报告可能会由于 Jenkins 的安全策略被拦截。因此在控制台输入命令，该命令在Jenkins不重启的情况下会一直生效

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")

详见解决 Jenkins 中无法展示 HTML 样式的问题

最终报告情况

Trace Viewer

在 Playwright 中 Trace 是一个很有用的特性，但是在 Jenkins 中我找不到如何在 Jenkins 中进行 Trace Viewer 。

在官方文档中有两种手段可以查看

下载远端的 trace.zip ，登录 trace.playwright.dev/ 选择本地需要查看的 trace.zip 。
使用命令的形式访问远端的 trace.zip

npx playwright show-trace https://example.com/trace.zip

Playwright 通过指定基础镜像容器化的形式，可以快速、安全地运行在其他服务器上。
通过对 Jenkins 的配置集成我们的Playwright 测试任务，我们可以实现自动化地测试，做到持续集成的闭环，在每次集成后中不断测试核心业务场景，确保整个应用的健壮性。

Playwright 集成在 Jenkins 中进行端到端自动化测试