Chromatic vs Percy: Welches Visual Testing Tool waehlen Sie 2026?
Component Visual Testing (visuelles Testen von Komponenten): Eine automatisierte Pruefmethode, bei der das visuelle Rendering isolierter UI-Komponenten in ihren verschiedenen Zustaenden erfasst und mit Referenzbildern verglichen wird, um unbeabsichtigte Aenderungen an ihrem Erscheinungsbild zu erkennen.
Chromatic und Percy. Zwei Visual Testing Tools, zwei Philosophien, zwei Zielgruppen. Das eine ist im Storybook-Oekosystem entstanden und schwoert ausschliesslich darauf. Das andere versteht sich als universell und integriert sich ueberall. Beide machen am Ende dasselbe — Screenshots vergleichen —, aber der Weg dorthin ist grundlegend unterschiedlich.
Wenn Sie nach "chromatic vs percy" gesucht haben, verwenden Sie wahrscheinlich Storybook und schwanken zwischen der hauseigenen Loesung und dem vielseitigen Herausforderer. Dieser Artikel hilft Ihnen bei der Entscheidung. Und vielleicht entdecken Sie dabei eine Option, die weder der eine noch der andere Ihnen bietet.
Inhaltsverzeichnis
- Chromatic: der native Storybook-Ansatz
- Percy: der Universalist
- Direktvergleich: 6 Schluesseldimensionen
- Der gemeinsame blinde Fleck: Cloud-only und kostenpflichtig
- Delta-QA: die lokale und kostenlose Alternative
- FAQ
Chromatic: der native Storybook-Ansatz
Chromatic wurde von den Maintainern von Storybook selbst entwickelt. Das ist kein Nebensaechlichkeit — es ist die Grundlage seines gesamten Wertangebots. Wenn dieselben Leute, die Storybook bauen, auch das Visual Testing Tool fuer Storybook bauen, ist die Integration erwartungsgemaess tadellos.
Wie Chromatic funktioniert
Das Prinzip ist entwaffnend einfach. Sie haben Ihre Storybook-Stories — diese kleinen isolierten Labore, in denen jede Komponente in ihren verschiedenen Zustaenden lebt. Chromatic erfasst automatisch jede dieser Stories als Bild. Bei jeder Code-Aenderung wird erneut erfasst und verglichen. Wenn sich etwas visuell geaendert hat, zeigt es Ihnen das.
Kein SDK zu konfigurieren, keine Tests zu schreiben. Wenn Sie Stories haben, haben Sie Visual Tests. So direkt ist das. Als wuerden Ihre Komponenten bei jedem Arztbesuch einen visuellen Check-up durchlaufen, ohne dass Sie einen Termin vereinbaren muessen.
Die Staerken von Chromatic
Die Storybook-Integration ist vollstaendig. Chromatic versteht Ihre Stories, Ihre Args, Ihre Decorators, Ihre konfigurierten Viewports. Es behandelt Storybook nicht wie ein Drittanbieter-Tool — es behandelt es wie seine eigene Muttersprache. Das Ergebnis ist ein nahtloses Erlebnis, bei dem Visual Testing eine natuerliche Erweiterung Ihrer Komponentenentwicklung ist.
Der Review-Workflow ist exzellent. Jede visuelle Aenderung loest einen Review im Chromatic-Dashboard aus, mit einer Side-by-Side-Ansicht des alten und neuen Renderings. Designer, Entwickler und Product Owner koennen direkt kommentieren, genehmigen oder ablehnen. Es ist ein kollaboratives Erlebnis, das die Disziplinen zusammenbringt.
Die Erkennung von Aenderungen ist intelligent. Chromatic erfasst nur die Komponenten neu, die von einer Code-Aenderung betroffen sind — dank Abhaengigkeitsanalyse. Bei einem Projekt mit 500 Stories werden, wenn Ihr Commit nur eine Komponente betrifft, nur deren Stories erneut getestet. Das ist effizient und ressourcenschonend — zumindest was die abgerechneten Captures betrifft.
Visuelles Interaction Testing. Chromatic ermoeglicht es, Interaktionen (Klick, Hover, Eingabe) vor der Erfassung auszufuehren, sodass Sie die interaktiven Zustaende Ihrer Komponenten testen koennen — nicht nur den Ausgangszustand.
Visuelle Dokumentation. Chromatic veroeffentlicht automatisch eine Online-Version Ihres Storybooks und erstellt so eine lebendige visuelle Bibliothek Ihrer Komponenten. Das ist nuetzlich fuer Design-Reviews und das Onboarding neuer Entwickler.
Die Schwaechen von Chromatic
Storybook oder nichts. Das ist der Deal. Wenn Sie Storybook nicht verwenden, nuetzt Ihnen Chromatic rein gar nichts. Und selbst wenn Sie es verwenden — Chromatic testet nur das, was in Storybook ist. Ihre vollstaendigen Seiten, Ihre User Journeys, Ihre Zustaende, die nicht als Stories modelliert sind? Fuer Chromatic unsichtbar.
Das ist eine fundamentale Einschraenkung. Storybook ist ein Werkzeug zur Komponentenentwicklung, keine originalgetreue Nachbildung Ihrer Anwendung. Die Navigationskomponente kann isoliert perfekt sein und im Kontext der echten Seite voellig kaputt — Chromatic sieht das nicht.
Die Kosten steigen schnell. Chromatic bietet ein Free Tier mit einer begrenzten Anzahl von Captures ("Snapshots") pro Monat. Darueber hinaus wird nutzungsbasiert abgerechnet. Bei einem Projekt mit vielen Stories und haeufigen Captures kann die Rechnung erhebliche Betraege erreichen. Die genaue Preisgestaltung haengt von Ihrem Volumen und Ihrem Plan ab, aber Erfahrungsberichte von Teams deuten darauf hin, dass die Ueberraschung unangenehm sein kann.
Nur Cloud. Alle Ihre Captures werden auf Chromatic-Servern gesendet und gespeichert. Keine Standard-On-Premise-Option, kein lokaler Modus. Wenn Datensouveraenitaet fuer Sie ein Thema ist, verdient das besondere Aufmerksamkeit.
Kein Test vollstaendiger Seiten. Chromatic testet isolierte Komponenten, keine zusammengebauten Seiten. Dabei treten die hinterhaeltigsten visuellen Regressionen haeufig auf, wenn Komponenten zusammenwirken: ein Margin, der ein anderes Element verschiebt, ein z-index, der einen Button verdeckt, ein Overflow, der horizontales Scrollen erzeugt. Das sind Kompositions-Bugs, und Chromatic erkennt sie designbedingt nicht.
Percy: der Universalist
Percy, seit 2020 im Besitz von BrowserStack, spielt in einem anderen Register. Wo Chromatic Spezialist ist, ist Percy Generalist. Es integriert sich in zahlreiche Frameworks und Tools, nicht nur in Storybook.
Wie Percy funktioniert
Percy integriert sich ueber ein SDK in Ihre bestehenden Tests. Ob Sie Cypress, Playwright, Selenium, Storybook oder ein anderes Tool verwenden — Sie fuegen Percy-Aufrufe zu Ihren Szenarien hinzu. Diese Aufrufe erfassen den Seitenzustand zu einem bestimmten Zeitpunkt und senden die Aufnahme zur Vergleich an die Percy-Cloud.
Die CI/CD-Integration steht im Mittelpunkt des Workflows: Jeder Pull Request loest eine Reihe visueller Captures aus, und die Ergebnisse erscheinen direkt in der Oberflaeche Ihres Versionierungstools.
Die Staerken von Percy
Die Universalitaet. Percy ist an kein Framework gebunden. Cypress, Playwright, Selenium, Storybook, Ember, React — Percy passt sich an. Wenn Sie Ihren Tech-Stack wechseln, ueberleben Ihre Percy Visual Tests (mit Anpassungen). Das ist ein strategischer Vorteil fuer Organisationen, die ihre visuelle Qualitaet nicht auf ein einzelnes Oekosystem wetten wollen.
Tests vollstaendiger Seiten. Im Gegensatz zu Chromatic kann Percy ganze Seiten in ihrem realen Kontext erfassen. Ihre zusammengebauten Komponenten, Ihre kompletten Layouts, Ihre User Journeys — alles ist visuell testbar. Hier verstecken sich oft die wichtigsten Bugs, in den Zwischenraeumen zwischen den Komponenten.
Echtes Multi-Browser-Rendering. Dank BrowserStack fuehrt Percy seine Captures in echten Browsern durch, keine Emulation. Chrome, Firefox, Safari — Sie sehen genau das, was Ihre Nutzer sehen werden. Browser-uebergreifende Rendering-Unterschiede werden erkannt, nicht simuliert.
Pull-Request-Integration. Der Workflow von Percy dreht sich um Pull Requests. Die visuellen Ergebnisse erscheinen als Check in Ihrem Merge Request, mit einem direkten Link zum Vergleichs-Dashboard. Der Feedback-Zyklus ist kurz: Sie pushen Code, Percy zeigt Ihnen die visuellen Auswirkungen, Sie genehmigen oder korrigieren.
Responsive Testing. Percy erlaubt es, jede Seite in mehreren Viewport-Groessen zu erfassen und responsive-spezifische Regressionen zu erkennen. Ein Bug, der nur auf Mobilgeraeten auftritt, wird ebenso leicht gefangen wie ein Desktop-Bug.
Die Schwaechen von Percy
Der Pixel-fuer-Pixel-Vergleich. Dieselbe Schwaeche wie im Vergleich mit Applitools. Percy verwendet einen pixelbasierten Vergleich, keinen strukturellen. Das Ergebnis ist eine hoehere Rate an False Positives, besonders bei Projekten mit dynamischem Inhalt, Animationen oder variablem Font-Rendering zwischen verschiedenen Umgebungen.
Die Teams enden damit, ueberall Ausschlusszonen hinzuzufuegen, was darauf hinauslaeuft, Pflaster auf ein architektonisches Problem zu kleben. Man erhaelt ein Tool, das alles sehen soll, aber immer mehr blinde Flecken hat — die Ironie entgeht niemandem.
Storybook-Integration schlechter als Chromatic. Percy bietet ein Storybook-Plugin, aber das Erlebnis ist nicht so nahtlos wie bei Chromatic. Die Aenderungserkennung ist weniger feinkoernig, die Erfassung weniger optimiert, und der Review-Workflow weniger in das Storybook-Oekosystem integriert. Wenn Storybook Ihre Welt ist, macht Chromatic es besser.
Die Kosten. Wie Chromatic berechnet auch Percy nutzungsbasiert. Das Free Tier ist begrenzt, und die Preise steigen mit dem Capture-Volumen. Multi-Browser- und Multi-Viewport-Captures multiplizieren den Zaehler schnell. Eine Seite, getestet auf 3 Browsern und 3 Viewport-Groessen — das sind 9 Captures fuer eine einzige Seite.
Cloud-Latenz. Captures an die Cloud senden, dort verarbeiten und die Ergebnisse zurueckholen braucht Zeit. Bei umfangreichen Testsuites kann die Feedback-Schleife mehrere Minuten erreichen — eine Ewigkeit in einem modernen Entwicklungs-Workflow.
Direktvergleich: 6 Schluesseldimensionen
1. Testumfang
Chromatic testet isolierte Komponenten ueber Storybook. Percy testet komplette Seiten und Komponenten. Wenn sich Ihr Bedarf auf Storybook-Komponenten beschraenkt, ist Chromatic effizienter. Wenn Sie zusammengebaute Seiten testen muessen, ist Percy Ihre einzige Option zwischen den beiden.
Vorteil: Percy fuer die Abdeckung, Chromatic fuer die Komponententiefe.
2. Einfachheit der Einfuehrung
Wenn Sie bereits Storybook haben, aktivieren Sie Chromatic in wenigen Minuten — kein SDK, keine Tests zu schreiben. Percy erfordert die Integration eines SDKs und das Hinzufuegen von Capture-Aufrufen in Ihren bestehenden Tests. Das ist mehr anfaenglicher Aufwand, aber auch flexibler.
Vorteil: Chromatic wenn Storybook vorhanden, Percy wenn nicht.
3. Erkennungsqualitaet
Chromatic verwendet einen intelligenten, fuer Storybook-Komponenten optimierten Vergleich mit guter Rauschunterdrueckung. Percy verwendet einen Pixel-fuer-Pixel-Vergleich, der anfaelliger fuer False Positives ist. Keiner von beiden erreicht das KI-Niveau von Applitools.
Vorteil: Chromatic, moderat.
4. Kollaborativer Workflow
Beide bieten Review-Dashboards mit Genehmigung/Ablehnung. Chromatic integriert den Design-Review-Workflow besser mit seiner Online-Storybook-Veroeffentlichung. Percy integriert den Entwicklungs-Workflow besser mit seinen Pull-Request-Checks.
Vorteil: Abhaengig von Ihrer Kultur — design-getrieben (Chromatic) oder code-getrieben (Percy).
5. Multi-Browser-Rendering
Percy verwendet echte Browser ueber BrowserStack. Chromatic verwendet standardmaessig Chrome, mit einem neueren und weniger umfangreichen Multi-Browser-Support. Fuer die Cross-Browser-Abdeckung hat Percy dank der BrowserStack-Infrastruktur einen strukturellen Vorteil.
Vorteil: Percy, deutlich.
6. Gesamtkosten
Beide rechnen nutzungsbasiert mit Stufen ab. Chromatic kann guenstiger sein, wenn Sie nicht viele Stories haben (da es nur die geaenderten erfasst). Percy kann teurer werden durch die Browser/Viewport-Multiplikatoren. In beiden Faellen haengen die tatsaechlichen Kosten von Ihrem Volumen und Ihrer Testfrequenz ab.
Vorteil: variabel — rechnen Sie mit Ihren realen Volumina.
Der gemeinsame blinde Fleck: Cloud-only und kostenpflichtig
Hier ist das Wesentliche, das dieser Vergleich beleuchten muss: Chromatic und Percy teilen dieselben strukturellen Einschraenkungen.
Beide sind Cloud-only. Ihre Screenshots — Bilder Ihrer Anwendung, potenziell mit sensiblen Daten — verlassen Ihre Infrastruktur, um von einem Drittanbieter verarbeitet zu werden. Im Jahr 2026, mit DSGVO, NIS2-Richtlinie und einem wachsenden Bewusstsein fuer digitale Souveraenitaet, ist das eine Einschraenkung, die immer mehr Organisationen schwer akzeptieren koennen.
Beide werden ueber das Free Tier hinaus kostenpflichtig. Und der Uebergang vom Kostenlosen zum Kostenpflichtigen kann abrupt sein. Das Free Tier ist ein Lockangebot — ausreichend, um sich in das Tool zu verlieben, unzureichend fuer den Produktiveinsatz. Das nutzungsbasierte Modell bedeutet, dass Ihre Investition in visuelle Qualitaet direkt durch Ihr Budget begrenzt ist. Mehr testen = mehr bezahlen. Das ist aus Anbietersicht logisch, aber aus Qualitaetsperspektive fragwuerdig.
Beide erfordern technische Kenntnisse. Chromatic ist zugaenglicher, wenn Sie bereits Storybook haben, aber Storybook selbst ist ein Entwickler-Tool. Percy erfordert die Integration eines SDKs. In beiden Faellen ist der nicht-technische QA-Mitarbeiter, der Designer oder der Product Owner von Entwicklern abhaengig, um Tests zu erstellen und zu pflegen.
Beide sind externe Abhaengigkeiten. Ihre Faehigkeit zum visuellen Testen haengt von der Verfuegbarkeit eines Drittanbieter-Dienstes ab. Ein Ausfall bei Chromatic oder Percy, und Ihre CI/CD-Pipelines laufen im visuellen Teil ins Leere. Das ist der klassische SaaS-Kompromiss, aber es bleibt ein Kompromiss.
Diese Einschraenkungen sind keine Bugs — es sind Geschaeftsentscheidungen. Vollkommen valide Entscheidungen fuer die Anbieter, die aber nicht unbedingt mit den Interessen aller Teams uebereinstimmen.
Delta-QA: die lokale und kostenlose Alternative
Was waere, wenn Visual Testing lokal, kostenlos und fuer alle zugaenglich sein koennte?
Das ist der Ansatz von Delta-QA. Keine Low-Cost-Version von Chromatic oder Percy, sondern ein fundamental anderer Ansatz:
Standardmaessig lokal. Ihre Screenshots verlassen niemals Ihren Rechner. Der Vergleich wird lokal ausgefuehrt. Keine Cloud, kein Datentransfer, keine externe Abhaengigkeit. Ihre DSGVO-Compliance dankt es Ihnen, und Ihr Sicherheitsteam ebenfalls.
Kostenlos, ohne Sternchen. Kein Free Tier mit laufendem Zaehler. Keine "Enterprise"-Stufe, um Funktionen freizuschalten. Delta-QA ist kostenlos, Punkt. Ob Sie 10 Seiten oder 10.000 testen — der Preis ist derselbe: null. Die visuelle Qualitaet Ihrer Anwendung sollte nicht durch ein Budget rationiert werden.
Wirklich No-Code. Kein Storybook erforderlich, kein SDK zu integrieren, keine Tests zu schreiben. Sie richten Delta-QA auf Ihre Seiten, es erfasst und vergleicht. Ein Junior-QA, ein Designer, der seine Mockups prueft, ein Product Owner, der einen Sprint validiert — jeder kann es ab dem ersten Tag nutzen. Das ist die Demokratisierung des Visual Testing, nicht seine Reservierung fuer die wenigen, die JavaScript beherrschen.
Komplette Seiten und Komponenten. Im Gegensatz zu Chromatic (nur Komponenten) und wie Percy (aber ohne die Komplexitaet) testet Delta-QA Ihre Seiten im realen Kontext. Kompositions-Bugs, Responsive-Probleme, Layout-Regressionen — alles ist sichtbar.
Komplementaer, nicht konkurrierend. Wenn Sie bereits Chromatic fuer Ihre Storybook-Komponenten verwenden, kann Delta-QA Ihre Abdeckung durch Tests der zusammengebauten Seiten ergaenzen. Wenn Sie Percy verwenden, kann Delta-QA als lokales Sicherheitsnetz fuer schnelle Tests dienen, ohne auf die Cloud zu warten. Das ist kein Nullsummenspiel.
Visual Testing ist zu wichtig, um durch ein Budget, einen Tech-Stack oder ein Kompetenzniveau eingeschraenkt zu werden. Jedes Team, das eine Benutzeroberflaeche produziert, verdient es, pruefen zu koennen, dass diese Oberflaeche keine Regressionen aufweist — einfach, lokal und ohne Einschraenkungen.
Delta-QA Kostenlos Ausprobieren →
FAQ
Funktioniert Chromatic ohne Storybook?
Nein. Chromatic ist ausschliesslich fuer Storybook konzipiert und funktioniert nicht ohne es. Wenn Sie Storybook nicht zur Komponentenentwicklung verwenden, ist Chromatic keine Option. Percy oder Delta-QA sind Alternativen, die unabhaengig von Storybook funktionieren.
Ist Percy besser als Chromatic fuer Visual Testing?
Das haengt von Ihrem Kontext ab. Wenn Sie Storybook verwenden und Ihr Schwerpunkt auf Komponententests liegt, bietet Chromatic ein ueberlegenes Erlebnis mit weniger Konfiguration. Wenn Sie komplette Seiten auf mehreren Browsern testen muessen, ist Percy besser geeignet. Beide haben komplementaere Staerken.
Was kosten Chromatic und Percy?
Beide bieten ein Free Tier mit begrenzter Anzahl monatlicher Captures. Darueber hinaus wird nutzungsbasiert abgerechnet. Die genauen Tarife haengen von Volumen und gewaehltem Plan ab — kontaktieren Sie die Vertriebsteams fuer genaue Angebote. Die Kosten koennen bei Projekten mit vielen Komponenten oder Seiten schnell steigen, insbesondere mit dem Multi-Browser-Multiplikator von Percy.
Kann man Chromatic und Percy zusammen verwenden?
Technisch ja. Sie koennten Chromatic fuer das Visual Testing von Komponenten ueber Storybook und Percy fuer das Visual Testing kompletter Seiten verwenden. In der Praxis treffen nur wenige Teams diese Wahl aufgrund der kumulierten Kosten und der Komplexitaet der Verwaltung zweier unterschiedlicher Visual Testing Tools.
Erkennt Chromatic Layout-Bugs zwischen Komponenten?
Nein. Chromatic testet Komponenten isoliert in Storybook. Probleme, die erst auftreten, wenn Komponenten in einer echten Seite zusammengebaut werden (CSS-Konflikte, z-index-Probleme, Ueberlaeufe), werden nicht erkannt. Dafuer brauchen Sie ein Tool, das komplette Seiten testet, wie Percy oder Delta-QA.
Gibt es eine kostenlose und lokale Alternative zu Chromatic und Percy?
Ja. Delta-QA ist ein No-Code Visual Testing Tool, das lokal auf Ihrem Rechner laeuft. Es ist kostenlos ohne Capture-Limit, erfordert keine Entwicklungskenntnisse und uebertraegt keinerlei Daten an eine Drittanbieter-Cloud. Es ist eine Alternative fuer Teams, die zugaengliches, souveraenes Visual Testing ohne wiederkehrende Kosten suchen.
Wie migriert man von Chromatic oder Percy zu Delta-QA?
Die Migration ist einfach, da Delta-QA nicht von Ihren bestehenden Tests abhaengt. Sie koennen Delta-QA parallel verwenden, ohne Ihre Chromatic- oder Percy-Konfiguration zu beruehren. Richten Sie Delta-QA auf Ihre Seiten, erstellen Sie Ihre ersten visuellen Referenzen und bewerten Sie die Ergebnisse. Sobald Sie zufrieden sind, koennen Sie Ihre Nutzung der Cloud-Tools reduzieren oder beenden.
Ihr Visual Testing verdient mehr als einen Capture-Zaehler. Probieren Sie die lokale Alternative.