Visual Testing (oder visuelles Testen) ist eine automatisierte Prüfmethode, die Screenshots einer Weboberfläche mit Referenzbildern vergleicht, um jede grafische Regression zu erkennen — einen verschobenen Button, eine geänderte Schrift, ein Element, das ein anderes überlappt.
Cypress ist ein großartiges Tool. Wir schätzen es für seine Geschwindigkeit, seine intuitive API, seine riesige Community. Aber hier der Ausgangspunkt: Cypress macht kein natives Visual Testing. Im Gegensatz zu Playwright, das toHaveScreenshot() direkt integriert, zwingt Cypress Sie, mit Drittanbieter-Plugins zu basteln, um auch nur den einfachsten Screenshot-Vergleich zu erhalten.
Und das ist ein ernsthafteres Problem, als es scheint.
Dieser Leitfaden behandelt die bestehenden Ansätze zum Hinzufügen von Visual Testing zu Cypress, ihre realen Grenzen und warum ein radikal anderer Ansatz Ihre Aufmerksamkeit verdient.
Cypress prüft Ihre Klicks, nicht das Aussehen Ihrer Seiten. Schließen Sie diese Lücke mit Delta-QA: Visual Testing ohne eine Zeile Code, kostenlos auf dem Desktop und ohne Konto. Delta-QA kostenlos testen →
Warum Cypress kein integriertes Visual Testing hat
Das ist die Frage, die niemand laut genug stellt. Playwright hat es getan. Warum nicht Cypress?
Die offizielle Antwort ist diplomatisch: Cypress konzentriert sich auf funktionales Testing. Die Realität ist nuancierter. Visual Testing ist ein komplexes Problem — Baseline-Management, Toleranz für Rendering-Unterschiede, Antialiasing, Animationen — und Cypress hat sich entschieden, das Plugin-Ökosystem damit zu beauftragen.
Das Ergebnis? Eine Fragmentierung. Jedes Plugin macht die Dinge auf seine eigene Weise, mit eigenen Konventionen, eigenen Bugs und eigenem Risiko der Einstellung. Sie wählen nicht eine offizielle und unterstützte Lösung. Sie setzen auf ein Open-Source-Projekt, das von einer Handvoll Contributor gepflegt wird — oder auf einen kostenpflichtigen Cloud-Dienst.
Für Teams, die ihre gesamte Testsuite auf Cypress aufgebaut haben, ist das ein echtes Dilemma. Nur wegen Visual Testing zu Playwright migrieren ist unrealistisch. Ein fragiles Plugin hinzufügen auch nicht. Schauen wir, was es gibt.
Ansatz 1: cypress-image-snapshot
Das bekannteste Plugin im Ökosystem. Es basiert auf jest-image-snapshot (selbst basierend auf pixelmatch) für den Pixel-für-Pixel-Vergleich von Screenshots.
Wie es funktioniert
Die Installation erfordert einige Eingriffe in der Cypress-Konfiguration — nichts Unüberwindliches, aber genug Dateien zum Anfassen, dass sich leicht ein Fehler einschleichen kann. Wenn Sie die genauen Befehle wollen, bitten Sie Ihren bevorzugten KI-Assistenten, die Konfiguration zu generieren: Er liebt das und langweilt sich sonst zwischen zwei Haikus über Machine Learning.
Einmal eingerichtet ist das Prinzip einfach: Sie fügen einen benutzerdefinierten Befehl zu Ihren Tests hinzu, der den Bildschirm erfasst und mit einem im Repository gespeicherten Referenzbild vergleicht. Die erste Ausführung erstellt die Baseline. Die folgenden erkennen Abweichungen.
Die Grenzen, die man Ihnen nicht sagt
Das Wartungsproblem. Dieses Plugin hat längere Inaktivitätsperioden erlebt. Zum Zeitpunkt, an dem Sie dies lesen, prüfen Sie das Datum des letzten Commits auf GitHub. Wenn es mehr als sechs Monate zurückliegt, sollten Sie sich Fragen stellen.
Die False Positives. Der Pixel-für-Pixel-Vergleich ist brutal. Ein leicht anderes Font-Rendering zwischen Ihrem Rechner und der CI? False Positive. Ein Antialiasing, das je nach GPU variiert? False Positive. Sie verbringen mehr Zeit mit dem Kalibrieren der Toleranzschwellen als mit dem Schreiben von Tests.
Keine Review-Oberfläche. Wenn ein Test fehlschlägt, erhalten Sie ein Diff-Bild in einem Ordner. Kein Dashboard, kein Genehmigungsworkflow. Sie öffnen das Bild in Ihrem Dateimanager und kneifen die Augen zusammen, um den Unterschied zu finden. Das ist handwerklich.
Baselines in Git. Hunderte PNG-Bilder in Ihrem Repository. Merge-Konflikte bei Binärdateien sind ein Albtraum. Die Git-History bläht sich auf. Manche Teams enden bei Git LFS, was eine weitere Komplexitätsebene hinzufügt.
Ansatz 2: Percy (BrowserStack)
Percy ist ein Cloud-basierter Visual Testing Dienst, der sich über ein SDK in Cypress integriert. Der Ansatz ist grundlegend anders: Statt lokal zu vergleichen, sendet Percy das DOM und die Assets an seine Server, rendert die Seite in echten Browsern und vergleicht die Ergebnisse in einem Web-Dashboard.
Wie es funktioniert
Sie installieren das Percy-SDK für Cypress, fügen einen Aufruf in Ihren Tests hinzu, um einen Snapshot zu erfassen, und Percy erledigt den Rest in der Cloud. Der Review-Workflow findet in Percys Weboberfläche statt: Sie sehen die Unterschiede, Sie genehmigen oder lehnen ab.
Für die genaue Konfiguration kann Ihr Desktop-KI den Snippet in drei Sekunden liefern — das ist sein Moment des Ruhms, lassen Sie ihn glänzen, statt aus einer Dokumentation zu kopieren, die in sechs Monaten veraltet sein wird.
Die Grenzen
Die Kosten. Percy ist ein kostenpflichtiger Dienst. Der kostenlose Plan existiert, ist aber in der Anzahl der monatlichen Snapshots begrenzt. Für ein Team, das ernsthaft testet, steigen die Kosten schnell. Wir detaillieren hier keine Preistabellen — sie ändern sich regelmäßig — aber rechnen Sie mit einem nicht unerheblichen Budgetposten.
Die Cloud-Abhängigkeit. Ihre Snapshots werden auf Percy-Servern gerendert. Wenn der Dienst ausfällt, laufen Ihre Tests nicht mehr. Wenn BrowserStack (das Percy übernommen hat) Preise oder Bedingungen ändert, haben Sie keinen Hebel.
Die CI-Latenz. Das DOM an einen externen Dienst senden, auf das Rendering warten, das Ergebnis zurückholen — das fügt Ihrer Pipeline Zeit hinzu. Bei zehn Tests nicht dramatisch, bei fünfhundert spürbar.
Das Vendor Lock-in. Sobald all Ihre Baselines bei Percy liegen, bedeutet eine Migration anderswohin, alles von Grund auf neu zu erstellen. Das ist die klassische Falle proprietärer Cloud-Dienste.
Ansatz 3: Happo
Happo ist eine weniger bekannte Alternative zu Percy mit ähnlicher Positionierung: ein Cloud-Dienst, der Screenshots Ihrer Komponenten erfasst und vergleicht.
Die Integration mit Cypress existiert, ist aber weniger ausgereift als die von Percy. Das Produkt ist solide, das Team seriös, aber die Nutzerbasis ist kleiner. Weniger Community-Dokumentation, weniger Stack-Overflow-Antworten, weniger Erfahrungsberichte.
Dieselben Kosten- und Cloud-Abhängigkeitsprobleme gelten.
Ansatz 4: Applitools Eyes
Applitools treibt das Konzept weiter mit seiner KI-basierten Vergleichstechnologie (ihr "Visual AI"). Statt Pixel-für-Pixel-Vergleich versucht der Algorithmus, "visuell signifikante" Unterschiede zu erkennen und kleinere Rendering-Variationen zu ignorieren.
Das klingt auf dem Papier verlockend. In der Praxis ist das Produkt leistungsstark aber komplex. Die Konfiguration ist nicht trivial, die Preisgestaltung intransparent, und die Abhängigkeit von einem proprietären Dienst ist total. Für eine detaillierte Analyse lesen Sie unsere Applitools-Detailseite.
Visuelle Regressionen erkennen, ohne erst eine Pipeline aufzusetzen. Probieren Sie es no-code in der gratis Desktop-Version von Delta-QA — lokal und ganz ohne Anmeldung. Delta-QA kostenlos testen →
Das Grundproblem: Visual Testing als Add-on
Alle diese Ansätze teilen einen strukturellen Mangel: Sie behandeln Visual Testing als Ergänzung zum funktionalen Testing.
Sie haben Ihre Cypress-Suite. Sie pfropfen ein Plugin oder SDK drauf. Sie fügen Aufrufe in Ihre bestehenden Tests ein. Visual Testing wird zum Parasiten des funktionalen Testing — abhängig von derselben Infrastruktur, denselben Selektoren, demselben Code.
Wenn Cypress eine Major-Version aktualisiert, bricht Ihr Visual Testing Plugin. Wenn Ihr funktionaler Test den Ablauf ändert, wird Ihre visuelle Baseline obsolet. Wenn ein Entwickler einen Selektor ändert, fallen funktionaler UND visueller Test.
Das ist ein von Haus aus fragiles Modell.
Visual Testing verdient es, ein Bürger erster Klasse zu sein, kein blinder Passagier in der funktionalen Suite. Es beantwortet eine andere Frage ("Sieht das korrekt aus?" vs "Funktioniert das?") und sollte eigene Tools, eigene Workflows und eigene Baselines haben.
Was Ihre Cypress-Tests nicht sehen
Ein Cypress-Test prüft, ob der Button existiert und die richtige Aktion auslöst. Er prüft nicht, ob der Button sichtbar, korrekt ausgerichtet, in der richtigen Farbe und mit dem richtigen Padding ist — auf allen Breakpoints.
Visuelle Bugs sind tückisch, weil sie alle funktionalen Tests bestehen. Das Formular funktioniert perfekt — aber das Label überlappt das Input-Feld auf Mobile. Das Dropdown-Menü öffnet sich korrekt — aber es erscheint hinter einem anderen Element. Der angezeigte Preis ist korrekt — aber die Währung wird weiß auf weißem Hintergrund angezeigt.
Diese Bugs erreichen die Produktion, weil niemand sie systematisch sucht. Und sie kosten: an Glaubwürdigkeit, an Conversions, an Support-Tickets.
Die Alternative: Visual Testing vom Code trennen
Was wäre, wenn Visual Testing Cypress gar nicht brauchen würde?
Das ist die Position, die wir bei Delta-QA vertreten, und wir stehen voll dahinter. In unserem Vergleich der kostenlosen visuellen Testtools zeigt sich derselbe Befund. Visual Testing braucht keinen Code. Es braucht keine Plugins. Es braucht keine CSS-Selektoren und keine Webpack-Konfiguration.
Delta-QA funktioniert anders — es folgt einem No-Code-Ansatz. Sie navigieren auf Ihrer Website, zeichnen einen Ablauf per Point-and-Click auf, und das Tool erfasst die Referenz-Screenshots. Bei jeder folgenden Ausführung vergleicht es und zeigt Ihnen die Unterschiede in einer dedizierten Oberfläche. Kein Code. Kein Plugin. Keine Abhängigkeit von Cypress, Playwright oder irgendetwas anderem.
Das ist kein Kompromiss. Es ist eine andere Philosophie. Funktionales Testing und Visual Testing sind zwei verschiedene Disziplinen, die jeweils eigene Tools verdienen. Ihre Cypress-Suite prüft weiterhin, dass alles funktioniert. Delta-QA prüft, dass alles korrekt aussieht. Beide ergänzen sich, ohne sich gegenseitig im Weg zu stehen.
Für QA-Teams, die nicht programmieren, ist das eine Befreiung. Für Entwickler ist es gewonnene Zeit. Für alle bedeutet es weniger False Positives und einen Review-Workflow, der Sinn ergibt.
FAQ
Kann Cypress Visual Testing ohne Plugin machen?
Nein. Cypress kann Screenshots mit cy.screenshot() erstellen, bietet aber keinen nativen Vergleichsmechanismus. Sie erhalten Bilder, aber der Vergleich mit Baselines, die Verwaltung von Toleranzschwellen und der Genehmigungsworkflow müssen über ein Plugin oder einen externen Dienst hinzugefügt werden.
Welches ist das beste Cypress-Plugin für Visual Testing?
Es gibt keine universelle Antwort. cypress-image-snapshot ist das beliebteste Open-Source-Plugin, leidet aber unter Wartungs- und False-Positive-Problemen. Percy bietet die beste Benutzererfahrung, ist aber ein kostenpflichtiger Dienst. Das "Beste" hängt von Ihrem Budget, Ihrer False-Positive-Toleranz und Ihrer Bereitschaft ab, zusätzlichen Code zu pflegen.
Ist Percy mit Cypress kostenlos?
Percy bietet einen kostenlosen Plan mit einer begrenzten Anzahl monatlicher Snapshots. Für seriösen professionellen Einsatz brauchen Sie einen kostenpflichtigen Plan. Die Tarife ändern sich regelmäßig, besuchen Sie deren Website für aktuelle Konditionen.
Kann man Cypress Visual Testing in CI/CD machen?
Ja, alle beschriebenen Ansätze funktionieren in CI/CD. Aber hier multiplizieren sich die Probleme: Rendering-Unterschiede zwischen Umgebungen, Baseline-Management, Ausführungszeit. CI verstärkt jede Schwachstelle Ihres Visual Testing Setups.
Warum nicht einfach Playwright für Visual Testing verwenden?
Wenn Sie ein neues Projekt starten, ist Playwright mit seinem nativen toHaveScreenshot() tatsächlich die bessere Wahl für code-basiertes Visual Testing. Aber wenn Sie bereits eine umfangreiche Cypress-Suite haben, ist Migration unrealistisch. Und selbst mit Playwright bleiben Sie im Paradigma des code-basierten Visual Testing, mit seinen Wartungs- und Zugänglichkeitsgrenzen.
Kann Delta-QA Cypress-Tests ersetzen?
Nein, und das ist nicht das Ziel. Cypress brilliert beim funktionalen Testing: Prüfen, dass Interaktionen funktionieren, APIs korrekt antworten, die Geschäftslogik eingehalten wird. Delta-QA konzentriert sich auf Visual Testing: Prüfen, dass die Oberfläche korrekt aussieht. Beide Tools sind komplementär, nicht konkurrierend.
Wie lange dauert es, Visual Testing in Cypress zu konfigurieren?
Mit cypress-image-snapshot rechnen Sie ein bis zwei Stunden für Installation und Basiskonfiguration, dann mehrere Tage zum Kalibrieren der Toleranzschwellen und Stabilisieren der Tests gegen False Positives. Mit Percy ist die technische Konfiguration schneller, aber das organisatorische Setup (Snapshot-Verwaltung, Review-Workflow, CI-Integration) braucht Zeit. Mit Delta-QA ist der erste Visual Test in wenigen Minuten einsatzbereit.
Fazit
Cypress ist ein exzellentes funktionales Testing Tool. Wir nutzen es, wir empfehlen es für das, was es gut macht. Aber zu behaupten, es würde Visual Testing zufriedenstellend abdecken, ist Selbstbetrug.
Plugins existieren. Sie funktionieren, mehr oder weniger. Aber sie sind fragil, teilweise schlecht gewartet, teuer bei anderen, und sie alle fügen Komplexität an einer Stelle hinzu, die sie nicht braucht.
Visual Testing verdient mehr als ein Transplantat. Es verdient ein dediziertes Tool, das für genau dieses Problem konzipiert ist und dem gesamten Team zugänglich ist — Entwicklern wie nicht-technischen QA-Mitarbeitern.
Bereit, Ihren Seiten das Visual Testing zu geben, das Cypress fehlt? Starten Sie Ihren ersten Vergleich mit Delta-QA — kostenlos und ohne Anmeldung. Delta-QA kostenlos testen →