Visuelle Regression: unbeabsichtigte Veränderung des Erscheinungsbilds einer Benutzeroberfläche (Layout, Farben, Typografie, Abstände, Ausrichtung), ausgelöst durch eine Codeänderung, ein Update einer Abhängigkeit oder eine Konfigurationsänderung, und nur durch einen automatisierten Vergleich zweier Zustände der Oberfläche erkennbar.
Lost Pixel hat sich einen interessanten Platz im Ökosystem der visuellen Tests erarbeitet. Open Source, spezialisiert auf Storybook- und Ladle-Komponenten, integrierbar in CI-Pipelines: ein Werkzeug, das direkt Front-End-Entwickler ansprach, die in der Welt der Komponenten leben.
Aktualisierung (10/2026). Am 22. April 2026 haben die Gründer von Lost Pixel die Einstellung des Produkts angekündigt: Das Team wechselt zu Figma. Das GitHub-Repository ist archiviert, und die letzte auf npm veröffentlichte Version (3.22.0) stammt vom November 2024. Der Code bleibt unter MIT-Lizenz verfügbar, wird aber nicht mehr weiterentwickelt. Dieser Vergleich behält seine Beschreibung des Werkzeugs, nützlich, falls Sie es noch einsetzen, und hilft Ihnen, den Nachfolger zu wählen.
Doch hier ist die Frage, die in der Evaluierung niemand früh genug stellt: Besteht Ihr Bedarf darin, isolierte Komponenten in Storybook zu testen, oder darin zu prüfen, dass Ihre Website unter realen Bedingungen visuell funktioniert?
Die Antwort auf diese Frage bestimmt, wohin Sie migrieren: zu einem anderen komponentenzentrierten Werkzeug oder zu einem Ansatz, der Ihre realen Seiten testet wie Delta-QA. Und diese Antwort hängt weniger von der Technologie ab als von der Zusammensetzung Ihres Teams und der Art Ihrer Probleme mit der visuellen Qualität.
Alle unsere Vergleiche, anhand überprüfbarer Kriterien: Alternativen und Vergleiche.
Visuelle Regressionen erkennen, ohne npm oder eine Konfigurationsdatei anzufassen. Delta-QA nutzt man ohne Code, mit einem kostenlosen Konto und ohne Kreditkarte. Delta-QA kostenlos testen →
Lost Pixel: der Spezialist für Komponenten
Lost Pixel ist ein Open-Source-Werkzeug für visuelle Regressionstests, inzwischen archiviert. Sein bevorzugtes Terrain: Storybook, Ladle, Histoire (die Entwicklungsumgebungen für UI-Komponenten) und statische Webseiten. Das Werkzeug erfasst Screenshots Ihrer Komponenten oder Seiten und vergleicht sie zwischen den Ausführungen, um visuelle Änderungen zu erkennen.
Die Storybook-Integration als Stärke
Wenn Sie mit Storybook entwickeln (und 2026 tut das eine Mehrheit der Front-End-Teams mit React, Vue oder Angular), hängt sich Lost Pixel direkt an Ihren Katalog von Stories. Jede Story wird automatisch zu einem visuellen Test. Man muss die zu testenden Seiten nicht von Hand auflisten oder Navigationsszenarien schreiben: Ihr Storybook-Katalog ist Ihre visuelle Testsuite.
Das ist ein klares, für einen Front-End-Entwickler sofort verständliches Wertversprechen. Sie pflegen Ihre Stories ohnehin für Dokumentation und Komponentenentwicklung. Lost Pixel macht daraus ohne zusätzlichen Aufwand visuelle Regressionstests.
Das Werkzeug unterstützt auch Ladle (die leichtgewichtige Alternative zu Storybook) und Histoire (für Vue), was den Großteil des Ökosystems der Komponentenentwicklung abdeckt. Und über Komponenten hinaus kann Lost Pixel im Modus „Page Shots“ vollständige Webseiten testen.
Ein Werkzeug von Entwicklern für Entwickler
Lost Pixel wird über npm installiert, in einer TypeScript- oder JavaScript-Konfigurationsdatei konfiguriert und über die Kommandozeile ausgeführt. Die CI-Integration ist für GitHub Actions dokumentiert, und die Lost-Pixel-Plattform (Cloud-Version) ergänzte einen Review- und Freigabe-Workflow für Baselines; wegen der angekündigten Einstellung sollten Sie für ein neues Projekt nicht mehr auf sie bauen.
Die Lernkurve ist für einen Entwickler vernünftig. Wenn Sie npm, Konfigurationsdateien und GitHub Actions kennen, sind Sie in weniger als einer Stunde einsatzbereit. Das ist einfacher als bei Applitools oder Percy: Lost Pixel überschüttet Sie nicht mit Optionen und Integrationen.
Aber diese Einfachheit für Entwickler ist für alle anderen eine Hürde. Wenn Sie kein Entwickler sind, ist es ungefähr so zugänglich wie ein U-Boot ohne Ausbildung zu steuern, ein npm-Paket zu installieren, eine Konfigurationsdatei zu schreiben und eine GitHub Action einzurichten.
Der Pixel-für-Pixel-Vergleich
Lost Pixel vergleicht Screenshots: Bilder, die von Ihren Komponenten oder Seiten aufgenommen wurden. Das ist der intuitivste und am weitesten verbreitete Ansatz im visuellen Test. Sie sehen buchstäblich, was sich geändert hat, über ein Bild gelegt.
Dieser Ansatz hat einen unbestreitbaren Vorzug: Er ist visuell. Der Bericht zeigt Ihnen die Unterschiede grafisch. Sie müssen kein CSS verstehen, um zu sehen, dass sich ein Button bewegt oder eine Farbe geändert hat.
Aber er hat auch eine strukturelle Schwäche: die Empfindlichkeit gegenüber Rendering-Rauschen. Anti-Aliasing-Unterschiede zwischen zwei Renderings, Schriftunterschiede zwischen lokaler Umgebung und CI, nicht synchronisierte Animationen: All das erzeugt False Positives. Lost Pixel bietet eine konfigurierbare Toleranzschwelle, aber diese Schwelle richtig zu kalibrieren, ist eine heikle Kunst: zu empfindlich, und Sie ertrinken in False Positives; zu tolerant, und echte Regressionen bleiben unbemerkt.
Delta-QA: der visuelle Test für das ganze Team
Delta-QA geht von einer einfachen Feststellung aus: Der visuelle Test sollte nicht Entwicklern vorbehalten sein. Die Personen, die am besten geeignet sind, die visuelle Qualität einer Oberfläche zu beurteilen (Designer, funktionale QA, Product Owner), werden oft vom Prozess ausgeschlossen, weil die vorhandenen Werkzeuge technische Kenntnisse verlangen.
Entwickler sind deshalb nicht ausgeschlossen: Wer seine Tests mit Playwright schreibt, hat inzwischen das SDK Vision, eine Zeile pro zu prüfender Seite, im selben Arbeitsbereich wie die ohne Code aufgezeichneten Szenarien.
Der Ansatz ohne Code
Mit Delta-QA legen Sie ein kostenloses Konto an. Sie geben die URL Ihrer Website ein. Sie navigieren ganz normal, wie ein Nutzer es täte. Jeder Schritt des Ablaufs wird zu einem Kontrollpunkt. Bei der nächsten Ausführung spielt Delta-QA den Ablauf in einem echten Browser erneut ab, vergleicht jede Seite mit ihrer Referenz und zeigt Ihnen, was sich geändert hat.
Kein npm. Keine Konfigurationsdatei. Keine Kommandozeile. Keine GitHub Actions. Wenn Sie einen Webbrowser bedienen können, können Sie Delta-QA bedienen.
Diese Zugänglichkeit ist kein Kompromiss bei der Leistungsfähigkeit des Werkzeugs: Es ist eine Designentscheidung, die den Kreis derer, die zur visuellen Qualität beitragen können, erheblich erweitert. Eine Designerin kann prüfen, ob ihre Vorgaben eingehalten werden. Ein funktionaler QA-Tester kann den visuellen Test in seine Validierungsroutine einbauen. Ein Product Owner kann sicherstellen, dass ein Deployment visuell nichts kaputt gemacht hat, bevor er grünes Licht gibt.
Der Elementvergleich statt Pixel
Wo Lost Pixel Bilder Pixel für Pixel vergleicht, vergleicht Delta-QA die Elemente der Seite und gibt die Änderung im Klartext wieder. Das ist ein grundlegender Unterschied, der die Natur der Ergebnisse verändert.
Meldet Delta-QA eine Änderung, zeigt es Ihnen kein farbiges Rechteck auf einem Bild. Es sagt Ihnen genau, was passiert ist: „Die font-size der Überschrift ist von 24px auf 20px gesunken“, „die Hintergrundfarbe des Headers hat sich von #FFFFFF auf #F8FAFC geändert“, „das Padding des Buttons ist von 16px auf 12px gesunken“.
Diese Informationen sind unmittelbar umsetzbar. Sie wissen, was zu korrigieren ist, in welcher CSS-Regel Sie suchen müssen und wie Sie prüfen, dass die Korrektur wirkt. Bei einem Bildvergleich wissen Sie, dass sich visuell etwas geändert hat: Herauszufinden, was genau, erfordert eine manuelle Untersuchung.
Dieser Ansatz begrenzt auch False Positives. Eine Variation des Anti-Aliasing oder auf Subpixel-Ebene ändert weder Farbe noch Größe noch Position eines Elements: Sie hat keinen Grund, gemeldet zu werden. Zu bewerten bleiben die Änderungen, die die Seite tatsächlich betreffen.
Die On-Premise-Option
Für Organisationen, die es verlangen, bietet Delta-QA ein On-Premise-Angebot, per Docker auf Ihrer Infrastruktur installiert: Keine Daten verlassen Ihr Netzwerk, keine Screenshots werden an einen entfernten Server gesendet.
Das SaaS bleibt der schnellste Einstieg: kostenloses Konto, ohne Kreditkarte. Das On-Premise-Angebot lässt sich mit einem kostenlosen POC über einen Monat evaluieren.
Die zentrale Debatte: isolierte Komponenten vs. reale Seiten
Die Wahl zwischen Lost Pixel und Delta-QA verbirgt eine tiefere Debatte darüber, was es wirklich heißt, eine Anwendung „visuell zu testen“.
Der Komponentenansatz: notwendig, aber nicht ausreichend
Lost Pixel testet über seine Storybook-Integration isolierte Komponenten. Jede Komponente wird einzeln gerendert, in einer kontrollierten Umgebung, mit definierten Props. Das ist hervorragend, um Regressionen auf Komponentenebene zu erkennen: ein Button, dessen border-radius sich geändert hat, ein Textfeld, dessen Placeholder verschwunden ist, ein Badge, dessen Farbe inkonsistent geworden ist.
Aber die folgenreichsten visuellen Bugs entstehen nicht auf der Ebene der isolierten Komponente. Sie entstehen, wenn sich die Komponenten in einer realen Seite zusammenfügen. Eine Navigationskomponente, die den Inhalt 50 Pixel nach unten schiebt. Ein Footer, der den Hauptinhalt auf Mobilgeräten überlagert. Ein Kartenraster, das bricht, wenn ein Text länger ist als vorgesehen. Ein Modal, das beim Ändern der Fenstergröße nicht mehr korrekt zentriert.
Diese visuellen Integrationsprobleme sind in Storybook unsichtbar, weil Storybook die Integration nicht zeigt: Es zeigt die einzelnen Bausteine. Es ist, als würde man jedes Zahnrad einer Uhr einzeln testen und daraus schließen, dass die Uhr funktioniert. Die Zahnräder können einzeln perfekt sein und im zusammengebauten Zustand nicht richtig ineinandergreifen.
Der Seitenansatz: die Realität des Nutzers
Delta-QA testet reale Seiten, in einem realen Browser, mit dem HTML, dem CSS, dem JavaScript und den realen Interaktionen Ihrer Anwendung. Wenn Delta-QA Ihnen sagt, dass Ihre Seite visuell korrekt ist, dann deshalb, weil sie es unter den Bedingungen ist, unter denen Ihre Nutzer sie sehen werden.
Es ist keine Abstraktion, keine isolierte Umgebung, kein Teilrendering. Es ist Ihre Seite als Ganzes, mit allen Interaktionen zwischen Komponenten, allen vererbten Stilen, allen CSS-Überschreibungen, allen Kaskadeneffekten.
Dieser Ansatz erfasst die visuellen Integrationsbugs, die Tests isolierter Komponenten strukturell verpassen. Er erfasst auch Probleme mit realen Daten: ein Name mit 40 Zeichen, der aus einem Feld läuft, ein fünfstelliger Preis, der ein Layout sprengt, ein fehlendes Bild, das ein Layout zusammenfallen lässt.
Open Source für Storybook ist mächtig, aber will konfiguriert werden. Delta-QA erkennt Ihre visuellen Regressionen ohne eine Zeile Konfiguration: kostenloses Konto, ohne Code und ohne Kreditkarte. Delta-QA kostenlos testen →
Was Lost Pixel gut konnte
Seine Stärken erklären, warum Teams es eingeführt haben und was anderswo wiedergefunden werden muss.
Die native Storybook-Integration. Wenn Sie einen Storybook-Katalog pflegen, macht Lost Pixel daraus mühelos eine visuelle Testsuite. Jede Story wird zu einem Test. Das ist ein außergewöhnliches Wertversprechen für komponentenzentrierte Teams.
Die CI/CD-Automatisierung. Lost Pixel fügt sich natürlich in eine GitHub-Actions-Pipeline ein. Die visuellen Tests werden bei jedem Pull Request automatisch ausgelöst, ohne menschliches Zutun. Die Abdeckung ist kontinuierlich und systematisch.
Die Kosten. Lost Pixel ist Open Source, und die selbst gehostete Version war kostenlos. Die Cloud-Plattform war kostenpflichtig, zu erschwinglichen Preisen; sie ist von der angekündigten Einstellung betroffen.
Die Granularität auf Komponentenebene. Jede Komponente einzeln zu testen, erlaubt es, Regressionen auf der feinsten Ebene zu lokalisieren. Ändert sich eine Komponente, wissen Sie sofort, welche, ohne in einer vollständigen Seite suchen zu müssen. Das ist ein effizienter Workflow für Entwickler, die Komponente für Komponente arbeiten.
Der Open-Source-Charakter. Der Code bleibt unter MIT-Lizenz les- und wiederverwendbar. Aber ein archiviertes Repository erhält keine Korrekturen mehr: Bei jedem Update von Storybook, Playwright oder Node.js liegt es an Ihnen, die Kompatibilität sicherzustellen.
Was Delta-QA zusätzlich bietet
Vollständige Zugänglichkeit. Keine technischen Voraussetzungen. Kein npm, keine CLI, keine Konfigurationsdatei, keine GitHub Actions. Wenn Sie auf einer Website navigieren können, können Sie Delta-QA nutzen.
Die Qualität der Ergebnisse. Jede Abweichung ist einem Seitenelement zugeordnet und im Klartext beschrieben. Sie wissen, was sich geändert hat: nicht nur „in diesem Rechteck hat sich visuell etwas geändert“.
Die Integrationsabdeckung. Delta-QA testet vollständige Seiten, nicht isolierte Komponenten. Es erfasst die visuellen Integrationsbugs, die Komponententests konstruktionsbedingt verpassen: Layoutprobleme, Stilkonflikte, Auswirkungen realer Daten auf das Layout.
Die Datensouveränität. Mit der On-Premise-Installation verlassen keine Daten Ihr Netzwerk: kein Cloud-Dienst eines Dritten, keine externe Übertragung. Für Unternehmen, die der DSGVO oder strengen Sicherheitsrichtlinien unterliegen, ist das ein struktureller Vorteil.
Die Zeit bis zum Start. Von der Kontoerstellung bis zum ersten aufgezeichneten Ablauf rechnen Sie bei Delta-QA mit einigen Minuten. Bei Lost Pixel mussten Sie das Paket installieren, die Konfiguration schreiben, ein funktionierendes Storybook haben und die CI einrichten: eher ein bis zwei Stunden für einen erfahrenen Entwickler.
Die Einbindung des ganzen Teams. Der visuelle Test ohne Code mit Delta-QA ist eine kollaborative Tätigkeit. Designer, QA, Product Owner und Entwickler können alle teilnehmen, die Ergebnisse lesen und Änderungen freigeben oder ablehnen.
Der typische Fall: warum Komponenten allein nicht genügen
Nehmen wir ein Szenario, das jedes Front-End-Team erlebt hat. Sie haben ein Design System mit einer Card-Komponente, die überall auf Ihrer Website verwendet wird. Jede Card hat einen Titel, ein Bild, eine Beschreibung und einen Button. In Storybook ist die Komponente perfekt: visuell getestet, alle Varianten abgedeckt.
Eines Tages ändert ein Entwickler das globale CSS der Website. Er ändert die globale Variable für die line-height, um die Lesbarkeit zu verbessern. Die Tests der Storybook-Komponenten laufen durch: Die globale line-height wirkt sich nicht auf die isolierten Stories aus, die ihren eigenen Kontext haben. In Produktion ist die Katalogseite mit 12 Cards im Raster komplett kaputt: Der höhere Text schiebt die Buttons, die Cards haben nicht mehr dieselbe Höhe, das Raster ist visuell inkonsistent.
Dieser Bug ist in Storybook unsichtbar und damit auch in einem Werkzeug, das nur Stories testet. In Delta-QA ist er sichtbar, weil Delta-QA die reale Seite mit angewandtem globalem CSS testet.
Das ist kein extremer oder konstruierter Fall. Es ist der Alltag der Front-End-Entwicklung: Komponenten leben in einem Ökosystem, und ihr visuelles Verhalten hängt von diesem Ökosystem ab. Komponenten isoliert zu testen ist notwendig, aber es ist eine notwendige, keine hinreichende Bedingung.
Das Urteil: was Lost Pixel ersetzen kann
Wenn Ihr Bedarf auf Storybook zentriert ist, suchen Sie ein gepflegtes Komponentenwerkzeug: Chromatic, herausgegeben vom Storybook-Team, ist das direkteste Beispiel (siehe unseren Vergleich Chromatic und Delta-QA und unsere Ansätze für visuelle Storybook-Tests ohne Chromatic). Lost Pixel bleibt so, wie es ist, lauffähig, aber ohne Korrekturen.
Wählen Sie Delta-QA, wenn Ihr Team nicht-technische Profile umfasst, die am visuellen Test teilnehmen müssen. Wenn Sie vollständige Seiten und Abläufe testen müssen, nicht nur isolierte Komponenten. Wenn Sie lesbare Ergebnisse wollen, die Seitenelementen zugeordnet sind. Wenn Datensouveränität ein Kriterium ist, mit dem On-Premise-Angebot. Wenn Sie in Minuten statt in Stunden einsatzbereit sein wollen.
Kombinieren Sie beide Ebenen, wenn Sie eine vollständige Abdeckung wollen: ein Komponentenwerkzeug in der CI-Pipeline, um die Grundbausteine zu überwachen, und Delta-QA, um vollständige Seiten zu testen, nicht-technische Profile einzubinden und die visuelle Integration vor jedem Release zu prüfen.
Bereit, Ihre realen Seiten zu testen, ohne etwas zu konfigurieren? Starten Sie Ihren ersten Vergleich mit Delta-QA, mit einem kostenlosen Konto und ohne Kreditkarte. Delta-QA kostenlos testen →
Häufige Fragen
Wird Lost Pixel noch gepflegt?
Nein. Am 22. April 2026 haben seine Gründer die Einstellung des Produkts und ihren Wechsel zu Figma angekündigt. Das GitHub-Repository ist archiviert, und die letzte npm-Version (3.22.0) stammt vom November 2024. Der Code bleibt unter MIT-Lizenz nutzbar, aber ohne Korrekturen oder Weiterentwicklung: Planen Sie eine Migration ein.
Kann Delta-QA Storybook-Komponenten testen wie Lost Pixel?
Delta-QA testet vollständige Webseiten, keine isolierten Komponenten in Storybook. Wenn Sie Ihr Storybook über einen Browser erreichen, können Sie Ihre Stories technisch mit Delta-QA testen, aber das ist nicht sein Hauptzweck. Die Stärke von Delta-QA ist es, die reale Integration Ihrer Komponenten in vollständigen Seiten zu testen: genau das, was Lost Pixel nicht abdeckt.
Erkennt Delta-QA dieselben Probleme wie der Pixelvergleich von Lost Pixel?
Delta-QA erkennt die sichtbaren Änderungen an Elementen: Farben, Größen, Abstände, Schriften, Positionen, Rahmen, und liefert Ihnen die Details jeder Änderung. Änderungen im Inneren eines geänderten Bildes oder ein abweichender Textinhalt werden von beiden Ansätzen dagegen unterschiedlich erkannt.
Braucht man Storybook, um Lost Pixel zu nutzen?
Nein, Lost Pixel konnte im Modus „Page Shots“ auch vollständige Webseiten testen. Aber seine Storybook-Integration war sein wichtigstes Wertversprechen. Für den Test von Seiten übernehmen andere gepflegte Werkzeuge, darunter Delta-QA.
Welches Werkzeug ist am schnellsten eingerichtet?
Delta-QA. Konto anlegen, Ihre Website öffnen, navigieren: Ihr erster Ablauf ist in wenigen Minuten aufgezeichnet. Lost Pixel erforderte npm, eine Konfigurationsdatei, ein funktionierendes Storybook (oder den Seitenmodus) und idealerweise eine eingerichtete CI-Pipeline: ein bis zwei Stunden für einen erfahrenen Entwickler.
Wie wechselt man von Lost Pixel zu Delta-QA?
Die Baselines von Lost Pixel sind Bilder, die zu seiner Pixel-Logik gehören: Sie lassen sich nicht übertragen. Sie zeichnen Ihre wichtigsten Abläufe in Delta-QA auf, das beim ersten Durchlauf eigene Referenzen erstellt. Für die Playwright-Tests Ihrer Entwickler fügt das SDK Vision eine Delta-QA-Prüfung mit einer Zeile pro Seite hinzu.