浏览 AI 知识库

网页怎么验收：检查交互、控制台、可访问性和截图

构建成功只能说明代码产物生成了，不能证明页面真的可用。一次网页验收还要覆盖点击、键盘、控制台、网络、不同宽度和关键截图。

需要哪一项，就直接查到哪一段

把表格、命令、清单或规则作为工作中的查询工具，不要求从头顺序阅读。

这张表什么时候有用

CI 构建全绿，真实页面却有一个按钮点了没反应，控制台报错，手机端目录打不开。仅看编译结果不能证明网页可用。

字段参考

要记录的内容	怎么填写	检查点
关键流程	从入口到完成逐步执行，覆盖返回、刷新、重复提交和必要权限。	每步有可见预期与实际结果
多宽度	在手机、平板、桌面检查布局、文字、触控和滚动。	无溢出、遮挡和布局跳动
控制台与网络	保存错误、失败请求、状态码、响应和关键时序。	无未解释异常，不只看页面表面
可访问性	用键盘完成主流程，检查焦点、标签、语义、对比和错误提示。	阻断问题有修复和复测
截图与复测	关键状态截图，修复后重跑同一路径及相邻流程。	证据来自最终构建和真实浏览器

流程实测

账号和响应为教学场景；真实测试使用专用测试账号，不在截图和日志中暴露凭证。

本例材料

需要确认	本例内容
现有材料	待验收页面包含搜索、筛选、复制按钮和移动目录；目标浏览器为 Chromium，桌面 1440px、手机 390px。
不能越过的边界	同时检查 HTTP、控制台、交互、键盘、布局和截图；动态数据使用稳定测试账号；不把一次加载当全流程。
要交付的结果	浏览器验收报告

最终输出

验收报告记录两种视口、7 个流程、截图和控制台。发现复制按钮缺少安全上下文回退并修复；最终 HTTP 200、H1 唯一、无横向溢出、移动目录可展开、关键交互通过。

常见失败

验收方式

页面状态和交互均实际执行控制台与网络错误已查看桌面和移动端有可比较截图关键流程含正常、错误、返回、刷新和重复提交手机、平板和桌面均检查溢出与触控控制台和失败请求没有未解释异常键盘、焦点、标签和错误提示可用修复后用最终构建重跑原失败步骤和相邻流程

进一步核对

核对 HTML、CSS、表单、响应式布局和浏览器 API 的标准行为。

键盘、焦点、文本对比和语义结构按适用的 WCAG 要求检查。