通过截图捕获进行视觉回归测试
开发团队使用 Webshot 来捕捉单元测试无法发现的错误——例如布局错乱、字体降级、图标丢失、响应式状态损坏等。截取预发布环境的页面，再截取生产环境的页面，然后对比两者。将差异图放在 PR 评论中，以证明您的更改是安全的（或者证明新 bug 刚刚出现）。
所有按钮都会打开预先配置好的截图表单。页面加载后，您可以更改格式和视口设置。
为什么选择 Webshot
像素级精确截图
PNG 模式能保留清晰的文本和边缘——非常适合像素对比工具（如 `pixelmatch`、ImageMagick `compare`），避免了 JPG 压缩噪点可能导致的误报。
每次都使用相同视口
Webshot 每次运行时都在完全相同的视口、滚动位置和字体加载等待时间下进行截图——确保对比结果可靠。
API 友好
将免费的 Webshot API 连接到您的 CI：在部署前和部署后进行截图，使用 `pixelmatch` 进行对比，如果像素变化超过阈值，则构建失败。
无需 headless-Chrome 样板代码
跳过 puppeteer 设置、字体安装、沙盒标志配置。Webshot 已在我们的基础设施上运行好这一切。您的 CI 只需发起一个 HTTP 调用。
如何进行视觉回归测试截图
- 选择您想要监控的页面——首页、关键着陆页、结账流程，或任何出现回归问题会造成损失的地方。
- 使用 PNG + desktop_full + mobile_full 模式分别截图，作为当前生产环境外观的基准。
- 在下一次部署后，再次截取相同的 URL。使用 `pixelmatch` 或 ImageMagick 对比新旧图片——任何超过 1% 的像素变化都值得人工审查。
- 将其集成到 CI 中：使用部署前钩子截取预发布环境，部署后钩子截取生产环境，如果差异超过您设定的阈值，则构建失败。
常见问题
在 CI 中使用 Headless Chrome 意味着需要安装 Chromium、字体、沙盒内核标志，并保持所有这些的更新。使用 Webshot，您可以完全跳过安装过程——您的 CI 只需向我们的 API 发起一个 HTTP 调用，就能收到一个 PNG 文件。我们负责处理 Chrome 更新、字体缓存和 SSRF 保护。
是的，当您使用 PNG 格式、相同的视口和相同的等待策略时。Webshot 会固定视口大小，并等待 fonts.ready、network-idle 以及通过 `prefers-reduced-motion` 查询声明的任何动画完成。随机动画（如 lottie 循环、基于 Date.now() 的背景）每次运行都会产生不同的差异；请在您的测试环境中冻结这些动画。
不能在一次调用中完成——您需要分别截取每个 URL，然后使用一个独立的库来对比它们。我们让 API 专注于截图本身；对比差异只需要一个 30 行的脚本。请参阅 /developers 页面查看示例代码。
是的。Webshot 在截图前会等待网络空闲（500毫秒内无请求）和字体加载完成（fonts.ready），因此 React、Vue、Svelte 和 Next.js 应用都能在截图前完全渲染。对于那些永远不会达到网络空闲状态的网站（例如使用长轮询、websockets），您可以通过 API 传递一个 `maxWait` 参数。
免费的公开表单限制为每个 IP 15分钟内5次——这对于 CI 来说太低了。免费的 API 套餐则更为宽松；请参阅 /developers 页面。对于大批量的回归测试（每次构建超过50次截图），商业 API 计划移除了每个 IP 的限制。
Webshot 本身只负责截图——您需要提供对比层。一个两行代码的解决方案是：`npx pixelmatch baseline.png new.png diff.png`。或者，您可以使用一个托管的视觉对比服务（如 Percy、Chromatic、BackstopJS），并将 Webshot 生成的 PNG 文件提供给它们。
其他使用场景： 谷歌地图截图 · WordPress 截图 · 着陆页 QA · 法律证据截图 · 社交媒体截图 · 开发者工作流截图 · 查看全部 →