我为SPA编写自动化测试的经验

([0-9]{6})<\/h2>/.exec(email.html_part); expect(code_match).toBeTruthy(); return code_match[1]; }; ``` 该 API 路由在生产构建中被禁用。### 模拟鼠标移动和点击 我最终写出了这样的代码： ``` ... // 等待播放器加载完成 await expect(page.getByRole("button", { name: "Play" })).toBeEnabled(); await page.mouse.move(800, 300); await page.mouse.down(); await page.mouse.move(700, 300); await new Promise((r) => setTimeout(r, 100)); await page.mouse.move(700, 300); await page.mouse.up(); await page.getByRole("button", { name: "Select" }).click(); // 滚动 await page.mouse.move(800, 300); await page.mouse.down(); await page.mouse.move(600, 300); await new Promise((r) => setTimeout(r, 100)); await page.mouse.move(600, 300); await page.mouse.up(); await page.getByRole("button", { name: "Create a clip" }).click(); ... ``` 你可能觉得这段代码不够优雅，但它测试了一个我绝对不想破坏的重要功能。而且信不信由你，尽管用了`setTimeout()`，测试结果却出奇地稳定可靠！## 待改进之处 目前尚未统计测试覆盖率🙃。不过，最关键的用户流程以及所有重要功能的"主干路径"都已得到测试。我不太在意是否覆盖了冷门代码路径——只要确保没有关键 bug 就行。我非常希望能在 CI 中将`retries`设为零，我觉得离这个目标已经不远了。只是现在还没动力去处理！--- 1. 实际上，Réécoute 也*同时*采用服务端渲染，以提升速度、优化 SEO，并兼容少数禁用 JavaScript 浏览的极客用户。不过，其核心功能必须依赖客户端渲染才能使用。 2. 我能确定当初选择 socat 是自己的决定——这里可没有任何 LLM 参与！这正是一个本该添加注释的绝佳案例...