围绕客户任务构建覆盖范围
列出带来价值的路径和结果:查找服务、搜索、加入商品、预订、登录、寻求帮助或付款。为每个路径命名可能变形或失败的组件:导航、筛选、卡片、表格、图片、横幅、表单、抽屉和嵌入小部件。按内容受限的宽度测试,而不仅仅按当前手机型号清单。分别测试每个断点的略低、断点处和略高宽度。
包含窄屏和中等宽度手机、类似平板的宽度、笔记本、宽屏桌面,以及在横向时会改变任务的情况。
使用长标题、无结果、校验错误、价格徽章、完整地址和较长标签等存在的状态进行测试。
验证重排、可读性和缩放
确认页面具有适当的视口设置,然后查找页面级的水平滚动。固定图像、宽字段、负边距、离画布面板和横幅是常见原因。W3C 的 WCAG 2.1 Reflow 条款描述在相当于 320 CSS 像素宽度下的垂直滚动内容,示例包括在 400% 缩放下的 1280 像素视口。如果该条款在评估范围内,请测试实际的缩放场景。地图、视频或数据表格可能需要二维布局,但应将该滚动限制在组件内,并允许周围页面重排。
在每个测试边界处检查页眉、主要内容、页脚、粘性栏、对话框和错误摘要。
为窄屏重新组织信息;不要在未提示的情况下静默删除必需项、价格细节或帮助路径。
对内容和表单施压测试
内容变更在没有 CSS 发布的情况下也会引起响应式故障。测试最长的批准标题、若干徽章、缺失图片、已选筛选、大型法律声明以及浏览器自动填充的字段。当列堆叠时,确认阅读顺序和键盘顺序仍然合理。在小设备上完成真实表单:打开控件、修正错误并提交。在生产类似页面中测试第三方小部件,因为它们的容器、同意状态、字体和样式会改变结果。
反映可能的最大长度和组合,但在 QA 证据中不要包含客户或支付数据。
同时打开通知、聊天、促销和校验消息;这些不应覆盖主要操作或聚焦字段。
演练每种输入路径
大屏幕并不保证有鼠标,小屏幕也不保证只有触摸。hover 媒体特性(hover)用于测试主要输入是否可以方便地悬停,因此 hover 应作为增强手段,而不是通往操作或解释的唯一途径。在桌面上测试键盘和指针使用,在触控设备上测试轻触和滚动,以及在混合输入设备上进行相关测试。审查紧凑的关闭按钮、步进器、标签芯片、日历和图标操作。WCAG 2.2 的 Target Size (Minimum) 指定了 24 x 24 CSS 像素的目标大小及其定义的例外,包括间距和内联链接。它是有作用域和例外的判定标准,而不是保证每个 24 像素控件对所有人都一样容易使用。
通过 Tab 键遍历页面。焦点应保持可见、遵循合理顺序,并在进入和退出菜单与对话框时具有可预测行为。
将重要的 hover 展示通过聚焦、轻触或可见控件提供,并防止令人困惑的第一次轻触行为。
在受限条件下验证资源和性能
一个图像可能能适应其容器,但仍然不是适合该设备的文件。检查媒体是否保持在容器内、在适用时保留布局空间、保留有用裁切,并请求适当的候选资源。srcset 和 sizes 为浏览器选择所提供的图像源提供信息;它们并不保证特定请求。使用 DevTools 节流及早发现问题,但其 CPU 与网络控制相对于开发计算机进行模拟。对关键旅程在真实设备和真实连接上复测。检查字体、首屏媒体、轮播、客户端工作和第三方脚本是否导致延迟、位移或阻塞点击。
记录路径、视口、真实或模拟连接,以及哪些请求变慢或不稳定;比较相同条件下的结果。
在安全的测试构建中延迟非必要嵌入,以了解核心任务是否仍然可用。
将补救作为主动可用性工作
对于 Status Is UP,响应式就绪是主动的可用性优化:识别阻塞用户的设备路径、纠正其原因、证明修复并防止复发。它并不是声称监控告警可以判断每个布局或交互缺陷。按任务影响和覆盖范围优先级排序。在部署前,在真实硬件上测试相邻宽度和已更改的旅程。对共享的导航、样式、脚本、支付或集成更改,规划回滚方案。发布后,重复证明步骤并将证据附加到变更记录。
说明路径、设备或视口、方向、输入、状态、预期结果、实际结果,并附上编辑过敏感信息的截图或录制。
优先选择组件、布局规则、设计变量或图片分发的修复,而非仅对单一路径做覆盖;为例外指定负责人和移除计划。
