给单页应用写自动化测试：用 Playwright 跑完整用户旅程
来源: reecoute.fr — 2026-09-28
概述
作者给自己的音频播放器单页应用 Réécoute 搭了一套测试，选择用真实浏览器、把前后端当成一个整体来测。主测试套件基于 Playwright，约 20 个文件、每个文件 1 到 4 个用例，他更偏爱描写完整用户旅程的长用例，而不是针对零碎步骤的小测试。文章分享了不少工程细节：用一个只在测试构建里开放的接口读验证码邮件、用鼠标事件模拟拖拽生成音频片段，以及在 CI 里跑无头浏览器。
核心要点
- 因为应用是客户端渲染的单页应用，复杂度大致均分在前后端，作者选择用真实浏览器端到端测试整个应用，而不是把两边拆开单独测。
- 主套件约 20 个文件、每个 1 到 4 个用例，他更愿意写覆盖完整用户旅程的长用例，而不是为每个细小步骤写一个小测试。
- 邮箱验证码这类副作用，用一个只在测试构建里启用的接口把最新邮件读出来，再用正则从中取出六位验证码。
- 连鼠标拖拽选区这种交互也用 page.mouse 精确模拟；虽然代码看着丑，但它测的是一个他不想弄坏的重要功能，而且出乎意料地可靠。
- CI 上 Playwright 失败时产出的报告目录可以整体上传到对象存储，里面带控制台日志、网络请求与响应体、截图和 trace，排查成本极低。
金句
我倾向于写描述完整用户旅程的长测试用例，而不是为每个细小的步骤写一个小测试。
👍 0
👎 0
← 返回 Lobsters 首页