playwright + Jenkins

前言

因为有空闲的电脑，所以在该电脑上搭建了Jenkins，未使用Doctor，而是本地拉个项目，然后使用Jenkins进行构建。

参考

解决 Jenkins 中无法展示 HTML 样式的问题
 Playwright 集成在 Jenkins 中进行端到端自动化测试

本地拉取Playwright项目

git clone xxxxxx # 拉取项目
cd 项目名称 # 进入项目目录
pnpm i # 安装依赖
pnpm playwright install # 安装支持的浏览器

跑一下项目，确保项目可以正常运行

1	pnpm exec playwright test

Jenkins配置

安装插件

在Jenkins中安装HTML Publisher插件

创建任务

新建任务，选择构建一个自由风格的软件项目

Build Steps > 添加构建步骤 > 选择 Execute Windows batch command

写入命令

D: # 进入D盘
cd company\hickwall # 进入项目目录
git pull #拉取最新代码
#set env=prod # 设置环境变量
pnpm playwright test tests/demo.spec.ts # 执行测试

构建后操作 > 添加构建后操作 > 选择 Publish HTML reports

填入内容

查看报告

构建任务

查看报告

页面空白是因为nginx拦截这部分请求。
nginx拒绝应用内联样式，因为它违反了内容安全策略（Content Security Policy）。内容安全策略是一种浏览器机制，用于防止潜在的安全漏洞，通过限制从外部来源加载的资源（如脚本、样式和图像），以减少攻击面。

解决Jenkins无法展示Html

安装插件

Startup Trigger: 可实现在Jenkins节点(master/slave)启动时触发构建；
Groovy plugin: 可实现直接执行Groovy代码。

新建任务，选择构建一个自由风格的软件项目 允许应用内联样式…,注意环境安全性，不要随意配置
配置描述

1
2

Jenkins启动时自动执行。
允许Jenkins内联脚本（script-src）、加载本地图片（img-src）、内联样式（style-src）、本地视频文件（'self')、内联视频数据（data:）‌

配置触发条件

配置构建步骤

Build Steps > 添加构建步骤 > 选择 Execute system Groovy script
Groovy Script内容

System.setProperty(
    "hudson.model.DirectoryBrowserSupport.CSP", 
    "default-src 'none'; script-src 'unsafe-inline' 'unsafe-eval'; style-src 'unsafe-inline'; img-src 'self'; media-src 'self' data:"
)

执行这个任务，发现报错了。你还需要审批这个脚本才行。

脚本审批
Manage Jenkins >In-process Script Approval

在获取到这个权限后，再次执行任务，发现可以正常执行了。

再次自动化的构建，运行完后即可看到报告。