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

2024软件测试面试刷题，这个小程序（永久刷题），靠它快速找到工作了！（刷题APP的天花板）_软件测试刷题小程序-CSDN博客文章浏览阅读2.9k次，点赞85次，收藏12次。你知不知道有这么一个软件测试面试的刷题小程序。里面包含了面试常问的软件测试基础题，web自动化测试、app自动化测试、接口测试、性能测试、自动化测试、安全测试及一些常问到的人力资源题目。最主要的是他还收集了像阿里、华为这样的大厂面试真题，还有互动交流板块……_软件测试刷题小程序https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502根据之前的文章，我们大致了解了前端测试的类型以及 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 通过每次构建时的输入传递给端到端测试

配置拉取仓库

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

行动吧，在路上总比一直观望的要好，未来的你肯定会感谢现在拼搏的自己！如果想学习提升找不到资料，没人答疑解惑时，请及时加入群： 759968159，里面有各种测试开发资料和技术可以一起交流哦。

最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】

软件测试面试文档

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