5 分钟搭建网站自动化视觉监控

你更新了一个插件，合并了一个 Pull Request，或者修改了一个 CSS 文件。在你的浏览器里一切看起来正常。但你检查过 Safari 吗？检查过移动端吗？检查过可能受影响的其他 15 个页面吗？

大多数团队不会——因为手动检查太耗时，在截止日期的压力下很容易被跳过。

自动化视觉监控通过以下方式解决这个问题：按计划在多个浏览器和设备上捕获网站截图，与已知基线进行对比，并在发现变化时通知你。使用合适的工具，搭建过程不到五分钟。

视觉监控到底做了什么

视觉监控是一个持续的、自动化的流程：

1. 捕获截图： 在你选定的浏览器和设备尺寸下，对指定页面进行截图
2. 对比新截图与基线： 使用像素级差异算法将每张新截图与保存的基线进行比较
3. 高亮视觉差异： 让你精确看到哪里发生了变化
4. 发送通知： 检测到变化时，通过邮件或 Slack 通知你
5. 按计划自动重复： 可设置每天、每周或自定义周期

这能捕获其他测试手段容易遗漏的变化：CSS 回归、内容变更导致的布局偏移、第三方脚本的副作用，以及浏览器渲染差异。

第一步：注册账户并创建首个项目

在 ScanU.eu 注册账户。免费版无需绑定信用卡，每月包含 500 张截图——足够为你最重要的页面搭建监控。

登录后，创建一个新项目：

• 取一个描述性的名称（例如"公司官网"或"客户 — Acme 商城"）
• 输入要监控的网站基础 URL

项目设置就这么简单。无需配置文件，无需本地安装，无需安装 CLI 工具。

第二步：选择要监控的页面

选择要监控的页面。你可以手动输入 URL，也可以使用 ScanU 的自动页面发现功能——它会读取你的 sitemap 来查找可用页面。

优先关注最重要的页面：

• 首页 —— 流量最大的入口
• 核心落地页 —— 转化发生的地方
• 产品或服务页面 —— 客户做决策的地方
• 联系或注册页面 —— 表单需要正确渲染的地方
• 导航密集型页面 —— 菜单和布局较为复杂的页面

先从 5 到 10 个页面开始。你随时可以添加更多。

第三步：选择浏览器和设备

选择要测试的浏览器和设备。ScanU 支持三种浏览器引擎：

• Chrome（Chromium）—— 使用最广泛的桌面和移动浏览器
• Firefox —— 开发者和技术用户群体中不可忽视
• Safari（WebKit）—— 对 iOS 用户至关重要，iOS 上所有浏览器都使用 WebKit 引擎

设备方面，从与你用户群匹配的内置预设中选择。一个实用的起步组合：

• 手机： iPhone 15、Samsung Galaxy S24 —— 覆盖 iOS 和 Android
• 平板： iPad（第 10 代）—— 最常见的平板设备
• 桌面： 1920×1080 —— 标准笔记本和显示器分辨率

这个组合在不消耗过多额度的情况下，提供了扎实的跨浏览器、跨设备覆盖。免费版包含 10 种设备预设；付费方案最多支持 100+ 种。

第四步：运行首次测试并建立基线

点击"运行测试"来捕获初始截图。ScanU 的云端基础设施在后台处理所有工作——浏览器渲染、页面加载、截图捕获。

几分钟内，Dashboard 会展示每个页面、浏览器和设备组合的截图结果。这些首次截图将成为你的基线——所有后续对比的参考点。

审查基线，确保它们看起来正确。如果网站当时处于临时状态（维护模式、A/B 测试变体），请等到恢复正常状态后再建立基线。

第五步：设置定时监控

现在设置自动化监控，这样就不需要手动运行测试了：

1. 进入项目的 Monitors 板块
2. 创建一个新的监控任务
3. 设置频率——活跃网站建议默认每日检查；较稳定的网站可设为每周
4. 选择你的时区
5. 激活监控

从此以后，ScanU 会按照你设定的频率自动运行视觉测试，将结果与基线对比，并标记所有视觉变化。

可选：配置通知

要在检测到视觉变化时收到提醒，请设置通知：

• 邮件通知 在所有付费方案中可用，当测试运行检测到差异时发送摘要
• Slack 集成 可以将告警路由到指定频道，让团队在日常工作流中直接看到视觉回归告警

对于 Slack，在"集成设置"中连接你的工作区，然后选择每个项目的告警应发送到哪个频道。

检测到变化时会怎样

当定时测试检测到视觉差异时，你会在 Dashboard 中看到高亮的差异标记。对于每个发生变化的页面，你能看到：

• 基线截图 —— 页面之前的样子
• 当前截图 —— 页面现在的样子
• 差异叠加层 —— 精确高亮变化的部分，变化的像素用红色标记
• 差异百分比 —— 页面变化了多少，精确到小数点后两位

然后你可以：

• 批准变更， 如果是有意为之（例如你更新了横幅）。这将创建新的基线。
• 排查变更， 如果出乎预料。检查最近的部署、CMS 更新或第三方脚本变更。
• 修复回归， 如果确认是缺陷，然后运行新测试确认修复效果。

高效视觉监控的实用建议

合理设置差异阈值。 ScanU 允许为每个项目配置差异阈值，范围从 0.1% 到 10%。大多数网站使用默认的 1% 即可。较低的阈值能捕获更细微的变化，但可能会标记渲染噪声。较高的阈值只关注显著的布局偏移。

从小处开始，逐步扩展。 先从五个最关键的页面、两三种设备开始。熟悉工作流后，再添加更多页面和设备以增加覆盖范围。

及时审查差异。 定时监控只在有人审查结果时才有价值。设置 Slack 或邮件通知，确保告警能传达给能够采取行动的人。

有意识地建立基线。 当你进行计划内的视觉变更（改版、新活动、品牌更新）时，运行测试并批准新基线。这可以防止后续监控运行产生误报。

与部署协同。 在部署前后都运行对比测试，以便立即捕获回归。定时监控是安全网，而不是部署前测试的替代品。

费用说明

ScanU 免费版每月提供 500 张截图、1 个项目和 10 种设备预设。这足以在几个关键配置上监控一个小型网站。

如需更全面的监控，付费方案从 19 欧元/月（Pro）起步，包含 3,000 张截图、5 个项目和 35+ 种设备预设。所有方案都包含 Chrome、Firefox 和 Safari 测试，没有按浏览器额外收费。

所有数据托管在德国法兰克福，默认符合 GDPR——这对欧洲团队和服务欧盟客户的企业来说是一个重要考量。

立即开始监控

搭建视觉监控不需要 DevOps 专业知识、本地基础设施或专职 QA 团队。使用 ScanU，你可以在五分钟内从零开始实现自动化跨浏览器监控。

创建账户，设置你的第一个项目，运行第一次测试。咖啡还没凉，你就已经拥有了跨浏览器、跨设备的基线截图。

立即搭建视觉监控 →