真棒的视觉回归测试

精选的优秀视觉回归测试资源列表。

回归测试是一种软件测试类型，用于验证先前开发和测试过的软件在发生变更或与其他软件接口后是否仍然表现相同。回归测试的目的是确保软件的变更没有引入新的故障。

前言

这是一个关于视觉回归测试资源的不完整列表。它并不针对特定领域或角色（开发人员/质量保证/用户体验设计师）。请注意，这适用于代码编写之后的所有回归软件测试领域。有关一般软件测试的优秀列表，请参见awesome-testing。

最后，我相信每个阅读这个列表的人都有想要添加的内容。请阅读如何贡献页面，并随时添加到列表中!!。如果你认为这很有帮助，请给一个星标 ⭐️。

基本信息

浏览器自动化

Selenium - 浏览器自动化框架和生态系统。
SlimerJS - 基于Firefox的可脚本化浏览器，类似PhantomJS。
Webdriver.io - W3C WebDriver协议的Node.js绑定实现。
Cypress.io - 在浏览器内运行的自动化框架。

工具和框架

OSnap - 一种快速且易用的项目快照测试工具（1200个快照可在3分钟内运行完毕）。
basset - 开源平台，用于生成和审查视觉差异。支持多种浏览器，集成了GitHub和Slack。
AyeSpy - 90秒内完成44次图像比较。
Wraith - 易用的Ruby工具，支持Docker。
BackstopJS - 配置驱动的自动化截图测试框架。
Galen - 基于Selenium的Java框架。
Creevey - 具有魔力的跨浏览器视觉测试工具。功能丰富，包括UI运行器、测试热重载、Docker和Storybook集成。
CSSCritic - 轻量级CSS回归测试。
Spectre - 提供图像比较功能和管理截图的管理界面。
Shoov - 专注于Drupal 7网站的UI回归和功能测试。
qd_screenshottests - 基于CasperJS的UI回归和功能测试，专注于Drupal 8网站。
Look-alike - 用于截图和比较的Chrome扩展。
Hardy - 基于Selenium驱动、cucumber驱动的CSS测试。
TestCafe - 适用于现代Web开发栈的自动化浏览器测试。
Needle - 用于Selenium和nose的视觉测试工具（Python）。
gatling - 集成的视觉RSpec匹配器，使真实的视觉测试变得简单（Ruby）。
grunt-photobox - 通过网站截图会话防止项目布局破坏的插件。
vrtest - 用于通过selenium在跨浏览器上运行组件视觉回归测试的JavaScript库。
Happo - CI中用户界面的视觉差异比较。
reg-cli - 视觉回归测试工具，输出易读的单文件HTML报告。
Nightmare - 基于Electron的高级浏览器自动化库。
Puppeteer - 无头Google Chrome Node API。
Playwright - 使用单一API自动化Chromium、Firefox和WebKit的Node库。
reg-suit - 视觉回归测试套件，可比较图像、存储快照，并将差异通知到GitHub仓库。
Chimp - 开发具有实时反馈的验收测试和端到端测试。
Differencify - 使用Puppeteer进行视觉回归测试的库。
ResembleJS - 使用JavaScript和HTML5分析和比较图像。
Muppeteer - 使用Mocha和Puppeteer的Chrome视觉回归测试框架。
ember-visual-test - Ember的简单视觉回归测试。
AET - 可扩展的测试工具，提供视觉回归测试、可访问性和性能验证、标记分析等功能。
Wendigo - 基于Puppeteer的面向测试的浏览器自动化库。
Loki - 使用Docker中的Chrome等工具对Storybook进行视觉回归测试。
Zombie.js - 使用Node.js的超快速无头全栈测试。
CodeceptJS - 现代化的NodeJS验收测试框架。
FuncUnit - 基于jQuery的功能测试套件。
Nightwatch - 基于Node.js并使用Webdriver协议的自动化测试和持续集成框架。
Protractor - Angular应用的端到端测试框架。
jest-puppeteer-react - 使用Jest和puppeteer对React组件进行视觉回归测试。
jest-image-snapshot - 使用pixelmatch进行图像比较的Jest匹配器。
test-crawler - 通过爬取网站并提供快照比较报告进行视觉回归测试。
wdio-visual-regression - webdriver.io的视觉回归工具。
Selenide - 由Selenium WebDriver驱动的框架，用于编写易读易维护的自动化测试（Java）。
Karma - AngularJS团队开发的测试运行器，满足我们所有需求。
Touca - 开源持续回归测试，无需管理快照文件的麻烦。
Lost Pixel - 全面的视觉回归测试，适用于完整页面、组件（通过Storybook和Ladle集成）和自定义截图（如通过Cypress）。

在线服务

Pixeleye - 开源的多浏览器可视化审查和测试平台，支持自托管。它对Storybook、Cypress、Playwright和Puppeteer提供一流支持。
BrowserStack - 对开源项目免费。支持Selenium Webdriver。
BugBug.io - 轻量级的Web应用测试自动化工具。易学且无需编码。免费使用，测试次数不限。额外付费可获得云监控和CI/CD集成。
HeadSpin - HeadSpin的回归测试提供强大的比较工具，用于分析新应用版本、操作系统更新、功能添加、位置等方面的性能下降。
TestGrid - 在云端或本地执行端到端测试自动化，包括跨浏览器测试、移动应用测试、性能测试和API测试。
LambdaTest - 在2000多个真实浏览器和操作系统上在线执行自动化和实时交互式跨浏览器测试。
screener.io - 适用于React，看起来是开源的。
applitools - 基于云的可视化测试。
percy.io - Web应用的持续可视化审查。
screenster.io - 基于云的Web和移动UI自动化测试平台。
browserling - 实时交互式跨浏览器测试。
Browser Shots - 仅提供截图。
Ghost Inspector - 查看介绍视频。
CrossBrowserTesting - 在1500多个真实浏览器和移动设备上进行手动和探索性测试。
Argos-CI - 自动化视觉回归测试。
Diffy - 基于云的视觉回归工具。使用puppeteer和专有比较算法（检测布局偏移）。通过AWS Lambda实现出色的可扩展性。
Chromatic - 组件库的可视化测试和UI审查。基于云。视频
VisWiz.io - 灵活的视觉回归测试服务。
Happo - 支持多个浏览器的基于云的截图测试服务。
Visual Knight - 基于云的可视化测试平台，为测试工具提供实时结果。
Axcept - 适用于整个团队的测试。支持多达100个并行测试。端点模拟。代码覆盖率。
Fluxguard - 截图像素和DOM变化比较及回归。
Vidiff - 跨阶段的基于云的视觉回归测试。
Reflect - 视觉回归测试和测试自动化工具。
Visual Regression Tracker - 开源自托管的视觉回归测试服务。
Micoo - 开源服务，适用于所有UI应用的视觉回归解决方案。
TestingBot - 提供3600多个浏览器来运行自动化视觉测试。对开源项目免费。
Preflight - 最简单的视觉回归测试和自动化Web测试工具。（有限）免费使用。
Preflight: Cypress Recorder - 在浏览器中创建AI驱动的Cypress测试/POM模型，并为Cypress自动化电子邮件和可视化测试。
Meticulous.ai - 无需编写代码即可轻松创建前端测试。使用Meticulous在您的Web应用上记录工作流程。然后，您可以在新的前端代码上重放这些流程，并通过比较两个重放来创建测试。
testRigor - 用于Web、移动和桌面测试的端到端功能测试自动化工具。
VRTs - Visual Regression Tests – WordPress插件，在内容更新时自动更新截图，防止误报。
Testomat.io Reporter - 允许将测试收集到测试用例管理系统（TCMS）中，如testomat.io，并在一个地方同步手动和自动化测试。

博客文章

Kevin Lamping：5个最佳视觉回归测试工具 - 比较了：Wraith、PhantomCSS、Gemini、WebdriverCSS和Spectre。
Garris Shipon：Angular应用的视觉回归测试 - 使用BackstopJS的教程。
Angela Riggs：使用BackstopJS进行视觉回归测试 - 使用BackstopJS的教程。
Garris Shipon：自动化CSS回归测试 - 使用BackstopJS的教程。
Phillip Gourley：让视觉回归测试变得有用 - 为什么你应该使用BackstopJS。
Pavels Jelisejevs：使用PhantomCSS进行视觉回归测试 - PhantomCSS简介。
Chromeless、Chrominator、Chromy、Navalia、Lambdium、GhostJS、AutoGCD - 无头Chrome正在颠覆传统的测试自动化方法。
使用Jest、Chromeless和AWS Lambda进行视觉回归测试 - 使用Chromeless和jest-image-snapshot的教程。
让视觉回归测试变得更简单 - Differencify的介绍及其使用方法。
使用Puppeteer和Jest进行视觉回归测试 - 使用Puppeteer、Jest和VisWiz.io设置视觉测试的教程。
保持React设计系统的一致性：使用视觉回归测试节省时间和减少麻烦 - 使用percy和jest puppeteer对React组件库进行视觉测试。
使用WebdriverIO和WebdriverCSS进行视觉回归测试 - 使用WebdriverIO和WebdriverCSS以及Spec Reporter的教程。
在Bitbucket pipeline中使用无头Chrome、Puppeteer和Pixelmatch进行自动化截图比较测试
使用Puppeteer进行自动视觉差异比较
theheadless.dev - 包含Playwright和Puppeteer实用指南和可运行示例的博客。
使用Github-CI和BackstopJS对Hugo进行视觉回归测试 - 如何使用BackstopJS自动化Hugo的回归测试。
使用Micoo进行UI视觉回归测试 - 介绍如何使用Micoo服务进行视觉回归测试。
穷人的视觉回归测试 - 使用PerfectPixel chrome插件改进手动视觉回归测试。
2022年你需要了解的视觉回归测试知识 - 截至2022年的视觉回归测试工具介绍。

幻灯片、讲座和视频

使用Wraith进行CSS回归测试 - 屏幕录像：对wraith（一个截图比较工具）的基本介绍。
使用Shoov进行视觉回归测试 - 如何设置shoov并编写第一个测试。
使用PhantomCSS进行视觉回归测试 - Jon Bellah讲解如何在WordPress开发中使用PhantomCSS。
视觉回归测试：使用BackstopJS进行完整性检查 - 包含代码演示和最佳实践的屏幕录像。
Screenster教程 - 如何使用Screenster创建自动化视觉测试的教程。
Look-alike - 视觉回归测试工具 - 演示Look-alike Chrome扩展程序的功能、工作原理以及如何构建它。
CSS critic - 轻量级CSS测试框架的屏幕录像 - 如何使用CSS critic编写第一个CSS测试，使其通过，然后破坏它，再次使其通过。
视觉回归测试 - 从工具到流程作者：Nikhil Verma - Badoo移动网络团队如何将PhantomCSS转化并集成到他们的工作流程中，并将其连接到CI流程。
100秒了解Cypress - Fireship的介绍视频。