全部文章

JiuLouCompany E2E 测试架构揭秘

分享我们如何使用 Playwright、GitHub Actions 和 CloudBase 函数构建可靠的端到端测试流水线。

作者 于成季··约 7 分钟
PlaywrightE2ECI/CD

端到端测试是每个团队都知道应该做、但最终往往会放弃的事情之一——测试不稳定、流水线慢、选择器脆弱。以下是 JiuLouCompany 实际在维护和信任的 Playwright 测试流水线的完整方案。

为什么选 Playwright

我们评估了 Cypress 和 Playwright。Playwright 在三个方面胜出：更好的跨浏览器支持、更快的执行速度、以及更优秀的 TypeScript 优先 API。自动等待机制也让我们的不稳定率比 Cypress 大幅降低。

流水线架构

流水线运行在 GitHub Actions 上，分为三个阶段：

  1. Setup — 启动开发服务器，通过 Docker 启动本地 PostgreSQL
  2. Test — 在 localhost:4000 上运行 Playwright 测试
  3. Report — 将测试结果作为 GitHub Actions artifacts 上传，失败时发送通知

选择器问题

测试中断的最大根源是脆弱的 DOM 选择器。我们的解决方案：使用语义化的 data 属性而非 CSS 类或 nth-child。每个可交互元素都附带一个 data-testid 属性，随组件一起维护。

// Bad: <button class="btn-primary">Login</button>
// Good: <button data-testid="login-submit" class="btn-primary">Login</button>
await page.click('[data-testid="login-submit"]');

CloudBase 集成

某些测试需要直接与 CloudBase 后端交互（设置测试数据、验证数据库状态）。我们使用 CloudBase 函数作为测试 fixture——通过 HTTP 在测试 setup 阶段调用，确保应用每次都从已知状态启动。

成果

上线 6 个月后的数据：98.3% 通过率，平均测试时长 45 秒，核心路径（登录、支付、仪表盘）零未检测到的回归。