展开本页目录
开始前准备什么
- 下载本题完整练习包，区分待实现 starter 与作者完成 reference。
- 按README准备本题原生依赖；所有输入均为原创或明确标注的本地fixture。
- 本地练习不需要付费模型Key；真实模型调用未执行，MiniLM题另有明确实际推理说明。
- 准备遮挡页面
- 启动原生Trace
- 复现点击失败
- 打开Trace Viewer
- 查看遮挡日志
- 关闭弹窗重试
- 保留两份追踪
原创输入、待完成starter、作者reference及实际运行产物，依README本地准备依赖。
环境要求、具体操作、产物核对与未运行范围。
1. 准备遮挡页面
先打开原创订单导出页，按钮存在于 DOM，却被首次说明弹窗的 overlay 覆盖。输入有12条虚构练习订单，不使用真实交易数据。
2. 启动原生Trace
使用 Playwright context.tracing.start 记录截图与页面快照。追踪必须在操作之前开启，事后截图无法完整还原点击前的页面状态。
本地启动与复现
cd reference
npm install
EXERCISE_URL=http://127.0.0.1:8787 node verify.mjs3. 复现点击失败
直接点击被遮挡的导出按钮，等待真实 actionability 超时。日志出现 intercepts pointer events，说明问题是遮挡层，而不是选择器没有找到元素。
4. 打开Trace Viewer
用未修改的官方 Trace Viewer 打开 failed-trace.zip。选中 Click locator，观察当时页面快照和操作耗时；截图来自真正的 Trace Viewer。
5. 查看遮挡日志
切换到 Errors 或 Log 查看重试与遮挡信息。不要直接加 force:true 让测试变绿，这会绕过用户实际无法点击的问题。
6. 关闭弹窗重试
在参考页先点“知道了”关闭弹窗，再正常点击导出。界面显示12行练习订单已准备，成功追踪另存 fixed-trace.zip。
7. 保留两份追踪
下载两份追踪与源码，用 show-trace 再打开比较。下载版去除了作者机器路径，保留原生页面快照、操作时间与错误；AI助手账号会话未运行。
怎样确认已经完成
- 原生点击产生真实actionability超时，trace能定位拦截overlay。
- 关闭说明弹窗后用普通click完成导出，十二行文件可读取。
- 保存失败/成功两份trace，未用force跳过遮挡验收。
常见问题
自动化明明找到按钮，为什么就是点不动？
选择器找到元素不代表满足可点击条件。本题overlay拦截pointer events，原生Playwright因此超时。
Playwright失败之后怎么看当时页面到底被什么挡住？
操作前启动tracing，失败后用官方Trace Viewer看页面快照、Click动作和Errors/Log，能对照当时遮挡层。
哪些部分实际运行，哪些需要独立验证？
Playwright原生点击超时与官方Trace Viewer实跑，关闭遮挡层后正常导出12行；未使用force click。 目标AI助手账号生成、云平台部署和生产环境不在本次执行范围。