在当今快节奏的软件开发环境中，自动化测试对于交付高质量的 Web 应用程序至关重要。现代 CI/CD 流水线需要可靠、可扩展且透明的测试自动化，以确保对每次发布都充满信心。
在本文中，我们将探讨 Playwright、GitHub Actions 和 Allure Reports 如何协同工作，创建一个强大的端到端测试自动化框架。您将学习如何设置 Playwright 测试、将它们集成到 GitHub Actions CI 流水线中，以及生成专业的 Allure 报告，为测试执行提供清晰的洞察。
本文将解释这些工具如何协同工作，并提供完整的分步指南，包括设置 Playwright 测试、与 GitHub Actions 流水线集成，以及生成专业的 Allure 报告。
为什么选择 Playwright？
Playwright 是由微软构建的现代端到端测试框架。它专门设计用于快速可靠地跨不同浏览器测试 Web 应用程序。
Playwright 的关键特性
- 跨浏览器测试：支持 Chromium、Firefox 和 WebKit
- 自动等待：自动等待元素就绪，减少不稳定测试
- 无头和有头执行：非常适合 CI 环境
- 丰富的调试工具：失败时的截图、视频和追踪
- 多语言支持：JavaScript、TypeScript、Python、Java 和 .NET
Playwright 特别适合 CI 流水线，因为它运行速度快且高度确定性。
为什么选择 GitHub Actions？
GitHub Actions 是 GitHub 的内置 CI/CD 平台，允许您直接从仓库自动化工作流程。
GitHub Actions 的优势
- 原生 GitHub 集成
- 简单的基于 YAML 的配置
- 公共仓库的免费运行器
- 推送和拉取请求的自动触发
- 简单的构建产物和报告管理
使用 GitHub Actions 可以确保每当引入代码更改时，您的 Playwright 测试都会自动运行。
为什么选择 Allure Reports？
测试执行只是故事的一半。团队还需要从测试结果中获得清晰、可操作的洞察。Allure Reports 提供了视觉丰富且交互式的报告解决方案。
Allure 的独特之处
- 清晰的测试仪表板
- 步骤级执行详情
- 失败时附带截图和日志
- 测试历史和趋势
- 通过静态 HTML 报告轻松共享
Allure 将原始测试数据转化为对开发人员、QA 工程师和利益相关者有意义的信息。
整体架构
以下是所有组件如何配合工作：
- Playwright 运行 UI 测试
- Allure 捕获测试执行结果
- GitHub Actions 在仓库事件上触发测试
- 生成 Allure HTML 报告
- 报告存储为构建产物或部署到 GitHub Pages（gh-pages）
这创建了一个完全自动化的端到端测试流水线。
步骤 1：设置 Playwright
前置条件
- Node.js（版本 16 或更高）
- npm 或 yarn
- GitHub 仓库
安装 Playwright
在您的项目目录中运行以下命令：
这将安装 Playwright 以及所需的浏览器二进制文件。
步骤 2：安装和配置 Allure for Playwright
安装 Allure 依赖项以生成 Allure 报告：
更新 Playwright 配置
此配置启用了 Allure 报告，并为失败的测试捕获截图和视频。
步骤 3：本地运行测试并生成 Allure 报告
在本地执行端到端测试用例并生成 allure-results 目录
Allure 结果文件将在 allure-results 目录中生成。
生成 Allure 报告
以下命令有助于生成 Allure 报告：
打开报告
生成 Allure 报告后，下一步是打开它。以下命令将帮助打开报告：
此时，您应该看到一个完全交互式的 Allure 报告。以下是 Allure 报告的一些截图。
步骤 4：集成 GitHub Actions
以下 GitHub Actions 工作流程运行 Playwright 测试并生成 Allure 报告：
创建工作流文件（.yml）
在您的仓库中创建以下文件：
说明
- 测试在推送和拉取请求时自动运行
- 执行后生成 Allure 报告
- 报告作为可下载的构建产物上传
步骤 5：使用 GitHub Pages（gh-pages）发布 Allure 报告
在以下步骤中，您将了解如何在 GitHub Actions 本身中通过浏览器访问报告。
我们必须在 GitHub Actions 中进行以下配置：
- 在 GitHub 中打开
Settings -> Pages
- 从 Source -> Deploy from a branch
- 选择：
-
- Source: Deploy from a branch
- Branch: gh-pages
- Folder: / (root)
步骤 6：代码推送
当代码推送后，测试用例开始在 GitHub 中执行。在下面的截图中，您可以看到测试用例成功执行。
步骤 7：Pages 构建和部署
"Pages build and deployment" 是 GitHub 在为仓库启用 GitHub Pages 时创建和运行的自动 GitHub Actions 工作流程。
什么是 "Pages build and deployment"？
Pages build and deployment 是一个系统管理的 GitHub Actions 工作流程，它：
- 从指定的分支或工作流中获取文件
- 构建它们（如果需要）
- 将它们部署到 GitHub Pages
- 将它们发布为公共网站
您无需自己编写此工作流程。GitHub 会为您创建和管理它。
部署后，报告将在以下地址可用：
https://<username>.github.io/<repository-name>/
在下面的截图中，您可以看到 Allure 报告已可用。
当我们打开链接时，您可以看到所有执行的测试用例状态。
最佳实践
- 保持测试小而独立
- 使用描述性的测试标题
- 失败时捕获截图和视频
- 生成新报告前清理旧的 Allure 结果
- 在 CI 中以无头模式运行测试
- 保护
gh-pages 分支免受手动编辑
结论
结合 Playwright、GitHub Actions 和 Allure Reports 可以创建一个现代、可扩展且可靠的测试自动化流水线。这种方法不仅提高了测试可见性和执行可靠性，而且无缝集成到 CI/CD 工作流程中。通过采用此设置，团队可以减少回归、提高发布信心，并更快地交付高质量的 Web 应用程序。
如果您觉得这篇文章有帮助，请随时点赞、分享或留下评论。