背景
为了保障项目组件库的质量，我们急需实施UI自动化测试。虽然之前的单元测试已经确保了API的质量，但它们无法验证视觉效果是否达到预期。经过对比各种UI自动化工具，我们选择了Playwright，以补充单元测试无法覆盖的范围，尤其是在渲染截图对比等方面。
官方文档链接 ：Playwright 官方文档
环境配置
由于Playwright测试需要调用浏览器进行测试，因此要求本机安装与Playwright版本相匹配的浏览器。
- 在外网环境下：直接按照官方安装方法进行安装。
- 在内网环境下 ：若公司内部开发环境没有外网，且未设置下载代理，则需手动将浏览器复制到相应的文件夹下。具体步骤为：在有外网的计算机上安装
Playwright，然后从C:\Users\{用户名}\AppData\Local\ms-playwright目录下找到并压缩浏览器文件，再将其复制到无外网计算机上的相应目录并解压。
生成测试用例
- 使用录制器生成用例 ：可参考官方录制器说明来生成测试用例。
- 参考安装后生成的例子 ：安装
Playwright后，项目中会包含测试用例的示例，可直接参考这些例子。 - 查阅官方文档 ：对于复杂用例，可以查阅官方API文档来找到所需的API。
开始测试
推荐使用IDE进行测试：
- VsCode ：可参考官方介绍进行测试。
- JetBrains系列IDE ：
- 安装插件
- 运行测试
- 安装插件
使用命令行测试：
在终端中运行以下命令，它将在playwright.config配置的所有浏览器上执行测试，并直接在终端显示结果。
bash
npx playwright test若希望直观地查看测试过程中的每一步，可以使用以下命令，它会调起浏览器进行测试。但请注意，使用此命令生成的截图可能与上述命令略有不同（分辨率可能因浏览器边框而略有差异）。因此，建议在所有用例测试通过后，重新使用无UI命令生成最终的截图。
bash
npx playwright test --ui测试执行流程
- 截图生成与对比 ：
Playwright会在执行每个测试用例时生成截图，并与基准截图进行对比。 - 基准截图管理：首次测试时，由于缺少基准截图，测试会失败。此时，应保存生成的截图作为基准截图，供后续测试对比使用。
- 截图存储位置 ：截图保存在
__test__/components/包名/模块名/test.spec.ts-snapshots目录下。 - 差异审查与处理：若截图对比存在差异，需仔细审查差异部分，判断是否为预期变化或bug。对于预期变化，更新代码仓库上的基准截图；对于bug，及时修复并重新测试。
测试结果查看
- 本机查看 ：若本机测试失败，
Playwright会在控制台输出错误信息。可以直接在test-results目录查看生成的截图来对比预期结果和实际结果，或使用以下命令查看详细的测试报告。
bash
npx playwright show-trace ./test-results/trace.zip也可以在playwright.config.ts中配置reporter字段为html，以便在测试用例失败时自动打开浏览器呈现可视化错误报告。
- 流水线查看 ：若流水线阶段执行失败，
Playwright会在控制台输出错误信息，并将相关报告上传至流水线的作业工件。可以点击失败的流水线作业，下载测试报告附件到本地进行查看。
CI部署
由于我们的开发环境是Windows，因此基准截图的生成也在Windows上进行。考虑到Linux环境下的页面渲染可能与Windows存在细微差别（如字体不一致），在Linux环境下部署CI可能会导致截图对比失败。因此，我们选择Windows环境进行部署。我们的代码托管在GitLab上，需要在Windows平台上运行并注册Runner。
- 根据GitLab Runner官方下载版本号选择适合的版本，然后替换GitLab Runner下载链接的
{version}进行下载。 - 下载完成后，将
exe执行文件放置到指定的Runner执行文件夹下，例如D:\v11。 - 使用自己的
GitLab平台地址和Token注册Runner。
bash
.\gitlab-runner-windows-amd64.exe register- 启动
Runner服务。
bash
.\gitlab-runner-windows-amd64.exe install
.\gitlab-runner-windows-amd64.exe start- 根据需求配置
Runner（可选，默认配置通常可直接使用）。 - 配置项目的
.gitlab-ci.yml文件，选择已配置的Runner并设置执行脚本npx playwright test。