Delta-QA vs Chromatic: Isolierte Komponenten oder Ganze Seiten?
Visueller Komponententest (Component Visual Testing): Automatisierte Überprüfungsmethode, bei der UI-Komponenten isoliert gerendert werden — außerhalb des Kontexts der vollständigen Seite — und ihr Erscheinungsbild mit einem validierten Referenzzustand verglichen wird, um visuelle Regressionen auf Design-System-Ebene zu erkennen, bevor sie sich auf Produktionsseiten ausbreiten.
Es gibt eine Frage, die Frontend-Teams sorgfältig vermeiden: „Unsere Komponenten werden in Storybook visuell getestet, aber werden unsere Seiten in Produktion auch getestet?" Die Antwort ist in der Mehrzahl der Fälle: Nein. Und diese Lücke ist teuer, denn die visuellen Bugs, die Ihre Benutzer erreichen, leben nicht in Storybook — sie leben auf den echten Seiten, mit echten Daten, echten Interaktionen und echten Komponentenkombinationen.
Chromatic ist ein hervorragendes Tool zum Testen isolierter Komponenten. Delta-QA ist zum Testen ganzer Seiten konzipiert. Sie sind keine Konkurrenten im strengen Sinne — es sind Tools, die dasselbe Problem aus verschiedenen Höhen betrachten. Aber wenn Sie nur eines wählen müssen oder verstehen möchten, was jedes bietet, kommt dieser Vergleich direkt zum Punkt.
Chromatic: Der Wächter des Design Systems
Chromatic, entwickelt von den Storybook-Maintainern, ist die natürliche Erweiterung des Storybook-Ökosystems für visuelles Testing. Das Konzept ist brillant in seiner Logik: Sie haben Ihre Komponenten bereits in Storybook mit verschiedenen Zuständen (Stories) definiert. Chromatic nimmt bei jedem Commit einen Screenshot jeder Story auf, vergleicht mit der Baseline und meldet Änderungen.
Das ist ein perfekt integrierter Workflow für Teams, die mit Design Systems arbeiten. Ihr Designer definiert einen Button mit vier Varianten (primary, secondary, disabled, loading). Ihr Entwickler implementiert diese Varianten und erstellt die entsprechenden Stories. Chromatic überprüft bei jeder Code-Änderung, dass die vier Varianten nicht visuell regressiert sind. Wenn sich der border-radius des Buttons versehentlich ändert, erkennt Chromatic das, bevor jemand eine Code-Review durchführt.
Das Tool bietet auch eine UI-Review-Funktion, die es Designern und Entwicklern ermöglicht, Änderungen visuell vor dem Merge zu validieren. Das ist im Wesentlichen eine visuelle Code-Review, und es ist wirklich nützlich, um die Konsistenz eines Design Systems zu wahren.
Der blinde Fleck von Chromatic: Die reale Welt
Hier ist das Problem, das Chromatic nicht löst — nicht wegen mangelnder Qualität, sondern aufgrund einer architektonischen Entscheidung: Isolierte Komponenten verhalten sich nicht wie zusammengesetzte Seiten.
Ein isoliert in Storybook getesteter Button wird in einer kontrollierten Umgebung gerendert: ein fester Viewport, keine Nachbarn, kein geerbter CSS-Kontext, keine dynamischen Daten, keine Interaktionen mit anderen Komponenten. Genau das macht den Test auf Komponentenebene zuverlässig. Aber es macht ihn auch blind für Assemblierungsprobleme.
Was bricht in der Produktion visuell? Selten eine isolierte Komponente. Was bricht, ist die Kombination. Ein Header-Komponent, der eine Navigation überlappt, weil sich ein z-index geändert hat. Ein Produktraster, das sich verschiebt, weil ein Karten-Komponent einen zusätzlichen margin erhalten hat. Ein Formular, das seinen Container überläuft, weil ein Label in einer anderen Sprache länger ist. Ein Footer, der auf den Hauptinhalt aufsteigt, weil ein Zwischenabschnitt seine Mindesthöhe verloren hat.
Diese Bugs sind in Storybook unsichtbar. Jeder Komponent für sich ist visuell korrekt. Es ist ihre Zusammensetzung, die Probleme verursacht. Und Chromatic testet konstruktionsbedingt nicht die Zusammensetzung — es testet die Bausteine, nicht das Gebäude.
Delta-QA testet das Gebäude. Das Tool vergleicht vollständige Seiten, wie sie in einem echten Browser gerendert werden, mit all ihren zusammengesetzten Komponenten, geerbten Stilen, Interaktionen und Daten. Es ist der Test der Realität, nicht der Test des Architektenplans.
Die Kluft zwischen Storybook und der Produktion
Es gibt eine strukturelle Diskrepanz zwischen dem, was Storybook zeigt, und dem, was die Produktion anzeigt, und diese Diskrepanz wird selten diskutiert.
Die Daten. In Storybook erhalten Ihre Komponenten Mock-Daten — sorgfältig ausgewählt, um repräsentativ zu sein und in das Design zu passen. In der Produktion erhalten sie echte Daten — ein Produktname mit 150 Zeichen, der nicht vorgesehen war, ein Bild mit ungewöhnlichem Seitenverhältnis, ein Preis mit variabler Dezimalstellenzahl, eine Kategorieliste, die drei Zeilen statt einer füllt. Diese echten Daten erzeugen visuelle Situationen, die Storybook nie reproduziert.
Die geerbten Stile. In Storybook wird jeder Komponent in einer relativ sauberen CSS-Sandbox gerendert. In der Produktion erben Komponenten globale Stile, CSS-Resets, Themes, kontextuelle Überschreibungen und manchmal Drittanbieter-Stile (Analytics-Widgets, Chatbots, Cookie-Banner). Ein Komponent kann in Storybook perfekt und in der Produktion visuell kaputt sein, wegen eines Style-Konflikts, den keine Story reproduziert.
Die dynamischen Zustände. Storybook testet vordefinierte Zustände — diejenigen, die der Entwickler für dokumentationswürdig hielt. In der Produktion durchlaufen Komponenten Zwischenzustände, nicht vorgesehene Fehlerzustände, Zustandskombinationen, die niemand getestet hat. Das Formular mit laufender Validierung, der Button in einem sich verändernden Flex-Container, die Produktkarte mit einer Promotion, die ein Badge hinzufügt — jede Kombination ist ein visueller Test, den Storybook nicht abdeckt.
Delta-QA testet, was Ihre Benutzer tatsächlich sehen. Nicht das, was Storybook verspricht.
No-Code vs Storybook: Die Frage der Zielgruppe
Chromatic richtet sich an Frontend-Entwickler, die mit Storybook arbeiten. Das ist eine legitime und wichtige Zielgruppe. Aber es ist eine eingeschränkte Zielgruppe.
Um Chromatic zu verwenden, müssen Sie ein konfiguriertes Storybook-Projekt haben. Sie müssen wissen, wie man Stories schreibt. Sie müssen das Konzept von Baselines und visuellen Snapshots verstehen. Sie müssen sich in einem Workflow wohlfühlen, der auf Pull Requests und Continuous Integration basiert. Zusammenfassend: Sie müssen Frontend-Entwickler sein.
Ihr QA-Manager, der eine Seite vor dem Release überprüfen möchte? Er kann Chromatic nicht direkt verwenden. Ihr Product Owner, der ein visuelles Problem bei der Abnahme bemerkt? Er kann keinen Test starten. Ihr Designer, der das Mockup mit dem Produktionsergebnis vergleichen möchte? Er hat ohne Entwicklerhilfe keinen Zugang zum Chromatic-Workflow.
Delta-QA öffnet visuelles Testing für das gesamte Team. Kein Storybook erforderlich. Kein Code. Keine CI/CD-Pipeline zu verstehen. Sie geben zwei URLs an, starten den Vergleich und lesen den Bericht. Der Designer vergleicht sein Mockup mit der Produktion. Der QA vergleicht Staging mit Produktion. Der Product Owner vergleicht die aktuelle Version mit der vorherigen. Jeder ist autonom.
Das ist kein technologischer Anti-Intellektualismus. Es ist die Anerkennung, dass visuelle Qualität jeden betrifft und die Tools diese Realität widerspiegeln sollten.
Komponenten vs Seiten: Zwei komplementäre Testebenen
Statt Chromatic und Delta-QA gegeneinander zu stellen, ist es gerechter, sie als zwei Ebenen einer vollständigen visuellen Teststrategie zu positionieren.
Komponentenebene (Chromatic): Überprüfen, dass jeder Baustein des Design Systems seinen Spezifikationen visuell entspricht. Das ist der Unit-Test des Visuellen. Er erkennt Regressionen auf der granularsten Ebene, so früh wie möglich im Entwicklungszyklus (vor dem Merge).
Seitenebene (Delta-QA): Überprüfen, dass die zusammengesetzten Seiten mit echten Daten und kaskadierenden Stilen visuell korrekt sind. Das ist der Integrationstest des Visuellen. Er erkennt Assemblierungsprobleme, Style-Konflikte und Regressionen, die nur im Kontext der vollständigen Seite existieren.
Ein Team, das beides macht, hat eine bemerkenswerte visuelle Abdeckung. Komponentenregressionen werden früh von Chromatic erkannt. Seitenregressionen werden von Delta-QA erkannt. Das Sicherheitsnetz ist doppelt.
Aber wenn Sie nur eines wählen können — aus Budget-, Zeit- oder Ressourcengründen — wird die Frage: Welche Testebene schützt Ihre Benutzer am besten? Und die Antwort ist eindeutig die Seitenebene. Denn Ihre Benutzer sehen keine Komponenten. Sie sehen Seiten.
Das Wirtschaftsmodell: Snapshots vs Freiheit
Chromatic berechnet nach der Anzahl der Snapshots pro Monat. Ein Snapshot = eine Story, ein Browser, eine Auflösung. Mit 200 Komponenten à 3 Stories auf 2 Browsern sind das 1.200 Snapshots pro Build. Zwanzig Builds pro Tag (ein aktives Team), das sind 720.000 pro Monat.
Der kostenlose Plan bietet 5.000 monatliche Snapshots — ausreichend für ein kleines Projekt, in wenigen Tagen bei einem mittelgroßen Design System aufgebraucht. Die kostenpflichtigen Pläne skalieren mit dem Volumen. Und das erzeugt dieselbe Spannung wie bei Percy: Die Testabdeckung ist umgekehrt proportional zum Budget. Teams reduzieren am Ende die getesteten Stories oder die Build-Frequenz, um in ihrem Kontingent zu bleiben. Ein Qualitätstool, das Sie dazu anregt, Ihre Testabdeckung zu reduzieren — geben Sie zu, das Paradox hat seinen Reiz.
Delta-QA ist kostenlos. Kein Snapshot-Kontingent, keine Seitenbegrenzung, keine Frequenzbeschränkung. Sie testen so viele Seiten wie nötig, so oft wie nötig. Die Qualität Ihrer visuellen Abdeckung hängt nur von Ihrem Willen ab, es richtig zu machen, nicht von Ihrer Zahlungsfähigkeit.
Was Chromatic kann, was Delta-QA nicht kann
Transparenz erfordert die Anerkennung der einzigartigen Stärken von Chromatic.
Die kollaborative UI-Review. Der Chromatic-Workflow ermöglicht Entwicklern und Designern, Komponentenänderungen im Rahmen eines Pull Requests visuell zu validieren. Das ist ein integrierter Review-Prozess, der in Delta-QA kein exaktes Äquivalent hat.
Der Test aller Zustände eines Komponenten. Wenn Ihr Button 12 Varianten hat (Größe, Farbe, Zustand, Theme), testet Chromatic alle systematisch. Diese 12 Varianten auf Seitenebene zu testen würde erfordern, 12 verschiedene Seiten zu finden, auf denen sie erscheinen — was nicht immer möglich ist.
Die native Storybook-Integration. Chromatic wird von den Storybook-Machern entwickelt. Die Integration ist so tief wie möglich: automatische Erkennung neuer Stories, minimale Konfiguration, reibungsloser Workflow. Das ist ein realer Vorteil, wenn Storybook das Zentrum Ihres UI-Entwicklungsworkflows ist.
Die lebende visuelle Dokumentation. Chromatic pflegt eine visuelle Geschichte jedes Komponenten über die Zeit. Das ist eine lebende Design-Bibliothek, die die Entwicklung jedes Komponenten zeigt — eine wertvolle Funktion für Design Systems.
Was Delta-QA bietet, das Chromatic nicht abdeckt
Der Test der Realität. Seiten in Produktion, mit echten Daten, echten geerbten Stilen, echten Interaktionen zwischen Komponenten. Nicht die saubere Idealisierung von Storybook, sondern die Welt, wie sie ist.
Die universelle Zugänglichkeit. Jedes Teammitglied kann einen visuellen Test starten. Kein Entwickler-Dasein nötig, keine Storybook-Kenntnisse, kein Zugang zur CI-Pipeline erforderlich. Die Demokratisierung des visuellen Tests.
Die technologische Unabhängigkeit. Delta-QA funktioniert unabhängig von Ihrem Frontend-Stack. React, Vue, Angular, Svelte, WordPress, Shopify, statische Website, Legacy-Anwendung in jQuery — egal. Wenn es in einem Browser angezeigt wird, testet Delta-QA es. Chromatic erfordert Storybook, das ein modernes JavaScript-Framework erfordert.
Die Datensouveränität. Lokale Ausführung, keine Daten an Drittserver gesendet. Für interne Anwendungen, sensible Daten und Organisationen mit strengen Vorschriften.
Null Kosten. Keine Snapshot-Berechnung, kein Plan zu wählen, keine Kreditkarte anzugeben. Kostenlos im wörtlichsten Sinne des Wortes.
Das ideale Szenario: Beide zusammen
Wenn Ihr Team bereits Storybook verwendet und das Budget für Chromatic hat, ist die Kombination beider Tools die robusteste Strategie.
Chromatic überwacht Ihre Komponenten auf Design-System-Ebene. Jede Stiländerung, jede Variante, jeder Zustand wird visuell überprüft. Regressionen werden zum Zeitpunkt der Entwicklung erkannt, bevor der Code den Hauptzweig erreicht.
Delta-QA überwacht Ihre Seiten in Produktion (oder Staging). Assemblierungsprobleme, Style-Konflikte, Bugs, die nur im realen Kontext auftreten, werden erkannt, bevor die Benutzer sie sehen.
Zusammen ist das eine doppelte Abdeckung, die praktisch nichts durchlässt. Und da Delta-QA kostenlos ist, bleiben die Gesamtkosten dieser Strategie die Kosten von Chromatic allein.
Das pragmatische Szenario: Ein einziges Tool
Wenn Sie nur ein Tool wählen müssen — weil das Budget begrenzt, das Team klein ist oder Sie einfach anfangen wollen — lautet die Frage: Was schützt Ihre Benutzer am besten?
Ihre Benutzer sehen nicht Ihre Storybook-Komponenten. Sie sehen Ihre Seiten. Sie interagieren mit Ihren Seiten. Sie bilden sich ihre Meinung über Ihr Produkt beim Betrachten Ihrer Seiten. Ein Komponent, der in Storybook perfekt, aber auf der zusammengesetzten Seite kaputt ist, ist aus Benutzersicht ein kaputter Komponent.
Delta-QA testet, was Ihre Benutzer sehen. So einfach ist das.
FAQ
Funktioniert Chromatic ohne Storybook?
Nein. Chromatic ist speziell für Storybook konzipiert und hängt von Stories ab, um zu definieren, was visuell getestet werden soll. Wenn Ihr Projekt Storybook nicht verwendet, ist Chromatic nicht einsetzbar. Delta-QA funktioniert unabhängig von jedem Framework oder Entwicklungstool — es testet Webseiten, unabhängig vom Stack, der sie erzeugt.
Reicht das Testen von Komponenten in Storybook aus, um visuelle Qualität zu garantieren?
Nein. Isoliert getestete Komponenten reproduzieren nicht die realen Bedingungen einer zusammengesetzten Seite: Stil-Vererbung, dynamische Daten, Interaktionen zwischen Komponenten, Drittanbieter-Stile. Chromatic überprüft, dass Ihre Bausteine korrekt sind. Delta-QA überprüft, dass die Zusammensetzung korrekt ist. Beide Ebenen sind für eine vollständige Abdeckung erforderlich.
Erkennt Chromatic Responsive-Probleme?
Ja, im Rahmen dessen, was Storybook zeigt. Sie können Ihre Stories für verschiedene Viewport-Größen konfigurieren, und Chromatic testet sie. Aber Responsive-Probleme, die spezifisch für eine zusammengesetzte Seite sind (ein Element, das in Kombination mit anderen überläuft, ein Layout, das mit real langen Daten bricht), werden nicht erkannt. Delta-QA kann Seiten bei verschiedenen Auflösungen in ihrem realen Kontext vergleichen.
Reicht der kostenlose Plan von Chromatic für ein kleines Projekt?
Der kostenlose Plan von Chromatic bietet 5.000 Snapshots pro Monat, was ein kleines Design System mit gelegentlichen Builds abdeckt. Sobald die Komponentenanzahl oder Build-Frequenz steigt, wird das Kontingent schnell erreicht. Ein Projekt mit 100 Komponenten, 3 Stories pro Komponent und 2 täglichen Builds verbraucht etwa 18.000 Snapshots pro Monat. Delta-QA hat keinerlei Volumenbegrenzung.
Kann man Delta-QA zum Testen isolierter Komponenten verwenden?
Delta-QA ist für vollständige Seiten optimiert, nicht für isolierte Komponenten. Wenn Sie eine Umgebung haben, in der Ihre Komponenten einzeln auf zugänglichen URLs gerendert werden (wie ein deployed Storybook), können Sie technisch Delta-QA zum Vergleichen verwenden. Aber das ist nicht sein Hauptanwendungsfall. Für den Test isolierter Komponenten bleibt Chromatic das Referenztool.
Wie handhabt Delta-QA Design Systems, wenn nicht auf Komponentenebene?
Delta-QA überprüft die visuelle Konsistenz Ihres Design Systems dort, wo es am meisten zählt: auf den Seiten, die es verwenden. Wenn eine Änderung in Ihrem Design System das Layout von zehn Seiten zerstört, erkennt Delta-QA das direkt. Das ist ein End-to-End-Test des Design Systems, komplementär zum Unit-Test von Chromatic.
Chromatic und Delta-QA sind keine Gegner — sie sind zwei Seiten derselben Medaille. Das eine schützt Ihre Komponenten, das andere Ihre Seiten. Wenn Sie beides haben können, nehmen Sie beides. Wenn Sie wählen müssen, wählen Sie das, was schützt, was Ihre Benutzer tatsächlich sehen.