Weil Augen nicht lügen – Visuelle Tests mit Applitools Eyes

Regressionstests stellen sicher, dass Änderungen an der Software nichts beschädigen, was zuvor gut funktioniert hat. Visuelle Regressionstests stellen sicher, dass keine GUI-Probleme aufgrund der vorgenommenen Änderungen aufgetreten sind. Die Anwendung sollte immer noch so aussehen wie vor der Einführung der Änderungen. Ein visuelles Regressionstest-Tool erfasst Screenshots der aktuellen Benutzeroberfläche und vergleicht sie mit den Original-Screenshots. Es betrachtet die historischen Polaritäten und bestätigt, dass die Webseiten auch nach den Änderungen in verschiedenen Browsern immer noch wie erwartet dargestellt werden. Applitools Eyes ist eines der beliebtesten visuellen Testtools auf dem Markt, das auf seiner proprietären kognitiven Vision-Technologie basiert.

Applitools hat ein Cloud-basiertes Software-Testtool, Applitools Eyes, entwickelt, das automatisch alle visuellen Aspekte jeder Web-, Mobil- und nativen App validiert. Diese Validierungen ähneln denen, die ein manueller Tester durchführt. Die Applitools-Technologie validiert automatisch die Korrektheit des UI-Layouts, des Inhalts und des Erscheinungsbilds und ermöglicht es Ihnen, Tests zu automatisieren, die ohne sie nur manuell durchgeführt werden könnten. Es kann Apps auf jedem beliebigen Browser, Gerät, Betriebssystem und jeder Programmiersprache, auf jeder Bildschirmauflösung und jedem Formfaktor testen.

Ein Überblick über das Applitools Eyes-System

Verschiedene Testumgebungen interagieren mit den verschiedenen Eyes-Komponenten von Applitools, um visuelle UI-Tests zu implementieren. Das System besteht aus folgenden Komponenten:

• Die zu testende Anwendung (AUT).
• Eine Testsuite, die für die AUT ausgeführt wird und ihre Genauigkeit überprüft.
• SDKs werden im Code der Testsuite aufgerufen, um die Screenshot-Erfassung und visuelle Überprüfung auszulösen.
• Anwendungstreiber wie Selenium oder Appium, die einen Rahmen zum Erstellen von Testanzügen bieten, die an die AUT gesendet werden können. Es verwendet diese auch, um Screenshots aufzunehmen.
• Der Server empfängt und speichert den von den SDKs gesendeten Screenshot. Es vergleicht sie mit den gespeicherten Basisbildern und meldet alle Unterschiede.
• Der Eyes Test Manager stellt dem Benutzer Testergebnisse zur Verfügung, die er überprüfen kann, und hilft dem Benutzer, Fehler zu melden und die Basisbilder zu verwalten.

Das folgende Beispiel zeigt, wie die Komponenten interagieren, um einen Test auszuführen, sodass das Testteam die Testergebnisse anzeigen und verwalten kann.

Kredit: Applitools

SCHRITT 1: Das Testteam führt die Testsuite aus. Der Code wiederholt normalerweise die folgenden Schritte für verschiedene Anwendungszustände.

SCHRITT 2.1: Mit Treibern wie Selenium oder Appium werden die Benutzeraktionen wie Mausklick, Tastatureingabe usw. simuliert.

SCHRITT 2.2: Gleichzeitig wird die Eyes SDK-API aufgerufen, um gleichzeitig einen visuellen Checkpoint durchzuführen.

SCHRITT 2.2.a: Das Eyes SDK verwendet den Treiber, um den Screenshot zu erfassen.

SCHRITT 2.2.b: Danach sendet das Eyes-SDK das gesammelte Bild an den Eyes-Server. Hier werden die Bilder und die anderen Checkpoint-Bilder mit den Basisbildern verglichen, die zuvor auf dem Server gespeichert wurden.

SCHRITT 3: Sobald die Bilder im Test verarbeitet wurden, liefert der Eyes-Server Informationen zu beobachteten Unterschieden. Zusammen mit diesem wird ein Link zur Eyes-Website bereitgestellt, wo die Ergebnisse eingesehen werden können.

SCHRITT 4: Das Testteam verwendet den Eyes Test Manager, um die Testergebnisse anzuzeigen, die Baselines zu aktualisieren, Fehler zu melden und Bereiche zu kommentieren, die einer besonderen Behandlung bedürfen. Nachdem alle Ergebnisse angezeigt wurden, speichert das Testteam die Baseline. Dies dient als Vergleichsbasis für den nächsten Testlauf.

Applitools verfügt über SDKs, die eine breite Palette beliebter Testautomatisierungs-Frameworks für Web-, Mobil- und Desktop-Tests, verschiedene Anwendungstreiberinfrastrukturen, Programmiersprachen und alle gängigen Plattformen, Browser und Betriebssysteme unterstützen. Diese SDKs interagieren nicht direkt mit dem AUT, sodass Eyes völlig unabhängig davon ist, wie die Anwendung implementiert und bereitgestellt wird.

Kompatibilität von Applitools Eyes

Applitools verfügt über SDKs für alle gängigen Programmiersprachen und Testläufer, die eine vollständige Testabdeckung für Web, Mobilgeräte, Desktop, PDF, TV-Betriebssysteme, IoT, Bilder und mehr bieten.

WEB-SDKs

Die WEB SDKs unterstützen alle wichtigen Webtest-Tools und -Programme:

1. Selen für -Java, JavaScript, C#, Ruby, PHP, Python
2. WebtreiberIO4, WebtreiberIO5, WebtreiberIO6
3. Selen-IDE
4. Zypresse
5. Dramatiker (Neuzugang)
6. Puppenspieler (Neu hinzugekommen)
7. TestCafe
8. Storybook CSF React (Neuzugang), Storybook -React, Angular, Vue
9. Watir
10. Wasserschwein
11. Winkelmesser (Neu hinzugekommen)
12. UFT/QTP
13. Schlankes CFT#, schlankes JavaScript
14. Codierte Benutzeroberfläche

Mobile SDKs

Die Mobile SDKs unterstützen alle wichtigen Mobile-Testtools und -Programme:

1. Appium Native – C#, Java, JavaScript, PHP, Python, Ruby
2. Appium Web – C#, Java, JavaScript, PHP, Python, Ruby
3. XCUI Objective-C, XCUI Swift
4. Espresso
5. Kalebasse iOS und Android

Screenshot-SDKs

CLI, C#, Java, JavaScript, PHP, Ruby, XCTest Objective-C, XCTest Swift

Desktop-SDKs

Windows UFT, Windows-codierte Benutzeroberfläche

Codelose Tools

PDF-Formulare, Codeless IDE

Der Testmanager in Applitools Eyes

Der Eyes Test Manager ist ein browserbasiertes Tool, das Zugriff auf visuelle UI-Testdaten bietet. Es ermöglicht Benutzern, die Testergebnisse, Baselines und andere Metadaten zu verwalten.

Eyes Test Manager bietet die folgenden Einrichtungen:

• Greifen Sie auf die Ergebnisse von visuellen UI-Testläufen zu
• Akzeptieren oder verwerfen Sie die aufgezeichneten Unterschiede
• Kommentieren Sie Schritte mit Kommentaren
• Übereinstimmungsebene hinzufügen und Regionen ignorieren
• Aktualisieren Sie die Grundlinie
• Anzeigen und Verwalten der Anwendung und der Testnamen
• Zeigen Sie die Baselines und die Zweige an und verwalten Sie sie
• Anzeigen und Verwalten der Ausführungsumgebungen
• Vergleichen und führen Sie Baseline-Zweige zusammen
• Verwalten Sie Ihr Konto, Teams und Benutzer

Es gibt verschiedene andere Tools und Konzepte, die in Eyes integriert wurden, die dem Benutzer helfen, Tests und Testfälle zu organisieren. Ein solches Werkzeug ist die Baseline. Das visuelle Inspektionsprotokoll vergleicht die erfassten Bilder mit denen, die in der Baseline des vorherigen Testlaufs gespeichert wurden. Jeder Testlauf kann unterschiedlich aussehen und sich anders anfühlen. Augen haben viele Basislinien pro Test, wobei jede Basislinie eine ausgewählte Umgebung darstellt. Jede dieser Baselines kann eine Reihe von Bildreferenzen speichern.

Wenn der visuelle Test ausgeführt wird, durchläuft die Anwendung eine Folge von Anwendungszuständen, und für jeden Zustand wird ein Prüfpunkt ausgeführt, der ein Bild der Anwendung für diesen Zustand erfasst. Die Augen vergleichen die Reihe aufgenommener Bilder mit der Reihe von Referenzbildern, die in der Basislinie dieses Tests gespeichert sind, und melden alle signifikanten Unterschiede. Das Bild innerhalb der Baseline hängt von den Testläufen ab, aber sie können auch von anderen Faktoren wie Betriebssystemen, Browsertyp und Größe des Darstellungsbereichs abhängen. Diese Faktoren werden als Ausführungsumgebung bezeichnet.

Das Ansichtsfenster ist der sichtbare Bereich jeder Anwendung innerhalb des Anwendungsfensters. Die Größe des Darstellungsbereichs kann sich auch auf das Layout jeder Seite auswirken. Beispielsweise kann das Ändern der Dimension des Browsers das Erscheinungsbild von gerendertem Text ändern. Responsive Seiten mit Elementen wie Menüs können für verschiedene Dimensionen anders aussehen. Die Schrift- und Bildgröße kann sich ändern. Hinweis: Der Darstellungsbereich ist plattformspezifisch.