Tools für visuelle Regressionstests: Percy, Applitools, BackstopJS und Diffy im Vergleich

Tools für visuelle Regressionstests: die kurze Antwort

Alle vier machen im Kern dasselbe: eine Seite erfassen, mit einer freigegebenen Referenz vergleichen und zeigen, was sich geändert hat. Sie unterscheiden sich darin, wo der Screenshot entsteht, was einen Vergleich auslöst, und für wen sie gedacht sind.

Percy und Applitools sind für Entwicklungsteams gebaut. Eine Zeile in deinen End-to-End-Tests schickt die Seite in ihre Cloud, wo sie in mehreren Browsern und Breiten gerendert wird, und ein Reviewer nimmt die Änderungen an oder lehnt sie ab, bevor der Pull Request gemerged wird. BackstopJS macht denselben Ablauf auf deiner eigenen Maschine oder deinem CI-Server, kostenlos, konfiguriert in einer JSON-Datei. Diffy startet statt von Code von einer Liste aus URLs und richtet sich neben Entwicklern auch an Agenturen, QA und Projektmanager.

Drei von ihnen können auch die Produktion beobachten. Percys Website Scanner und Applitools Autonomous scannen eine Website anhand ihrer Sitemap nach Zeitplan, und Diffy macht Screenshots der Produktion an den Tagen und zu den Zeiten, die du wählst. „Geplante Screenshots der Live-Website" unterscheidet also keines der Produkte besonders. Der Unterschied liegt im Rest: wie tolerant der Vergleich gegenüber Rauschen ist, was du pro Screenshot zahlst, und was sonst noch mitläuft.

So funktioniert Percy

Percy, Teil von BrowserStack, wird über ein SDK in deinen Tests gesteuert. Bei jedem Snapshot erfasst es das DOM der Seite und schickt es an Percy, das es parallel in mehreren Browsern und Breiten rendert. Neue Projekte nutzen standardmäßig Chrome, Firefox, Edge und Safari. Percy rendert Snapshots standardmäßig mit deaktiviertem JavaScript, weil das empfangene DOM den Zustand der Seite bereits enthält.

Jeder Durchlauf deiner Tests erzeugt einen Build. Percy vergleicht jeden Screenshot mit der freigegebenen Baseline, und Reviewer nehmen einzelne Snapshots, Gruppen oder den ganzen Build an oder fordern vor dem Merge Änderungen an. Freigegebene Snapshots gelten für die Lebensdauer des Branches weiter. Percy listet mehr als 50 Integrationen mit Testframeworks und CI-Diensten.

Der codefreie Website Scanner ist ein eigenes Produkt: Er liest deine XML-Sitemap und führt stündliche, tägliche oder wöchentliche Scans von Produktion oder Staging aus, mit Alarmen, ohne Code oder Installation.

So funktioniert Applitools

Applitools Eyes läuft ebenfalls aus deinen Tests heraus, mit SDKs für mehr als 50 Frameworks, darunter Playwright, Cypress, Selenium, Storybook und Appium. Sein Ultrafast Grid nimmt DOM, CSS und Ressourcen der Seite und rendert Checkpoints auf den Browsern und Geräten, die du wählst: Desktop-Browser, emulierte Android-Geräte und iOS-Simulatoren mit Safari.

Der Unterschied liegt im Vergleich. Statt Pixel zu zählen, nutzt Eyes das, was es Visual AI nennt, mit Match Levels, die du pro Seite oder Bereich wählst. Strict markiert, was einer Person auffallen würde, und ignoriert Rendering-Unterschiede. Layout prüft nur, ob Elemente ihre Position behalten, was zu dynamischen oder übersetzten Inhalten passt. Dynamic akzeptiert ein geändertes Datum, eine Zahl oder E-Mail-Adresse, solange das Format gleich bleibt. Exact ist pixelgenau, und Applitools selbst empfiehlt es nicht für den normalen Einsatz. Ein Klick übernimmt dieselbe Änderung über alle Viewports hinweg.

Applitools Autonomous ist das codefreie Produkt: Es durchsucht deine Sitemap, um eine Startsuite aufzubauen, kann nach Zeitplan laufen, um Änderungen durch Drittanbieter- oder nutzergenerierte Inhalte zu erfassen, und meldet HTTP-Fehler, Timeouts und Seiten, die aufgetaucht oder verschwunden sind.

So funktioniert BackstopJS

BackstopJS ist ein Open-Source-Projekt unter der MIT-Lizenz. Du installierst es mit npm, beschreibst deine Seiten in backstop.json (jedes Szenario hat ein Label und eine URL, plus mindestens einen Viewport) und führst es auf deiner eigenen Maschine oder deinem CI-Server aus. Standardmäßig steuert es Headless Chrome über Puppeteer, oder Chromium, Firefox oder WebKit über Playwright.

„backstop test" macht neue Screenshots und vergleicht sie mit deinen Referenzbildern; „backstop approve" macht aus den neuesten Ergebnissen die neuen Referenzen. misMatchThreshold legt fest, wie viel Prozent der Pixel abweichen dürfen, standardmäßig 0,1. Um Unterschiede zwischen Betriebssystemen zu vermeiden, kann es in einem eigenen Docker-Container rendern, und es kann JUnit-Berichte für CI schreiben.

Es gibt kein gehostetes Dashboard, kein Konto und keinen Scheduler. Um die Produktion zu beobachten, richtest du Szenarien auf Live-URLs und führst sie über einen eigenen Cronjob oder CI-Zeitplan aus. Das aktuellste Release auf npm ist 6.3.25, von September 2024, und das Repository bekam im September 2026 noch Commits.

So funktioniert Diffy

Diffy arbeitet von URLs aus, ohne irgendetwas auf der Website zu installieren. Es lädt deine Seiten in einem echten Browser auf eigenen Servern, bei Breakpoints von 240 bis 2000 Pixel Breite, und kann Cookies und Header setzen oder sich einloggen, mit Vorlagen für Drupal, WordPress und Netlify.

Der Kernvergleich ist Umgebung gegen Umgebung: Produktion gegen Staging oder Dev, wobei die Domain in jeder URL automatisch ausgetauscht wird. Es kann eine Seite außerdem mit ihrem vorherigen Scan oder mit einem Figma-Frame vergleichen. Ein Zeitplan macht Screenshots der Produktion an den Tagen und zu den Zeiten, die du wählst, mit Benachrichtigungen per E-Mail, Slack und Webhook. Pro ergänzt CI-Automatisierung mit dokumentierten Setups für GitHub Actions und CircleCI.

Für WordPress hat Diffy ein kostenloses Plugin auf WordPress.org, das neben jedem verfügbaren Update einen Link „update now with Diffy visual testing" einfügt: Es macht einen Screenshot der Website, führt das Update aus, macht erneut einen Screenshot und vergleicht. Dafür braucht es ein Diffy-Konto, das das Plugin anlegen kann.

Was Tools für visuelle Regressionstests erkennen und was ihnen entgeht

Sie erkennen, was sich auf dem Bildschirm ändert: ein Header, der den Inhalt überlappt, ein zusammengebrochenes Raster, ein Button, der aus der Seite gedrängt wird, eine Schrift, die nicht geladen hat, ein verschwundener Abschnitt. In CI eingesetzt, erkennen Percy, Applitools und BackstopJS das, bevor der Code gemerged wird – der günstigste Moment, es zu beheben.

Was gleich aussieht, entgeht ihnen. Ein Checkout, der perfekt aussieht, aber keine Zahlung mehr annimmt, ein Formular, das nichts verschickt, eine Seite, die aus dem Suchindex gefallen ist, oder eine Website, die um 3 Uhr nachts ausfällt – all das besteht einen Screenshot-Vergleich oder wird nie angesehen. Ein Pull-Request-Review sieht außerdem nur, was im Pull Request steckt. Ein automatisches Plugin-Update, eine Änderung auf der Hosting-Seite, ein neuer Cookie-Banner oder ein Drittanbieter-Skript, das sich von selbst geändert hat, erreicht die Produktion, ohne durch deine CI zu laufen.

Rauschen ist die andere Grenze. Karussells, Werbung, Datumsangaben und nachladende Bilder ändern sich zwischen zwei Aufnahmen. Jedes Produkt geht anders damit um: Applitools mit Match Levels, BackstopJS und Percy mit Schwellenwerten und ignorierten Bereichen, Diffy und Relvato mit Masken. Egal, was du wählst, rechne mit etwas Zeit zum Feinjustieren.

Preise, Stand November 2026

Die Produkte zählen Unterschiedliches, vergleiche also genau. Percy zählt einen Screenshot als eine Seite in einem Browser bei einer Breite: zwei Seiten in zwei Browsern bei drei Breiten sind zwölf. Applitools zählt Checkpoints, für eine Seite oder eine Komponente. Diffy zählt Screenshots, ohne zu sagen, wie Breakpoints sie vervielfachen. Relvato zählt Läufe, und ein Lauf deckt jede Seite, jeden Viewport und Browser ab, die du für diesen Monitor eingerichtet hast.

Percy: kostenlos für 5.000 Screenshots im Monat, mit unbegrenzten Nutzern und Projekten und einem Monat Build-Historie. Der Plan Desktop kostet 199 $ im Monat bei jährlicher Abrechnung oder 249 $ bei monatlicher Abrechnung für 10.000 Screenshots, plus 0,036 $ für jeden weiteren Screenshot. Echte Mobilgeräte beginnen bei 599 $ im Monat, jährlich abgerechnet. Der Preis des Website Scanners wird auf diesen Seiten nicht veröffentlicht.

Applitools: kein kostenloser Plan, nur eine kostenlose Testphase, die die AGB auf 100 Checkpoints im Monat pro Nutzer begrenzen. Starter kostet 667 $ im Monat, jährlich bezahlt, für „100,000 component checkpoints or 1,000 page checkpoints" mit unbegrenzten Nutzern; die Preisseite nennt nicht, über welchen Zeitraum. Professional und Enterprise gibt es auf Anfrage.

BackstopJS: kostenlos. Du zahlst nur für die Maschine oder die CI-Minuten, auf denen es läuft.

Diffy: kostenlos für 500 Screenshots im Monat, zwei Umgebungen und einen Monat Daten. Pro kostet 67 $ im Monat bei jährlicher Abrechnung oder 80 $ monatlich für 2.000 Screenshots, bis zu 250 $ oder 300 $ für 30.000, mit sechs Monaten Daten.

Relvato: Der Monitor für visuelle Regression ist in jedem Plan enthalten. Free deckt eine Website und 100 Läufe im Monat ab; Pro kostet 29 $ im Monat (24 $ bei jährlicher Abrechnung) für eine Website; Business 79 $ für fünf Websites; Agency 199 $ für 25. Jeder Plan enthält auch alle anderen Monitore, der Preis gilt also nicht nur für visuelle Regression.

Wann du was nimmst

Nimm Percy, wenn dein Team über Pull Requests ausliefert, Cross-Browser-Rendering ohne eigene Browser will und zum Start eine großzügige kostenlose Stufe sucht. Nimm Applitools, wenn Fehlalarme durch dynamische Inhalte dich Zeit kosten, du Komponenten und viele Geräte testest und das Budget es erlaubt; seine Match Levels sind hier der flexibelste Weg, Rauschen zu tolerieren. Nimm BackstopJS, wenn du kostenlos, Open Source und selbst gehostet willst, ohne dass Screenshots deine Server verlassen, und es dir nichts ausmacht, Konfiguration und Baselines selbst zu pflegen. Nimm Diffy, wenn du Websites ohne Testsuite betreust, Produktion mit Staging vergleichen willst oder Screenshots vor und nach WordPress-Updates direkt aus wp-admin vergleichen willst.

Nimm Relvato nicht für Tests vor dem Merge. Es macht keine Snapshots innerhalb deiner Testsuite, testet keine Storybook-Komponenten und testet keinen Preview-Build eines Pull Requests: Es überwacht die Live-Website. Brauchst du ein Gate in CI, wähle eines der vier.

Wie sie zusammenspielen

Ein CI-Tool und ein Produktions-Monitor beantworten unterschiedliche Fragen. Percy, Applitools oder BackstopJS sagen dir, dass diese Änderung sicher zu mergen ist. Ein Monitor sagt dir, dass die Live-Website immer noch richtig aussieht und funktioniert, egal was sie verändert hat: ein Deploy, ein Plugin-Update, eine Hosting-Änderung oder ein Drittanbieter-Skript.

Ein übliches Setup ist ein visuelles Tool in CI für Pull Requests und Monitore auf der Produktion für alles, was nie durch CI läuft. Nutzt du schon die geplanten Produktions-Scans von Diffy oder Percy, ergänzt Relvato, was sie nicht abdecken: Monitore für Uptime, Checkout, Login, Formulare, SEO und Sicherheit auf derselben Website, die nach jedem Update oder Deploy erneut laufen.

Wie Relvato das macht

Relvatos Monitor für visuelle Regression macht Screenshots der Seiten, die du wählst, in einem echten Browser, auf Desktop (1280 Pixel breit) und Mobil (390 Pixel), in Chromium, Firefox oder WebKit, der Engine von Safari. Vor jeder Vollseiten-Aufnahme stoppt er Animationen, wartet auf Schriften und nachladende Bilder, blendet Cookie- und Chat-Widgets aus und übermalt die Bereiche, die du maskiert hast. Danach vergleicht er die Aufnahme Pixel für Pixel mit der von dir freigegebenen Baseline, bei einer Empfindlichkeit, die du festlegst. Ein Monitor deckt bis zu 40 Kombinationen aus Seite, Viewport und Browser ab.

Um Rauschen gering zu halten, wird eine fehlgeschlagene Aufnahme erneut gemacht, nachdem die Seite Zeit hatte, sich zu setzen, und die ähnlichere der beiden wird behalten. Eine Änderung, die weiterhin fehlschlägt, geht in ein KI-Review des betroffenen Bereichs: Ein sicheres Urteil „no visible change" oder „content only" wird zur Durchsicht angezeigt, statt einen Alarm auszulösen, während große Änderungen und Fehler auf der Seite immer fehlschlagen. Ist eine Änderung gewollt, gibst du die neue Baseline mit einem Klick frei (Baselines verwalten). Daneben vergleicht der Monitor für Struktur-Drift, wie die Seite aufgebaut ist, was einen fehlenden Abschnitt erkennt, den ein Screenshot verstecken kann; unser Guide erklärt den Unterschied.

Es braucht kein Plugin und kein Snippet: Es funktioniert von außen, auf jeder Website. Im Free-Plan klickst du auf „Run", oder er läuft nach seinem wöchentlichen Zeitplan, sobald du bestätigt hast, dass dir die Website gehört. Pro ergänzt tägliche Läufe und erneute Läufe nach jedem WordPress-Update (über das kostenlose Relvato-Plugin) und nach jedem Deploy, zum Beispiel von GitHub. Business läuft stündlich. Derselbe Lauf steht neben deinen Monitoren für Uptime, Checkout und SEO, sodass eine kaputte Seite und eine kaputte Zahlung am selben Ort auftauchen.