Zum Magazin
Visuelle Tests: Warum KI die beste Lösung ist
Das visuelle Erscheinungsbild ist der erste Eindruck, den Nutzer bei einem Besuch einer Webseite oder App haben – bevor sie Inhalte lesen oder mit Elementen interagieren. Tatsächlich hat TopTal herausgefunden, dass 94% der ersten Eindrücke designbezogen sind und die Beurteilung der Glaubwürdigkeit einer Website zu 75% auf ihrer Gesamtasthetik basiert. Selbst kleinste Abweichungen können daher Anmeldungen oder Conversions kosten.
Das visuelle Erscheinungsbild ist der erste Eindruck, den Nutzer bei einem Besuch einer Webseite oder App haben – bevor sie Inhalte lesen oder mit Elementen interagieren. Tatsächlich hat TopTal herausgefunden, dass 94% der ersten Eindrücke designbezogen sind und die Beurteilung der Glaubwürdigkeit einer Website zu 75% auf ihrer Gesamtasthetik basiert. Selbst kleinste Abweichungen können daher Anmeldungen oder Conversions kosten.
Blagovest Ouglechov
19.09.24
D as visuelle Erscheinungsbild ist der erste Eindruck, den Nutzer bei einem Besuch einer Webseite oder App haben – bevor sie Inhalte lesen oder mit Elementen interagieren.
Einleitung
Die meisten Unternehmen führen bereits funktionelle und Leistungstests durch, aber diese garantieren nicht automatisch ein makelloses visuelles Erscheinungsbild. Obwohl visuelle Tests in den täglichen Testprozess schwierig zu integrieren scheinen, sind sie essenziell, um einen schlechten ersten Eindruck zu vermeiden.
Warum sind visuelle Tests wichtig?
Visuelle Tests helfen dabei, visuelle Regressionen zwischen Releases aufzudecken. Durch den Vergleich jedes neuen Releases mit einer Baseline können SDETs Regressionen erkennen, die zu einer schlechten Benutzeroberfläche (UI) oder Benutzererfahrung (UX) führen könnten – wie Layoutprobleme, inkonsistente Gestaltung oder defekte Bilder – bevor sie von Nutzern gesehen werden.
Dieser Artikel untersucht die gängigsten Methoden für die Durchführung visueller Regressionstests und wie Sie die beste Option auswählen.
Manuelle Tests
Verschiedene Methoden für visuelle Regressionstests:
Manuelle Tests:
Bei manuellen visuellen Regressionstests suchen menschliche QA-Teams manuell nach sichtbaren Fehlern in einer Benutzeroberfläche (UI). Ein QA-Teammitglied könnte beispielsweise aktuelle und neue Releases nebeneinander aufrufen und jede Seite manuell durchscrollen. Außerdem müssten sie diese Tests möglicherweise auf mehreren Geräten durchführen, um genaue Ergebnisse zu erhalten.
Vorteile:
- Keine Implementierung erforderlich.
Nachteile:
- Extrem zeitaufwändig und kostspielig, da es Zeit aus dem Tag eines QA-Mitarbeiters erfordert, die Tests ordnungsgemäß durchzuführen.
- Es ist unmöglich, eine vollständige Abdeckung für jede Veröffentlichung zu gewährleisten, da Websites und Apps häufig aktualisiert werden.
- Ungenau, da QA-Mitarbeiter nicht garantieren können, dass sie jeden möglichen visuellen Fehler entdeckt haben.
Fazit: Manuelle Tests sind in der heutigen schnelllebigen Welt einfach nicht praktikabel.
DOM-basierte Tests
DOM-basierte Tests:
DOM-basierte Tests verwenden das Document Object Model (DOM), um visuelle Diskrepanzen zu kennzeichnen. Sie machen einen Snapshot des DOM für eine Baseline und vergleichen ihn mit einem neuen Release. Da sie auf Codevergleichen basieren, sind DOM-basierte visuelle Tests sehr schnell und effizient. Allerdings spiegeln nicht alle visuellen Regressionen im DOM wider.
DOM-basierte Tests überprüfen lediglich, ob die richtigen Stile auf ein Element angewendet wurden. Wenn beispielsweise eine Klasse '.überschrift' korrekt für das `h1`-Tag eines Abschnitts angezeigt wird, würde sie jedoch keine zu klein gewählte Schriftgröße für diese Klasse erkennen.
Vorteile:
- Vergleicht viele kritische UI-Elemente ohne gleichzeitig falsche Positive zu zählen.
Nachteile:
- Nicht alle Elemente der UI werden verglichen (z. B. iFrames).
- identische DOM-Strukturen können unterschiedlich gerendert werden.
- Unterschiedliche DOM-Strukturen können ähnlich aussehen.
- Sie sehen nicht genau, was das Auge sieht.
Fazit: DOM-basierte Tests sind sehr effizient, garantieren aber keine genauen Ergebnisse und verpassen andere UI-Elemente.
Pixel-für-Pixel-Tests
Pixel-für-Pixel-Tests:
Pixel-für-Pixel-Tests machen Screenshots einer Baseline und eines neuen Releases und vergleichen sie pixelgenau, um visuelle Regressionen aufzudecken. Da sie analysieren, was Benutzer tatsächlich sehen, können sie Details bis hin zur Schriftgröße, Farbe und zum Layout erkennen. Sie benötigen jedoch mehr Rechenleistung und können falsche Positive (erwartete Änderungen, die über Releases hinweg auftreten) auslösen.
Obwohl einige pixelbasierte Screenshot-Vergleichstools typischerweise einen Schwellenwertprozentsatz verwenden, um Ergebnisse zu filtern, ist dieser Ansatz etwas willkürlich, da einige kleine Änderungen die Benutzererfahrung erheblich beeinflussen können und umgekehrt.
Vorteile:
- Pixel-für-Pixel-Tests sind besser als das menschliche Auge und können Ihnen helfen, die Qualität besser zu gewährleisten.
Nachteile:
- Das Erkennen jeder Änderung führt oft zu mehr falschen Positiven.
- Erhöht Ihre Arbeitsbelastung und die Zeit, die Sie für die Überprüfung Ihrer Arbeit benötigen.
Fazit: Pixel-für-Pixel-Tests liefern die genauesten Ergebnisse, können Ihnen jedoch Zeit und Mühe kosten, um falsche Positive zu überprüfen.
KI-basierte Tests
KI-basierte Tests:
KI-basierte Tests nutzen Machine Learning und Künstliche Intelligenz (KI), um visuelle Diskrepanzen zu identifizieren. Zum Beispiel könnten sie neuronale Netze verwenden, um die visuellen Elemente einer Website oder App zu lernen und sie mit einer Baseline-Version zu vergleichen. Im Gegensatz zu Pixel-für-Pixel-Tests werden jedoch nicht unbedingt alle Änderungen markiert, die keine Bedeutung haben (z. B. Textunterschiede).
Vorteile:
- Spart Zeit und erleichtert die Überprüfung, indem nur relevante Änderungen hervorgehoben werden.
- Ermöglicht mehr Testcoverage durch weniger False Negative.
Fazit: KI-basierte Tests bieten eine ideale Kombination aus Genauigkeit und Diskretion, um Diskrepanzen aufzudecken, die wichtig sind.
Warum Sie sich für KI entscheiden sollten
Warum Sie sich für KI entscheiden sollten:
Manuelle Tests: Manuelle Tests werden schnell unpraktisch, wenn sich eine Anwendung komplexer gestaltet und Releases häufiger werden. KI-basierte Tests sind viel skalierbarer.
DOM-basierte Tests: DOM-basierte Tests vergleichen DOMs effizient, verpassen aber wichtige visuelle Elemente. KI-basierte Tests gehen weiter, indem sie betrachten, was Benutzer auf dem Bildschirm sehen.
Pixel-für-Pixel-Tests: Pixel-für-Pixel-Tests erkennen jede visuelle Differenz, erfordern jedoch die Sortierung zahlreicher irrelevanter Änderungen. KI-basierte Tests können helfen, Änderungen zu filtern, die keine Bedeutung haben.
Wie Sie KI-basierte Tests implementieren
Wie Sie KI-basierte Tests implementieren
VisualTest macht es einfach, KI-basierte visuelle Tests zu implementieren, ohne manuell Screenshots zu machen oder sich mit Machine Learning Modellen auseinanderzusetzen. So können Sie sich darauf konzentrieren, Ihre Website oder Anwendung zu entwickeln, ohne sich um die Wartung der Qualitätssicherung oder das Hinzufügen zeitaufwändiger Schritte zu Ihren bestehenden QA-Prozessen kümmern – und sparen so sowohl Zeit als auch Geld.
Indem Sie den VisualTest-Code in Ihre bestehenden Tests einfügen, können Sie automatisch mit dem Vergleichen von Baseline-Bildern beginnen, während Sie gleichzeitig Ihren Überprüfungscode reduzieren.
Sie können die Ausgaben anzeigen, indem Sie auf die Links in den Protokollen klicken oder sich bei der VisualTest-Plattform anmelden, um Änderungen zu akzeptieren oder abzulehnen. Und dank der Ausführung auf Cloud-Basis müssen Sie sich keine Sorgen machen, etwas zu installieren, das mit Ihren bestehenden Testsuiten kollidiert.
VisualTest integriert sich auch mit BitBar, um Tests auf realen Geräten und Browsern einfach durchzuführen – für die genauesten QA-Ergebnisse. So können Sie potenzielle Probleme auf Benutzergeräten genauer identifizieren. Und gleichzeitig können Sie die Cloud-Geräte von BitBar verwenden, um Fehler zu reproduzieren und zu beheben.
Fazit
Fazit
Visuelle Tests sind unerlässlich, um ein robustes Benutzererlebnis zu gewährleisten und kostspielige Fehler zu vermeiden. Während es viele Möglichkeiten gibt, visuelle Tests zu implementieren, bieten KI-basierte Tests eine ideale Kombination aus Genauigkeit und Diskretion – die Markierung der wichtigsten Probleme. Sie sind die beste Möglichkeit, ein robustes Benutzererlebnis zu gewährleisten, ohne Zeit und Geld für falsche Positive zu verschwenden.
