在本文中，我将分享我们如何使用
Playwright为Zalando网站设置可靠的端到端自动化测试探针，解决测试中的难题，并最终提升了测试的可靠性。
1. 为什么需要自动化端到端测试？
端到端测试的核心是模拟真实用户与应用程序的交互，确保从用户界面到后台的所有应用程序组件都正常工作。端到端测试通常在无头浏览器中运行，能够轻松集成到持续集成和交付（CI/CD）流水线中，帮助团队更早发现问题，保证回归测试的有效性，并在代码库演变过程中保持应用质量。
在 Zalando，任何影响用户关键流程的应用中断都会带来严重的财务损失，因此确保发布版本的高质量尤为重要。我们每天会多次自动发布新版本，所有版本都必须通过自动化质量保证管道，其中包含我们使用 Cypress 编写的端到端测试。
为每个模块编写相同的测试用例总是繁琐的。这不仅浪费时间，也浪费精力。测试用例应该是可重用的。模块化测试设计技术允许我们在多个项目和模块中重用测试用例，常用于端到端测试。例如，在电商应用中测试“添加到购物车”功能时，用户必须先登录。之前已经编写的登录测试用例可以直接在添加产品到购物车的测试中调用，从而避免重复工作，这正是Xray测试用例管理工具的优势所在。
2. 投资端到端测试带来的好处与挑战
自动化端到端测试在 Zalando 早期阶段帮助我们发现了许多关键问题，避免了潜在的重大事故。然而，尽管我们为这些测试投入了大量资源，测试仍然存在一定的不稳定性，成功率约为 80%。每日 120 次编译中，仍有约 24 次失败属于误报，增加了不必要的摩擦。
为此，我们加大了对测试的投入，改善了测试上下文的设置。由于 Zalando 网站内容高度动态化，某些未发布的产品无法触发 "加入购物车" 流程，我们优化了选择器，并增加了 React 组件的监控机制，以确保测试只在页面完全渲染后执行。经过一系列优化，测试的成功率提升至 95%，我们对此感到相当满意。
3. 新的问题
尽管我们大幅提升了测试的可靠性，但一次前端交互问题仍导致了重大事故——React 的渲染崩溃，使大量产品详情页无法选择商品尺寸，进而无法添加商品到购物车。此次事故的影响虽大，但未达到自动报警的触发阈值，导致未能及时处理。事后分析发现，问题源自头部 CMS 中发布的未完成内容，打破了与 API 网关的前端协议，最终导致交互失败。
尽管我们已针对问题加强了监控和报警，但我们意识到端到端测试仍无法完全覆盖所有问题。于是我们提出了一个想法：为什么不定期运行端到端测试探针，并在失败时触发报警？然而，现有的测试成功率只有 95%，如果每 30 分钟运行一次测试，可能会导致每天多次甚至夜间触发误报，增加值班人员的工作负担。因此，我们需要进一步提高测试的可靠性。
4. 更简化的解决方案
我们回到设计的原点，决定通过简化方案提升系统的弹性。我们为端到端测试探针设置了定时任务，覆盖关键的客户旅程场景，如访问主页、浏览商品分类页面、选择商品、添加至购物车并开始结账流程。通过专注于少量关键功能，我们大大减少了误报的可能性。
同一时间，我们在内部工程会议上听到关于 Playwright 的介绍。Playwright 是 Microsoft 开发的端到端测试工具，凭借其高可靠性，成为了我们新的选择。它提供了一些强大的特性：
• 自动等待：不再依赖人工设置的超时等待
• 自动重试：
Web断言可以自动重试，减少测试波动• 丰富的调试工具：提供追踪和时光倒流功能，帮助调试问题
• 统一的
API：跨所有现代浏览器一致工作• 原生支持
TypeScript：提高开发效率 我们决定使用Playwright实现这些测试探针，并且很快取得了成功。Playwright的API简单易用，通过承诺机制和增强的CSS选择器，我们迅速上手。以下是我们用于验证商品分类页面的最终测试代码：
test("Test catalog landing journey for zalando", async ({ page }) => {
// 访问分类页面
const catalogNav = await page.goto(catalogLink);
expect(catalogNav?.status()).toBe(200);
await expect(page).toHaveURL(title);
await page.waitForTimeout(1000);
await page.getByRole("button", { name: /farbe/i }).click();
await page.locator("label[for=colors-BLACK]").click();
await page.getByText(/speichern/i).click();
await expect(page.getByTestId("is-loading")).toBeVisible();
await expect(page.getByTestId("is-loading")).not.toBeVisible();
await page
.locator("article[role=link]")
.locator('a[href$=".html"]')
.first()
.click();
await page.waitForLoadState("domcontentloaded");
await expect(page).toHaveURL(/\.html/i);
});
5. 总结与展望
通过简化测试场景，专注于核心客户旅程，并依赖 Playwright 的高可靠性，我们大幅提升了端到端测试探针的稳定性。我们建议，类似我们这种业务中断对公司造成重大损害的企业，可以考虑将端到端测试探针纳入其工具链。未来，我们计划增加更多端到端探针场景，涵盖更多的关键业务操作，同时将这一理念扩展到我们的移动应用上。
