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

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

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

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

已经搭建好本地的 Playwright 测试；
需要一台已经搭建好的 Jenkins 服务器😁。

测试容器化

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

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

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

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

# Set the work directory for the applicationWORKDIR /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 imageCOPY package.json /app/COPY tests/ /app/tests/COPY config/ /app/config/

# Install the dependencies in Node environmentRUN 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.shif test -z $1then 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 testfi

Jenkins 配置

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

配置参数化的构建流程

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

配置拉取仓库

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

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

5.最后指定拉取的分支

运行命令

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

构建后生成测试报告

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

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

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

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

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

详见解决 Jenkins 中无法展示 HTML 样式的问题（https://zhuanlan.zhihu.com/p/28080975）

最终报告情况

Trace Viewer

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

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

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

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

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

现在我也找了很多测试的朋友，做了一个分享技术的交流群，共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源，没人解答问题，坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化，性能，安全，测试开发等等方面有一定建树的技术大牛
分享他们的经验，还会分享很多直播讲座和技术沙龙
可以免费学习！划重点！开源的！！！
qq群号：485187702【暗号：csdn11】

最后感谢每一个认真阅读我文章的人，看着粉丝一路的上涨和关注，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走！ 希望能帮助到你！【100%无套路免费领取】