全页截图

全页截图截取的是页面从上到下的整个可滚动区域，而不只是当前可见视口，最终生成一张展示完整布局的图片。

全页截图、视口截图与滚动截图

这三个概念关系密切，但含义不同。视口截图只记录浏览器窗口在某一时刻可见的内容。滚动截图描述的是一种截取方法：工具滚动页面，再把各段画面拼接起来。全页截图描述的是最终结果，也就是包含整个页面的一张图片。

具体选择取决于用途。如果审核者只需要查看某一部分，视口截图通常已经足够；如果需要在一个文件中查看整个页面的结构，全页截图更合适。无论采用浏览器原生截图，还是滚动后拼接，关键在于输出能否准确保留完整页面，而不是采用哪种方法。

全页截图的常见用途

当人们需要完整的视觉记录，而不是单个可见状态时，通常会使用全页截图：

• 设计评审： 检查较长着陆页或文章的完整布局与内容顺序。
• SEO 检查： 以视觉形式保留页面结构和内容层级。
• QA 检查： 核验长页面、模板或不同断点下的响应式状态。
• 网站归档： 保存页面变化前后的记录，便于长期对比。
• 客户审批： 把整个页面作为一个文件分享，供异步审核。

要求提供全页截图的人，通常需要查看当前屏幕之外的上下文。

如何生成全页截图

生成全页截图有多种方式：

• 浏览器开发者工具： Chrome、Firefox 和 Edge 都提供内置命令，可以把整个可滚动页面截成一张图片。
• 滚动拼接工具： 部分工具会自动滚动页面，再把截取的各帧拼成一张长图。这种方式常见于手机和没有原生全页截图功能的桌面应用。
• 自动截图工具： 无头浏览器和截图自动化工具可以按计划或批量生成全页截图，不需要手动滚动。需要定期截取大量页面时，这种方式很实用。

需要让同一套设置覆盖多个公开页面时，可以用网站截图自动化流程处理一组 URL。批量截取网站页面指南则介绍了具体步骤和基于 URL 截图的限制。

全页截图的常见问题

• 以为全页截图一定能一键完成： 有些工具通过滚动和拼接来生成结果。重点不是采用哪种方法，而是输出能否准确保留整个页面。
• 只需检查首屏时仍使用全页截图： 对某些 QA 检查来说，视口截图能准确反映用户当下看到的画面，反而更合适。全页截图可能会增加无关信息。
• 没有考虑延迟加载内容： 只有滚动到可见区域才加载的图片和区块，可能在截图中显示为空白或直接缺失。截图流程应先触发加载。
• 期待不同视口宽度得到相同结果： 宽度为 1440px 的全页截图，与宽度为 375px 的结果一定不同。截图宽度应与预期审核场景一致。