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

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

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

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

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

测试容器化

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

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

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

2. # Get the latest version of Playwright

4. FROM mcr.microsoft.com/playwright:focal

8. # Set the work directory for the application

10. WORKDIR /app

14. # Set the environment path to node_modules/.bin

16. # ENV PATH /app/node_modules/.bin:$PATH

20. # COPY the needed files to the app folder in Docker image

22. COPY package.json /app/

24. COPY tests/ /app/tests/

26. COPY config/ /app/config/

30. # Install the dependencies in Node environment

32. 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

1. # play.sh

3. if test -z $1

5. then

7. 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"}"

9. else

11. echo "正在测试，..."

13. echo "测试执行的地址：$1"

15. 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

17. fi

Jenkins 配置

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

配置参数化的构建流程

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

配置拉取仓库

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

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

1. 最后指定拉取的分支

运行命令

添加构建步骤，选择执行 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 。

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

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 测试任务，我们可以实现自动化地测试，做到持续集成的闭环，在每次集成后中不断测试核心业务场景，确保整个应用的健壮性。

 

总结：

感谢每一个认真阅读我文章的人！！！

作为一位过来人也是希望大家少走一些弯路，如果你不想再体验一次学习时找不到资料，没人解答问题，坚持几天便放弃的感受的话，在这里我给大家分享一些自动化测试的学习资源，希望能给你前进的路上带来帮助。

软件测试面试文档

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

 

          视频文档获取方式：
这份文档和视频资料，对于想从事【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！以上均可以分享，点下方小卡片即可自行领取。