Visuelle QA-Checkliste: Was Sie vor jedem Release prüfen sollten

Ein Release ohne visuelle QA auszuliefern ist ein Glücksspiel. Funktionale Tests bestätigen, dass Features funktionieren, aber sie bestätigen nicht, dass die Oberfläche korrekt aussieht. Ein Button kann jeden Integrationstest bestehen und trotzdem ein Formularfeld auf mobilem Safari überlagern. Eine Überschrift kann in Englisch perfekt dargestellt werden und in der deutschen Übersetzung ihren Container sprengen.

Diese Checkliste behandelt die visuellen Prüfungen, die jedes Web-Team vor einem Produktions-Release durchführen sollte. Verwenden Sie sie direkt oder passen Sie sie an Ihren Tech-Stack und Ihre Zielgruppe an.

Warum eine visuelle Checkliste wichtig ist

Visuelle Fehler sind besonders schädlich, weil sie für Nutzer sofort sichtbar sind. Ein falsch ausgerichtetes Element oder ein defektes Layout untergräbt das Vertrauen auf eine Weise, die eine langsame API-Antwort nicht kann. Dennoch ist visuelle QA oft der am wenigsten strukturierte Teil des Release-Prozesses — durchgeführt ohne einheitliche Kriterien, von verschiedenen Personen, ohne gemeinsamen Standard.

Eine schriftliche Checkliste löst dieses Problem, indem sie visuelle QA wiederholbar und messbar macht. Jeder im Team weiß, was „visuell geprüft" bedeutet, und keine Prüfkategorie wird übersprungen, weil jemand sie vergessen hat.

Layout und Abstände

Layout-Probleme sind die häufigsten visuellen Regressionen. Prüfen Sie diese systematisch:

Seitenstruktur ist intakt — Header, Hauptinhalt, Sidebar (falls vorhanden) und Footer werden in der korrekten Reihenfolge mit den erwarteten Abständen dargestellt.
Grid- und Flexbox-Layouts umbrechen korrekt — überprüfen Sie bei Desktop-, Tablet- und Mobilbreiten. Achten Sie auf unerwartetes Spalten-Umbrechen oder Elemente, die über ihre Container hinausragen.
Abstände zwischen Abschnitten sind konsistent — Margins und Padding entsprechen der Design-Spezifikation. Achten Sie auf Abschnitte, die zu nah beieinander oder zu weit auseinander liegen.
Keine überlappenden Elemente — prüfen Sie, dass absolut positionierte Elemente (Tooltips, Dropdowns, Modals) keine Inhalte überlagern oder über den Viewport hinausragen.
Sticky- und Fixed-Elemente verhalten sich korrekt — Sticky-Header und Fixed-Footer sollten beim Scrollen an ihrer Position bleiben, ohne Inhalte dahinter zu verdecken.

Für automatisierte Layout-Prüfung über Breakpoints hinweg lesen Sie unseren Leitfaden zu Cross-Browser-Testing-Workflows.

Typografie und Inhalte

Probleme beim Text-Rendering sind subtil, beeinträchtigen aber Lesbarkeit und Professionalität:

Überschriften folgen der korrekten Hierarchie — H1-, H2-, H3-Größen und -Gewichtungen entsprechen dem Design-System.
Fließtext ist lesbar — Schriftgröße, Zeilenhöhe und Kontrast erfüllen die Barrierefreiheitsstandards. Testen Sie mit echtem Inhalt, nicht mit Platzhaltertext.
Kein abgeschnittener oder überlaufender Text — lange Überschriften, übersetzte Zeichenketten und dynamischer Inhalt passen in ihre Container. Prüfen Sie besonders mit längeren Sprachen wie Deutsch.
Links sind visuell erkennbar — Unterstreichung, Farbe oder andere Gestaltung macht Links identifizierbar, ohne sich ausschließlich auf Farbe zu verlassen.
Codeblöcke und vorformatierter Text werden korrekt dargestellt — Monospace-Schriften laden, Syntax-Highlighting funktioniert und horizontaler Scroll erscheint bei langen Zeilen.
Listen werden mit korrekten Markern dargestellt — Geordnete Listen zeigen Nummern, ungeordnete Listen zeigen Aufzählungszeichen, und Verschachtelung ist visuell klar.

Responsives Verhalten

Responsive-Fehler machen einen überproportionalen Anteil der von Nutzern gemeldeten visuellen Probleme aus:

Mobil-Layout (375 px Breite) — überprüfen Sie die gesamte Seite bei typischer Mobilbreite. Navigation klappt zum Hamburger-Menü um, Bilder skalieren und Inhalte stapeln sich vertikal.
Tablet-Layout (768 px Breite) — hier verstecken sich die meisten Responsive-Fehler. Zweispaltige Layouts sollten sauber übergehen und Touch-Ziele angemessen dimensioniert sein.
Desktop-Layout (1440 px Breite) — die primäre Desktop-Erfahrung. Mehrspaltige Layouts werden korrekt angezeigt und maximale Inhaltsbreiten werden eingehalten.
Breiter Desktop (1920 px+ Breite) — Inhalte sollten sich nicht strecken, um ultrabreite Bildschirme zu füllen. Prüfen Sie, ob Maximalbreiten und Zentrierung korrekt funktionieren.
Orientierungswechsel — auf Mobilgeräten und Tablets sollte der Wechsel zwischen Hoch- und Querformat das Layout nicht beschädigen.
Zoom-Verhalten — Browser-Zoom auf 150 % und 200 % sollte keine überlappenden oder versteckten Inhalte verursachen.

Cross-Browser-Rendering

Verschiedene Browser-Engines interpretieren CSS unterschiedlich. Prüfen Sie mindestens diese Kombinationen:

Chrome Desktop — Ihr Referenz-Rendering. Die meisten Nutzer werden diese Version sehen.
Firefox Desktop — erkennt Gecko-spezifische Probleme mit Flexbox-Gap, Schriftmetriken und benutzerdefinierten Eigenschaften.
Safari Desktop — WebKit hat einzigartiges Verhalten bei backdrop-filter, position-sticky und flex-wrap.
Safari Mobil (iOS) — alle iOS-Browser nutzen WebKit. Viewport-Handling, Safe-Area-Insets und Scroll-Verhalten unterscheiden sich vom Desktop.
Chrome Mobil (Android) — überprüfen Sie Touch-Ziele, Viewport-Meta-Verhalten und mobilspezifisches Styling.

Sie müssen nicht jeden Browser für jede Seite prüfen. Priorisieren Sie nach Traffic-Daten: Decken Sie die Kombinationen ab, die 90 % Ihrer Zielgruppe repräsentieren. Mehr zum Aufbau einer Browser-Matrix finden Sie in unserem Leitfaden zum visuellen Regressionstesting.

Interaktive Zustände

Interaktive Elemente haben mehrere visuelle Zustände. Jeder einzelne braucht eine Überprüfung:

Buttons — Standard-, Hover-, Fokus-, Aktiv-, Deaktiviert- und Ladezustände werden alle korrekt und visuell unterscheidbar dargestellt.
Formulareingaben — leere, fokussierte, ausgefüllte, fehlerhafte und deaktivierte Zustände. Prüfen Sie, ob Fehlermeldungen an der richtigen Position erscheinen und das Layout nicht verschieben.
Navigation — aktiver Seitenindikator, Hover-Effekte bei Links, Dropdown-Menüs öffnen und schließen an der korrekten Position.
Modals und Dialoge — öffnen sich flüssig, sind auf allen Bildschirmgrößen korrekt zentriert und zeigen einen sichtbaren Hintergrund. Der Schließen-Button ist zugänglich.
Tooltips und Popovers — erscheinen in der korrekten Position relativ zu ihrem Auslöser. Werden nicht von overflow-hidden-Containern oder dem Viewport-Rand abgeschnitten.
Ladezustände — Skeleton-Screens, Spinner und Fortschrittsbalken werden während des Datenladens korrekt angezeigt.

Bilder und Medien

Visuelle Medien erfordern eigene Prüfungen:

Bilder laden und werden angezeigt — keine defekten Bildsymbole. Alle Bilder haben passende Alt-Texte für die Barrierefreiheit.
Bilder sind korrekt dimensioniert — keine Verzerrung oder unerwartetes Beschneiden. Seitenverhältnisse werden beibehalten.
Responsive Bilder liefern passende Größen — Mobilgeräte laden keine Desktop-großen Bilder herunter.
Video-Einbettungen funktionieren — Abspielen-Buttons werden angezeigt, Seitenverhältnisse sind korrekt und Einbettungen ragen nicht über ihre Container hinaus.
Icons werden korrekt dargestellt — SVG-Icons werden in der richtigen Größe und Farbe angezeigt. Icon-Fonts laden, ohne Fallback-Zeichen anzuzeigen.

Barrierefreiheit und Farbe

Visuelle QA und Barrierefreiheit überschneiden sich erheblich:

Farbkontrast erfüllt WCAG AA — Text und interaktive Elemente haben ausreichenden Kontrast zu ihren Hintergründen. Prüfen Sie sowohl helle als auch dunkle Themes, falls zutreffend.
Fokusindikatoren sind sichtbar — Tastaturnavigation sollte einen deutlichen Fokusring auf allen interaktiven Elementen zeigen.
Dark Mode wird korrekt dargestellt — wenn Ihre Anwendung einen Dark Mode unterstützt, überprüfen Sie, ob alle Komponenten, Bilder und Texte in beiden Themes lesbar sind.
Keine Information nur durch Farbe vermittelt — Fehlerzustände, Statusanzeigen und Pflichtfelder verwenden zusätzlich zur Farbe auch Icons oder Text.

Performance-bezogene visuelle Prüfungen

Performance-Probleme können sich als visuelle Probleme manifestieren:

Kein Layout-Shift beim Laden — Inhalte springen nicht, wenn Schriften, Bilder oder Skripte laden. Dies wird durch den Cumulative Layout Shift (CLS) gemessen.
Web-Fonts laden vor dem Rendering — kein Aufblitzen von ungestyltem Text (FOUT) oder unsichtbarem Text (FOIT) beim Seitenladen.
Above-the-Fold-Inhalte laden schnell — der sichtbare Bereich der Seite sollte innerhalb von 1–2 Sekunden bei guter Verbindung erscheinen.

Pre-Release-Prüfungs-Workflow

Nutzen Sie diesen Workflow, um die Checkliste konsistent durchzuführen:

Auf Staging deployen — prüfen Sie gegen eine Umgebung, die der Produktion so nahe wie möglich kommt.
Automatisierte Screenshot-Tests ausführen — erfassen Sie Baselines über Ihre Browser- und Geräte-Matrix. Unter unserem CI/CD-Automatisierungsleitfaden finden Sie Einrichtungsanleitungen.
Automatisierte Diffs prüfen — klassifizieren Sie jeden Diff als beabsichtigt, Regression oder Rauschen.
Manuelle Stichproben durchführen — automatisierte Tests decken statisches Rendering ab. Prüfen Sie interaktive Zustände, Animationen und Randfälle manuell.
Ergebnisse dokumentieren — halten Sie fest, welche Prüfungen bestanden haben, welche fehlgeschlagen sind und was behoben wurde. Dies schafft einen Audit-Trail für künftige Releases.
Freigeben oder blockieren — wenn alle Prüfungen bestehen, geben Sie das Release frei. Wenn kritische visuelle Fehler verbleiben, blockieren Sie, bis diese behoben sind.

Die Checkliste an Ihr Team anpassen

Diese Checkliste ist bewusst umfassend. Passen Sie sie für Ihr Team an, basierend auf:

Ihrem Tech-Stack — wenn Sie keinen Dark Mode unterstützen, entfernen Sie diese Prüfungen. Wenn Sie ein Design-System nutzen, fügen Sie komponentenspezifische Prüfungen hinzu.
Ihrer Zielgruppe — wenn 95 % Ihres Traffics von Chrome kommt, reduzieren Sie den Cross-Browser-Umfang und erhöhen Sie das Mobile-Testing.
Ihrer Risikotoleranz — umsatzkritische Anwendungen brauchen strengere Prüfungen. Interne Tools können mit einem schlankeren Prozess auskommen.

Der Schlüssel ist Konsistenz. Eine kürzere Checkliste, die bei jedem Release durchlaufen wird, ist wertvoller als eine umfassende, die unter Zeitdruck übersprungen wird.

Weiter mit ScanU

Automatisiertes Screenshot-Testing übernimmt die zeitaufwendigsten Teile dieser Checkliste: Layout-Prüfung, Cross-Browser-Rendering und Responsive-Breakpoint-Checks. ScanU erstellt Screenshots über Browser und Geräte hinweg, damit sich Ihr Team auf interaktive Zustände und Randfälle konzentrieren kann. Entdecken Sie die Planoptionen unter Pricing, erfahren Sie mehr über die Plattform unter Features und finden Sie Antworten auf häufige Fragen in den FAQ.