展开本页目录
开始前准备什么
- 下载独立练习包，保留 starter、reference 和原始输入。
- Python 3、Node/npm、Playwright及兼容Chromium。
- 使用Cursor原生功能需相应账号和可用额度；本题作者参考可在本地独立运行。
- 分离静态页面和真实API
- 让Cursor生成record与replay测试
- 真实点击并写入HAR
- 回读实际录制的请求与响应
- 停止API后回放相同流程
- 让未录入查询明确失败
- 干净重装并重新录制
starter、任务提示、具体输入、作者人工可运行参考与独立验证；不含账号/密钥/运行时数据库。
按本文环境运行，再对照原始输入和正反例。
1. 分离静态页面和真实API
先读 api.py 的三条物资与页面请求逻辑；页面和API是独立服务，不能把固定成功数据硬写进页面来当接口回放。
2. 让Cursor生成record与replay测试
把录制/停后端/回放/漏录失败合同交给 Cursor。录制要 update:true，回放必须关更新并 notFound:abort，独立context阻止 Service Worker。
交给目标 AI 工具的任务提示
不要手写 HAR 或 page.route 固定返回成功数据。分离静态页面与 API 进程，首次 update:true 真实录制 /api/items；回放关闭更新，notFound:abort，serviceWorkers:block。测试点商品详情和筛选，后端停机仍通过；改查询使 HAR 未命中必须失败。3. 真实点击并写入HAR
reference 运行 npm ci 后执行 node verify-har.mjs。它在随机端口启动真实API，浏览器点列表、T01详情和露营筛选，关闭context后写入 recorded.har。
4. 回读实际录制的请求与响应
打开 HAR 检查 /items?kind=all、/items?id=T01 与 /items?kind=camp 的实际响应；只含自有虚构数据，不录 Cookie 或生产登录流量。
5. 停止API后回放相同流程
脚本停止 API 并独立确认端口不可达，再用该HAR回放同一页面。静态页面仍正常服务，回放列表与详情应显示原数据。
6. 让未录入查询明确失败
选择“未录入查询”，浏览器应请求失败，而不是悄悄退回后端或生成空成功数据。HAR是固定快照，不证明真实API当前状态。
7. 干净重装并重新录制
从ZIP重装并重新录制，核对 har-result.json、原生请求条目和未命中负例；脚本结束关闭两个临时服务。
怎样确认已经完成
- 录制 HAR 的条目来源于真实 fixture API，不是代码拼出的假记录。
- 后端端口实际不可达时 UI 回放仍通过；浏览器请求只命中录制集合。
- 未录入查询必须失败；Service Worker 和更新模式不能掩盖漏录。
常见问题
Cursor 怎么把接口响应录下来离线测页面？
reference 运行 npm ci 后执行 node verify-har.mjs。它在随机端口启动真实API，浏览器点列表、T01详情和露营筛选，关闭context后写入 recorded.har。
后端没启动时，AI 写的前端测试还能复现吗？
脚本停止 API 并独立确认端口不可达，再用该HAR回放同一页面。静态页面仍正常服务，回放列表与详情应显示原数据。
哪些结果已执行，哪些仍需原生账号验证？
Playwright已真实录制HAR、停止独立API后回放和未录入请求abort，禁止Service Worker；Cursor会话未执行，快照回放不代表真实API当前状态。