网站监测

基于截图的网站监测会按固定间隔截取网站画面并进行对比，以跟踪一段时间内的视觉变化和差异。

Related workflow terms: 网络爬虫, 网页数据提取.

基于截图的监测与运行状态监测

运行状态监测回答一个简单问题：服务器是否响应？它会发送请求并检查是否返回成功的 HTTP 状态码。如果服务器返回 200 OK，就认为网站“在线”。但 200 响应无法说明页面的实际外观。页面可能成功加载，同时显示损坏的布局、缺失的图像、错误的内容，或正文中嵌入的报错消息。

基于截图的监测会更进一步，记录页面真正渲染出的画面，也就是真实用户会看到的视觉结果。对比不同时间的截图，可以发现运行状态检查无法识别的变化，例如布局偏移、内容编辑、样式回归和视觉元素损坏。

两种方法可以互相补充。运行状态监测发现服务器层面的中断，截图监测则发现服务器正常运行期间出现的视觉回归和内容变化。

基于截图的网站监测应用场景

• 竞品跟踪——定期截取竞品的价格页面、功能列表和着陆页，以发现变化。
• 品牌与合规——监测自己面向公众的页面，确保内容、免责声明和品牌呈现正确且保持最新。
• QA 与预发布环境——每次部署后截取预发布环境，在推送到生产环境前确认视觉输出符合预期。
• SEO 监测——发现可能影响搜索排名的页面结构、标题和内容变化。
• 监管页面——跟踪法律页面、服务条款和隐私政策中未经授权或不符合预期的改动。

工作原理

截图监测流程有三个阶段：截图、对比和提醒。

截图阶段由自动化工具完成，通常是无头浏览器。它按计划间隔访问目标 URL 并保存截图。每次都应使用一致的视口尺寸、设备像素比和等待策略，确保截图之间的差异来自真实页面变化，而不是操作设置不同。

对比阶段会将新截图与之前的基准图比较，可以采用像素级差异、感知差异或结构分析。广告、时间戳和实时计数器等动态区域可以遮盖，避免误报。

提醒阶段中，如果差异超过设定阈值，就通过电子邮件、Slack、Webhook 或其他渠道发送通知。提醒通常会附上改动前后的截图，以及突出显示变化区域的视觉差异图。

自动截图工具可以安排网站按间隔截图以跟踪视觉变化，整个截图、对比和提醒循环无需人工操作即可运行。

对于 Shotomatic 这类工作流程，通常最实用的是固定截图模板加上少量遮盖区域。这样提醒会集中在有意义的页面变化上，而不会被轮换内容或时间戳产生的噪声干扰。

常见错误

• 没有遮盖动态区域。 广告、轮播横幅、时间戳和用户专属内容每次截图都会变化。缺少遮盖时，每次对比都会误报，真正的变化反而淹没在噪声里。
• 截图设置不一致。 每次运行时改变视口尺寸、设备像素比或等待时间，会产生并非真实变化的差异。应统一所有参数，并在相同环境中运行。
• 监测频率太低。 每天只截取一次，可能错过几小时内发生又恢复的变化。应根据具体用途对变化速度的要求来设定频率。
• 忽略需要身份验证的页面。 仪表盘、账户设置和登录用户价格等许多重要页面都需要登录。如果监测工具不进行身份验证，就只会截到登录页。