如何建立可复现的全页截图测试：测试页、标记与验收记录

在随机新闻源上测试屏幕截图工具会得出不明确的结果。页面可以在运行之间改变，广告可以调整大小，图像可以旋转，并且个性化模块可以因帐户而异。可重现的测试需要具有已知功能和明确的预期端点的受控页面。

Screenshot PDF 提供了一个公共的全页捕获固定装置。它不包含用户数据，并被标记为 noindex，因为它是诊断界面，而不是搜索登陆页面。本文介绍了如何使用它以及如何建立其他人可以重复的接受记录。

测试页包含什么

该页面是独立的，不依赖第三方图像或API。它包括：

• 粘性标题应该在完成的捕获中出现一次；
• 固定的角控制，不应在后面的切片中重复；
• 按已知顺序编号的部分标记；
• 交替明暗表面以进行可见接缝检测；
• 进入视口后触发延迟视觉块；
• 用于对齐和页边界检查的密集表；
• Canvas 生成的条纹图案；
• 必须存在的最终绿色端点。

定义测试环境

捕获之前，记录：

|领域|示例格式 | | --- | --- | |浏览器 | Chrome 主要版本 | |扩展|截图 PDF 0.0.13 | |视口|宽度 × 高度 CSS 像素 | |放大|百分比 | |设备像素比 |浏览器报告的值 | |拍摄模式|整页或无分割| |主题 |浅色或深色| |开始时间 |本地时间戳和时区 |

不要将使用不同视口宽度进行的两个捕获进行比较，就好像它们是相同的测试一样。响应式布局可以更改部分高度、换行、表格宽度和切片数量。

运行基线捕获

在新标签页中打开测试页并重新加载。基线测试前不要手动滚动。启动全页截图并等待编辑器打开；尝试任何变通方法前，先保留第一次结果。

然后验证：

1. 部分标记按升序显示，没有缺失。
2. 粘性标题出现在开头，而不是出现在每个视口间隔。 3.固定角点控制不会遮挡后面的部分。
3. 延迟块包含其最终的条纹图案而不是空占位符。
4. 表行保持对齐并且没有行重复。
5. 交替背景相交，没有缺失或重复的水平条带。
6. 最终的绿色端点可见。

如果端点丢失，请记录最后一个可见标记并测量页面的 CSS 高度。当前的整页工作流程限制为 15,000 CSS 像素；故意较长的装置或用户页面必须分段捕获。

单独测试延迟加载行为

重新加载测试页，从上到下缓慢滚动，等待每个延迟加载区块出现，再回到顶部重新截图。将这个预加载结果与基线结果比较。

如果基线有空块但预加载结果已完成，则捕获管道正在运行，但页面的加载延迟超出了自动滚动期间可用的等待时间。正确的解决方法是预加载或分段页面，而不是将丢失的图像标记为拼接错误。

无需猜测即可识别接缝

使用交替部分背景和画布条纹图案。缺失的条带会导致条带序列突然跳跃。重叠重复条纹或标记。动态高度变化会使内容在边界上错位。

检查实际像素大小，而不仅仅是适合窗口。记录近似垂直坐标以及问题上方和下方的标记。这为开发人员提供了一个可复制的位置，而不是“靠近中间的某个位置”。

验证源页面的恢复

无论截图成功或失败，都返回测试页标签，确认：

• 页面位于顶部；
• 粘性标题和固定控件再次可见；
• 没有捕获进度元素剩余；
• 滚动仍然有效；
• 延迟的内容仍然可用。

恢复是测试的一部分，因为扩展会暂时改变浮动元素的可见性。正确的输出不能成为源选项卡处于修改状态的借口。

创建最小故障复现页面

如果一个部分失败，请首先使用固定装置进行重现，然后使用仅包含相关行为的缩小的本地页面进行重现。删除私有数据、身份验证、广告、分析和不相关的框架。保留触发问题所需的最小 CSS 或 JavaScript。

提供浏览器和扩展程序版本、视口、缩放、捕获模式、标记范围、预期结果、实际结果以及预加载是否会更改结果。附加裁剪后的证据而不是整个私人页面。

验收记录

每次运行使用一行：

|运行|标记完整 |浮动界面仅一次 |延迟加载区块完整 |拼接无接缝|末端标记存在 |源页面已恢复 | | --- | --- | --- | --- | --- | --- | --- | |基线|通过/失败 |通过/失败 |通过/失败 |通过/失败 |通过/失败 |通过/失败 | |预装|通过/失败 |通过/失败 |通过/失败 |通过/失败 |通过/失败 |通过/失败 |

为每个失败添加一个简短的注释并保留原始输出。可重复的固定装置无法覆盖每个网站，但它可以将扩展范围内的回归与一个网站的动态行为分开。

高质量的屏幕截图测试并不是“尝试几个页面，看看它们看起来是否正常”。它定义输入，公开已知的边缘情况，记录端点，检查恢复情况，并生成其他人可以重复的结果，而无需访问私人信息。