7 automatisierte Tools für visuelle Tests für Sie

Studien deuten darauf hin, dass 90 % der Nutzer:innen eine App, Website oder einen Online-Warenkorb verlassen, weil visuelle Fehler auftreten. Das liegt schlicht und einfach daran, dass visuelle Mängel das Erste sind, was Ihre Nutzer:innen sehen, wenn sie Ihre Website oder App besuchen.

Was das Aussehen der Website beeinträchtigt, ist das Testen Ihrer Website auf das Vorhandensein von Fehlern (Regressionen). Wenn Sie Ergänzungen vornehmen oder Stile anpassen und die Änderungen auf die Website übertragen, kann dies unbeabsichtigt auch das Layout der Seite beeinträchtigen. So kann beispielsweise eine Änderung am Footer-Layout die Mega-Menüs in einem Unterbereich einer Website beschädigen. Hier kommt das visuelle Regressionstesten ins Spiel, ein Verfahren, das hilft, diese Unterschiede zu erkennen und zwei Sätze von Screenshots zu vergleichen, um den Fehler zu finden. Der Druck, schnellere Ergebnisse zu erzielen und Release-Zyklen zu verkürzen, lässt jedoch wenig Zeit zum Testen, aber keinen Raum für Fehler. Glücklicherweise gibt es eine Alternative: Automatisierte visuelle Tests.

Automatisierte visuelle Tests sind eine schnelle und zuverlässige Methode, die für Geräte, Browser, Betriebssysteme und Formfaktoren entwickelt wurde, um die Funktionen automatisch zu validieren.

Lassen Sie uns das Konzept, die Best Practices der Branche und die Tools besprechen, die zu Schlüsselfaktoren für den Erfolg von Websites und Apps werden können.

Automatisierte visuelle Tests verstehen

Das automatisierte visuelle Testsystem muss die visuellen Aspekte und Elemente der Benutzeroberfläche einer Anwendung validieren. Es konzentriert sich auf die Korrektheit von Inhalten und Layout, die in Bezug auf Größe und Form korrekt auf dem Bildschirm positioniert sind. Es wird auch auf Überlappungen, das Ausblenden von Elementen oder visuell nicht übereinstimmende Inhalte sowie auf die korrekte Schriftart, Farbe und das korrekte Bild geprüft.

Bei der Durchführung visueller Tests haben Softwareanbieter zwei Möglichkeiten: Entweder sie testen manuell oder sie entwickeln ein internes Tool, um Ad-hoc-Tests zu automatisieren. Manuelle Tests sind ein langsamer und teurer Prozess, der zudem fehleranfällig und für eine große Matrix unzureichend ist. Die Ad-hoc-Automatisierung erfordert hingegen die manuelle Pflege einer Baseline von erwarteten Bildschirmbildern für die verschiedenen Auflösungen, Browser und Geräte, die bei der Weiterentwicklung der Anwendung ständig aktualisiert werden müssen. Beim Testen kommt es darauf an, zu bestimmen, was und wie viel automatisiert werden soll. Zu viel kann aus Wartungssicht lästig werden, und zu wenig kann die Qualität der betreffenden Website beeinträchtigen.

Was können wir also von einem praktischen Tool zur Automatisierung visueller Tests erwarten?

Kognitive Fähigkeiten

Die Testwerkzeuge müssen den Inhalt, das Layout oder den Darstellungsfehler automatisch kategorisieren, um den Fehler zu lokalisieren, der bestimmte UI-Elemente verursacht. Das Tool sollte in der Lage sein, jede erkannte Änderung hervorzuheben und nur einmal zu beheben.

Baseline-Management

Die Fähigkeit, erwartete UI-Bilder für jede einzelne Ausführungsumgebung der Anwendung (Browser, Gerät, Bildschirmformfaktor) automatisch zu sammeln und zu partitionieren. So unterscheidet sich beispielsweise das Aussehen der iOS-Anwendung auf dem iPhone erheblich von dem auf dem iPad. Daher sollte die Ausführung automatisch auf andere Umgebungen übertragen werden, um die Wartung zu vereinfachen.

Footprint

Das Tool muss sowohl das erwartete Baseline-Bild als auch das tatsächliche Bild, das den Fehler zeigt, speichern. Es sollte über genügend Speicherplatz verfügen, um extreme Bildkomprimierungstechniken anzuwenden, damit es zusammen mit dem Fehlereintrag dauerhaft vorhanden sein kann, ohne zu einer Explosion zu führen.

Skalierbarkeit

Die Größe des Unternehmens oder Projekts sollte die Anzahl der parallel laufenden Tests nicht behindern, und es sollte ein nahtloser Prozess vorhanden sein, um alle Anforderungen zu erfüllen.

Herausforderungen bei automatisierten visuellen Tests

Der grundlegende Unterschied zwischen Menschen und Maschinen beim visuellen Testen besteht darin, dass sie Pixel unterschiedlich wahrnehmen. Was einem Menschen völlig identisch erscheint, hat für das System einen 1:1-Algorithmus. Dies kann zwischen Browserversionen, zugrunde liegenden Hardwareänderungen auf Ihrer Cloud-Plattform und ähnlichen Situationen auftreten. Folglich kann sich auch die Art und Weise unterscheiden, wie Bilder, Schlagschatten usw. gerendert werden.

Robustere Dienste kombinieren jedoch maschinelles Lernen und Heuristik, um dieses Problem zu lösen, indem das System darauf trainiert wird, zwischen akzeptablen und nicht akzeptablen Abweichungen zu unterscheiden. Auch wenn die Maschine eine andere Grafikkarte hat als der Testserver und andere Entwickler, werden sie darauf trainiert, so zu "sehen" wie wir und über die Pixelebene hinauszugehen. Ein weiteres Problem ist die Geschwindigkeit der Tests. Oft werden die Tests mit leichteren Unit-Tests verglichen, die keinen vollständigen Browser erfordern.

Wenn Ihre Zeit und Mühe aufgebraucht sind und Sie die Lücke in den Testprozessen erlebt haben, probieren Sie ein praktisches Tool zur Automatisierung visueller Tests aus dieser Liste aus:

7 Tools für Sie

Selenium

Selenium ist eine Open-Source-Plattform, die mehrere Programmiersprachen unterstützt, darunter Java, Python, C#, PHP, JavaScript, Ruby und Perl. Das Tool kann direkt mit einem Browser kommunizieren, um das Testen zu automatisieren, und bietet ein begrenztes, aber nützliches Prototyping-Plug-in, Selenium IDE, das Aktionen aufzeichnen und für zukünftige Referenzzwecke beim Testen verwenden kann.

Vorteile

• Das Tool ist seit über einem Jahrzehnt auf dem Markt und hat eine massive Unterstützung und eine aktive Community aufgebaut.
• Es ermöglicht das gleichzeitige Ausführen von Tests auf verschiedenen Browsern auf verschiedenen Rechnern, wodurch die Testzeit für wertvolle und große Projekte reduziert wird.
• Sie können die Fähigkeiten nutzen, um mobile Web-, Hybrid- oder native Apps mit Appium mit derselben API wie Selenium WebDriver zu testen.

Nachteile

• Wenn Sie ein Anfänger sind, könnten Sie Probleme beim Schreiben von Skripten haben, die technische Fähigkeiten erfordern.
• Es gibt keine Möglichkeit zu prüfen, ob Bilder korrekt angezeigt oder geladen werden. Entwickler müssen dies manuell oder mit einer anderen Bibliothek tun.

Gemini

Gemini wurde für die Ausführung über einen Selenium- oder PhantomJS-Server entwickelt und bietet eine Schnittstelle, die nicht allzu kompliziert ist. Es bietet "Testsuiten", die organisierte Codes bereitstellen und den gesamten Testprozess für Sie vereinfachen können. Es verfügt über eine sehr gute Dokumentation und ist vollständig in NodeJS geschrieben, was eine eigene Konfigurationsdatei erfordert.

WebdriverCSS

Ähnlich wie Gemini ist WebdriverCSS für seine Funktionalität auf Selenium angewiesen. Als Teil des WebdriverIO-Ökosystems profitiert es von den Vorteilen des Hauptframeworks und bietet eine bessere Erfahrung. Es kann auch gut mit anderer Software wie Mocha, Jasmine und Cucumber.js integriert werden.

Watir

Obwohl es auf Web-Apps beschränkt ist und nur unter Windows funktioniert, wird Watir von Giganten wie Slack und Yahoo! verwendet. Es ist in der Lage, einfache und leicht zu wartende Tests auszuführen, da es Open Source und von grundlegender Natur ist.

Vorteile

• Eines der wenigen Tools, das das Schreiben von Skripten in der Ruby-Programmiersprache ermöglicht. Wenn Ruby jedoch nicht Ihre bevorzugte Sprache ist, können Sie auch mit Java oder .NET skripten.

Nachteile

• Da es einfach und simpel ist, stellt es auch einen Nachteil dar, da es nur in Kombination mit anderen Tools verwendet werden kann.
• Die Watir-Community ist kleiner, was dazu führt, dass es schwieriger ist, Leute zu finden, die Inhalte für Watir entwickeln, dokumentieren und auf der Website beitragen.

Nightwatch

Nightwatch.js ist eine End-to-End-Testlösung für browserbasierte Apps und Websites und ist in Node.js geschrieben. Es ist eine einfache, aber leistungsstarke Syntax, mit der Sie schnell Tests schreiben können, indem Sie nur Javascript (Node.js) und CSS- oder Xpath-Selektoren verwenden. Eine flexible Befehls- und Assertion-Framework ermöglicht es Entwicklern, Ihre anwendungsspezifischen Befehle und Assertions einfach zu implementieren. Es führt die Tests in verschiedenen Kombinationen aus, einschließlich sequenziell und parallel nach Gruppe, Tags oder einzeln.

Storybook

Storybook ist ein einfach zu bedienendes Tool zum Erstellen einer visuellen Komponentenbibliothek, mit dem Sie eine Komponentenbibliothek durchsuchen, die verschiedenen Zustände jeder Komponente anzeigen und diese Komponenten interaktiv entwickeln und testen können. Mit den bereitgestellten Tools zur visuellen Validierung können Sie auch eine visuelle Regression für alle Ihre Komponenten durchführen.

Jest

Dieses Tool ist einfach zu konfigurieren und einzurichten und eignet sich hervorragend für Ihre Entwickler, wenn sie an automatisierten Tests auf Unit-Ebene arbeiten. Jest bietet Funktionen wie den interaktiven Überwachungsmodus, den Sie zur Verbesserung von Workflows verwenden können. Es ist intelligent genug, um relevante Tests gemäß den Änderungen auszuführen, die Sie seit Ihrem letzten Commit in Ihrem Code-Repository vorgenommen haben. Es kann auch den fehlgeschlagenen Test aus dem vorherigen Lauf zuerst erneut ausführen, wodurch Sie Änderungen finden können, die zur Behebung dieser Tests erforderlich sind.

Fazit

Dies scheint eine ausreichende Liste zu sein, um Ihnen eine Vorstellung von den Tools zu geben, die Sie Ihrem Entwicklungsteam vorstellen möchten. Wählen Sie die besten Tools mit OpenSense Labs aus und stellen Sie sicher, dass Ihre Website qualitätsgeprüft ist. Schreiben Sie uns an [email protected].