MSW项目中Playwright端到端测试失败问题分析与解决

问题背景

在MSW(Mock Service Worker)项目的持续集成流程中，开发团队发现基于Playwright的端到端测试(smoke tests)出现了失败情况。这类测试通常用于验证核心功能是否正常工作，是保障项目质量的重要环节。

问题现象

测试失败的表现是UI状态在CI环境中出现异常。最初团队怀疑是浏览器环境配置问题，但经过排查确认与浏览器缺失无关。测试日志显示，测试用例在执行过程中无法正确获取预期的UI状态。

深入分析

通过仔细检查测试代码，团队发现问题的根源在于测试等待的逻辑存在缺陷。测试代码错误地等待了navigator.serviceWorker.ready事件，而实际上应该等待worker.start()方法的完成。

这种错误的等待逻辑导致了以下问题：

1. 时序问题：Service Worker的注册完成并不等同于MSW已经准备就绪
2. 状态不一致：UI可能基于不完整的mock状态进行渲染
3. 测试不可靠：在CI环境中由于网络和性能差异，问题更容易暴露

解决方案

团队将测试中的等待逻辑从：

await navigator.serviceWorker.ready;

修改为：

await worker.start();

这一改动确保了测试只在MSW完全初始化后才继续执行，从而保证了测试的可靠性。

经验总结

1. 明确测试等待条件：端到端测试中要精确等待关键操作完成，而非相关系统的中间状态
2. 理解工具工作原理：深入了解MSW的启动流程，知道worker.start()才是真正表示mock准备就绪的信号
3. 环境差异考量：CI环境下的性能特点可能放大测试中的时序问题

最佳实践建议

对于类似项目中的端到端测试，建议：

1. 优先使用框架提供的就绪信号而非底层API事件
2. 在测试中添加足够的日志，帮助诊断时序问题
3. 考虑在CI环境中增加适当的等待时间容限
4. 对关键操作添加重试机制，提高测试稳定性

这个问题虽然看似简单，但很好地展示了端到端测试中时序控制的重要性，也为其他开发者提供了有价值的参考案例。