展开本页目录
开始前准备什么
- 下载到独立练习目录，保留原始输入副本。
- 模型步骤使用自己的已验证配置；离线检查不需要 API Key。
- 先阅读 README 中的运行范围；练习数据均为原创。
- 打开 390 像素视口
- 定位控件和执行范围
- 检查展开语义
- 核对全部入口
- 检查实际页面宽度
- 保存真实输出与截图
- 在自己的环境复跑
1. 打开 390 像素视口
用同一 source.html 在手机宽度打开，初始菜单按钮可见，链接未展开。
2. 定位控件和执行范围
设置 390×844 后拍初始截图，点击菜单，核对 aria-expanded=true 且三项链接均可见。DOM 宽度检查配合实际截图，不能只看节点存在；桌面也需核对链接可见。
3. 检查展开语义
点击打开菜单，查看 aria-expanded 和 aria-controls 对应的目标。
4. 核对全部入口
教程、工具、帮助都应可见且可点击，不能用隐藏链接数量充当验收。
5. 检查实际页面宽度
对照截图和 scrollWidth；负例给 nav 加 900px 宽度，检查必须失败。
6. 保存真实输出与截图
对照 result.html 与原始 browser-result.json 或 local-result.json。结果必须包含本任务字段与来源，截图不能代替实际输出检查。已真实执行独立 Playwright 样站检查与失败负例；未执行 MCP 模型会话，不对外提交。
7. 在自己的环境复跑
按下载 README 使用独立目录；Playwright 首次需安装库和浏览器。负例退出非零是预期，实际用于 CI 时只将正例作为通过条件。
text
text
npm install --no-save playwright
node check.mjs
node check.mjs --negative怎样确认已经完成
- 390×844展开后aria-expanded为true，三个入口均可操作。
- scrollWidth与实际截图都没有横向溢出，桌面入口保留。
- 900px导航反例触发失败，不能仅按DOM链接数量通过。
常见问题
截图是官方工具界面吗？
这是自建样站和真实脚本输出的浏览器截图，原始 HTML 与验证脚本均可下载；不假装官方产品界面。
可以直接提交到真实网站吗？
本页先在自己的独立样站验证。迁移时重新确定站点、字段和允许动作，本教材没有外部提交步骤。