Erste Schritte mit visuellen Regressionstests mit Appium
Veröffentlicht: 2023-09-17
Heutige Software erfordert ein nahtloses Benutzererlebnis auf mehreren Plattformen und Geräten. Einer der größten Herausforderungen in diesem Bereich ist die Aufrechterhaltung der visuellen Integrität Ihrer Anwendung. Hier kommt der visuelle Regressionstest (VRT) ins Spiel, der eine optimierte Möglichkeit bietet, visuelle Fehler und Inkonsistenzen zu erkennen, die andernfalls unbemerkt bleiben könnten. Für diejenigen, die mit VRT beginnen möchten, bietet Appium ein robustes, skalierbares Framework zur Automatisierung dieser Art von Tests auf einer Vielzahl von Plattformen.
Darüber hinaus bieten Dienste wieLambdaTest eine KI-gestützte Testorchestrierungs- und Testausführungslösung für visuelle Regressionstests, sodass Teams keine eigene Testinfrastruktur einrichten und verwalten müssen.Dieser Cloud-Ansatz bietet bedarfsgesteuerten Zugriff auf verschiedene reale Browser und Geräte, ermöglicht gleichzeitige Tests in mehreren Umgebungen, verkürzt die Testausführungszeit und gewährleistet die Konsistenz des Erscheinungsbilds und der Funktionalität von Webanwendungen. LambdaTest bietet außerdem detaillierte Testberichte und die Integration mit gängigen Test-Frameworks für eine schnelle Problemerkennung und -lösung.
In diesem Artikel erläutern wir die Grundlagen für den Einstieg in VRT mit Appium, damit Sie Ihre Teststrategie auf die nächste Stufe heben können.
Was ist ein visueller Regressionstest?
Visuelle Regressionstests sind eine Validierungstechnik, mit der sichergestellt werden soll, dass an einer Anwendung vorgenommene Änderungen keine negativen Auswirkungen auf die visuelle Darstellung der Benutzeroberfläche (UI) der Anwendung haben. Sein Hauptziel besteht darin, zu bestätigen, dass das Layout und die visuellen Elemente den vordefinierten Erwartungen entsprechen, um so ein einwandfreies visuelles Benutzererlebnis zu gewährleisten. Diese visuellen Prüfungen umfassen verschiedene Attribute wie Position, Leuchtdichte, Kontrast und Farbe von Schaltflächen, Menüs, Komponenten, Text und mehr. Diese Methode wird manchmal auch als visuelles Testen oder UI-Testen bezeichnet.
Wie funktionieren visuelle Regressionstests?
Beim visuellen Regressionstest werden im Wesentlichen Schnappschüsse der Benutzeroberfläche vor einer Änderung erfasst und diese dann mit Screenshots verglichen, die danach aufgenommen wurden. Etwaige Abweichungen werden anschließend zur Prüfung durch einen Prüfingenieur hervorgehoben. In der Praxis gibt es verschiedene Techniken zur Durchführung visueller Regressionstests. Einige der am häufigsten verwendeten sind unten für Sie aufgeführt:
Manuelle visuelle Prüfung
Bei dieser Methode wird die Benutzeroberfläche manuell überprüft, ohne dass spezielle Tools erforderlich sind. Designer und Entwickler nehmen sich bei jeder Veröffentlichung Zeit, um die Seiten visuell zu prüfen und aktiv nach etwaigen visuellen Mängeln zu suchen. Während dieser Ansatz bei der Anwendung auf eine gesamte Anwendung mühsam und anfällig für menschliches Versagen sein kann, ist er für Ad-hoc- oder explorative UI-Tests nützlich, insbesondere in den frühen Phasen der Entwicklung.
Pixelweiser Vergleich
Diese Technik prüft die beiden Screenshots auf Pixelebene und macht den Testingenieur auf etwaige Unstimmigkeiten aufmerksam. Der Pixelvergleich, auch Pixelunterschiede genannt, kann alle potenziellen Probleme identifizieren, kann aber auch viele unbedeutende Unterschiede aufzeigen, die für das menschliche Auge nicht wahrnehmbar sind und die Benutzerfreundlichkeit nicht beeinträchtigen (z. B. Rendering-Variationen, Anti-Aliasing oder Unterschiede bei Auffüllung/Rand). ). Diese „False Positives“ muss der Prüfingenieur bei jedem Prüfdurchlauf akribisch sichten.
DOM-basierter Vergleich
Diese Vergleichsmethode basiert auf der Analyse des Document Object Model (DOM) vor und nach einer Statusänderung und der Identifizierung von Unterschieden. Es ist zwar effektiv, codebezogene Änderungen innerhalb des DOM hervorzuheben, bietet jedoch keinen echten visuellen Vergleich. Es werden häufig falsche negative oder positive Ergebnisse generiert, wenn der Code unverändert bleibt, sich die Benutzeroberfläche jedoch weiterentwickelt (z. B. dynamischer Inhalt oder eingebetteter Inhalt) oder wenn sich der Code ändert, die Benutzeroberfläche jedoch statisch bleibt. Folglich können die Testergebnisse inkonsistent sein und erfordern eine sorgfältige Überprüfung, um zu verhindern, dass visuelle Mängel übersehen werden.
Visueller KI-Vergleich
Visuelle Regressionstests mit visueller KI nutzen Computer Vision, um die Benutzeroberfläche auf ähnliche Weise wie Menschen wahrzunehmen. Eine gut ausgebildete KI kann Testingenieure unterstützen, indem sie ausschließlich Unterschiede kennzeichnet, die ein menschlicher Beobachter bemerken würde, wodurch die mühsame Aufgabe entfällt, „falsch positive“ Probleme zu beheben, die bei Pixel- und DOM-Vergleichstests häufig auftreten. Darüber hinaus kann Visual AI dynamische Inhalte bewerten und Probleme nur in unerwarteten Bereichen oder Regionen identifizieren.
Gründe für die Durchführung eines visuellen Regressionstests
In diesem Abschnitt werden die überzeugendsten Gründe für die Durchführung visueller Regressionstests in Ihrer Anwendung erläutert. Lesen Sie also weiter….
Sicherstellung der visuellen Konsistenz
Visuelle Regressionstests tragen dazu bei, sicherzustellen, dass die Benutzeroberfläche und die visuellen Elemente Ihrer mobilen App über verschiedene Versionen, Geräte und Plattformen hinweg konsistent bleiben. Diese Konsistenz ist wichtig für die Bereitstellung einer nahtlosen Benutzererfahrung.
Validierung von Designänderungen
Wenn Designänderungen an der App vorgenommen werden, kann durch visuelle Regressionstests überprüft werden, ob diese Änderungen korrekt implementiert wurden und keine unbeabsichtigten visuellen Probleme verursacht haben.
Schnellere Rückkopplungsschleife
Visuelle Regressionstests können Entwicklern und Designern schnelles Feedback geben und es ihnen ermöglichen, Probleme frühzeitig im Entwicklungszyklus anzugehen. Dies verringert die Wahrscheinlichkeit, dass kritische visuelle Mängel in die Produktion gelangen.
Verbesserte Benutzererfahrung
Visuelle Störungen und Inkonsistenzen können sich negativ auf das Benutzererlebnis auswirken und den Ruf der App schädigen. Indem Sie diese Probleme durch visuelle Regressionstests erkennen, können Sie die Benutzerzufriedenheit steigern.
Regressionstests für UI-Bibliotheken
Wenn Ihre App UI-Bibliotheken oder Frameworks von Drittanbietern verwendet, hilft der visuelle Regressionstest sicherzustellen, dass Aktualisierungen dieser Bibliotheken keine unerwünschten visuellen Änderungen mit sich bringen.
Schritte zum Einstieg in visuelle Regressionstests mit Appium
Visuelle Regressionstests mit Appium umfassen den Vergleich visueller Elemente der Benutzeroberfläche einer Anwendung, um unbeabsichtigte visuelle Änderungen zwischen verschiedenen Versionen der App zu erkennen. Hier sind die Schritte, um mit visuellen Regressionstests mit Appium zu beginnen:
Schritt 1: Appium und Testumgebung einrichten
Stellen Sie zunächst sicher, dass Appium auf Ihrem System installiert und eingerichtet ist. Sie benötigen außerdem die Appium-Clientbibliothek für Ihre bevorzugte Programmiersprache (z. B. Java, Python). Installieren Sie außerdem alle erforderlichen Abhängigkeiten und Tools für Ihre Testumgebung.
Schritt 2: Testbilder vorbereiten
Bevor Sie visuelle Regressionstests durchführen können, benötigen Sie eine Reihe von Basisbildern, die das erwartete Erscheinungsbild der Bildschirme Ihrer App darstellen. Erfassen Sie diese Basisbilder, indem Sie Ihre App auf verschiedenen Geräten/Emulatoren ausführen und Screenshots von jedem Bildschirm erstellen. Speichern Sie diese Bilder in einem dafür vorgesehenen Ordner in Ihrem Projekt.
Schritt 3: Testskripte implementieren
Schreiben Sie Testskripte mithilfe der Appium-Clientbibliothek, um den Prozess der Screenshot-Erfassung und der Durchführung visueller Vergleiche zu automatisieren. Ihre Testskripte sollten Folgendes tun:
- Initialisieren Sie den Appium-Treiber, um die App auf einem bestimmten Gerät/Emulator zu starten.
- Navigieren Sie durch die Bildschirme der App und führen Sie Aktionen aus, die Änderungen an der Benutzeroberfläche auslösen.
- Erfassen Sie Screenshots mit der Screenshot-Funktion von Appium.
- Speichern Sie die aufgenommenen Screenshots zum Vergleich in einem separaten Ordner.
Hier ist ein Beispiel dafür, wie der Code in Java mit dem Appium Java-Client aussehen könnte:
„Java
import io.appium.java_client.AppiumDriver;
import io.appium.java_client.MobileElement;
import io.appium.java_client.android.AndroidDriver;
import org.openqa.selenium.remote.DesiredCapabilities;
java.net.URL importieren;
öffentliche Klasse VisualRegressionTest {
public static void main(String[] args) löst eine Ausnahme aus {
// Gewünschte Funktionen für den Appium-Treiber festlegen
DesiredCapabilities caps = new DesiredCapabilities();
caps.setCapability("platformName", "Android");
caps.setCapability("deviceName", "emulator-5554");
caps.setCapability("appPackage", "your.app.package");
caps.setCapability("appActivity", "your.app.activity");
// Initialisiere den Appium-Treiber
AppiumDriver<MobileElement> drivers = new AndroidDriver<>(new URL("https://localhost:4723/wd/hub"), caps);
// Aktionen ausführen und Screenshots aufnehmen
// ...
// Screenshots zum Vergleich speichern
// ..
// Den Treiber schließen
Driver.quit();
}
}
„
Schritt 4: Implementieren Sie die visuelle Vergleichslogik
Für visuelle Regressionstests benötigen Sie einen Mechanismus, um die erfassten Screenshots mit den Basisbildern zu vergleichen. Sie können Bildvergleichsbibliotheken wie „Resemble.js“ oder „Pixelmatch“ verwenden, um Pixel-für-Pixel-Vergleiche durchzuführen und visuelle Unterschiede zu berechnen.
Schritt 5: Behauptung und Berichterstattung
Implementieren Sie in Ihren Testskripten Aussagen basierend auf den Ergebnissen des visuellen Vergleichs. Wenn die visuellen Unterschiede einen bestimmten Schwellenwert überschreiten, gilt der Test als nicht bestanden. Erstellen Sie Berichte mit detaillierten Angaben zu den Testergebnissen, einschließlich aller festgestellten visuellen Unterschiede.
Schritt 6: Kontinuierliche Integration (CI)
Integrieren Sie Ihre visuellen Regressionstests in Ihre CI/CD-Pipeline, um sicherzustellen, dass sie bei Codeänderungen oder neuen Releases automatisch ausgeführt werden. Dies hilft dabei, visuelle Regressionen frühzeitig im Entwicklungsprozess zu erkennen.
Schritt 7: Basisbilder pflegen
Während sich Ihre App weiterentwickelt, müssen Sie Ihre Basisbilder aktualisieren, um sie an das neue erwartete Erscheinungsbild anzupassen. Dadurch wird sichergestellt, dass legitime UI-Änderungen nicht mit Regressionen verwechselt werden.
Wie können Benutzer VRT mit Appium auf LambdaTest durchführen?
So können Benutzer visuelle Regressionstests mit Appium auf LambdaTest durchführen:
Richten Sie ein LambdaTest-Konto ein
Erstellen Sie zunächst ein Konto auf der LambdaTest-Plattform, falls Sie noch keines haben. Sie benötigen dieses Konto, um auf die Testinfrastruktur zuzugreifen. Stellen Sie dann sicher, dass Sie Appium und alle Abhängigkeiten wie oben beschrieben installieren.
Schreiben Sie Testskripte
Entwickeln Sie Ihre Appium-Testskripte für die Interaktion mit Ihrer mobilen Anwendung. Diese Skripte sollten die Schritte zum Navigieren durch Ihre App und zum Erfassen von Screenshots wichtiger Elemente oder Bildschirme umfassen.
Konfigurieren Sie LambdaTest-Funktionen
Ändern Sie Ihre Appium-Skripte so, dass sie LambdaTest-spezifische Funktionen enthalten. Dazu gehört die Angabe der gewünschten Plattform (iOS/Android), der Browserversion, des Gerätetyps und der LambdaTest-Anmeldeinformationen (Benutzername und Zugriffsschlüssel).
Führen Sie Tests auf LambdaTest durch
Laden Sie Ihre Appium-Testskripte auf die Plattform von LambdaTest hoch. LambdaTest bietet ein Selenium-Gitter, in dem Sie Ihre Appium-Tests ausführen können. Dieses Raster bietet eine große Auswahl an realen Geräten und Browsern zum Testen.
Tests ausführen
Führen Sie Ihre Tests im Raster von LambdaTest aus, indem Sie sie über die webbasierte Schnittstelle auslösen. LambdaTest führt Ihre Tests auf den angegebenen Mobilgeräten und Browsern aus und erfasst Screenshots an verschiedenen Punkten Ihres Testablaufs.
Visueller Vergleich
Nach der Testausführung generiert LambdaTest Screenshots der verschiedenen Zustände der Anwendung. Sie können das integrierte visuelle Vergleichstool verwenden, um diese Screenshots mit Basisbildern zu vergleichen und etwaige visuelle Abweichungen zu erkennen.
Überprüfen und analysieren
Analysieren Sie die VRT-Ergebnisse, um visuelle Unterschiede zu identifizieren. LambdaTest bietet Einblicke in visuelle Veränderungen und hebt Bereiche hervor, in denen Abweichungen festgestellt werden.
Automatisierte Berichterstattung
LambdaTest bietet automatisierte Berichtsfunktionen, um Testergebnisse im Zeitverlauf zu verfolgen und so Trends einfacher zu erkennen und die Auswirkungen von Änderungen auf das visuelle Erscheinungsbild Ihrer Anwendung zu bewerten.
Best Practices für erfolgreiche visuelle Regressionstests mit Appium
Hier sind einige Best Practices, die Sie für erfolgreiche visuelle Regressionstests mit Appium befolgen sollten:
Wählen Sie eine zuverlässige Geräte- und Plattformmatrix
Wählen Sie eine Reihe von Geräten, Betriebssystemen und Bildschirmauflösungen aus, die die wichtigsten Kombinationen darstellen, die von Ihrer Zielgruppe verwendet werden. Diese Matrix sollte eine Vielzahl von Geräten abdecken, um sicherzustellen, dass Ihre App in verschiedenen Konfigurationen konsistent aussieht.
Versionskontrolle für Referenzbilder
Behalten Sie ein versioniertes Repository mit Referenzbildern bei, die das erwartete visuelle Erscheinungsbild Ihrer App auf verschiedenen Geräten und Plattformen darstellen. Diese Referenzbilder dienen als Vergleichsgrundlage bei Regressionstests.
Stabile und konsistente Testumgebung
Stellen Sie sicher, dass die Testumgebung für jeden Testlauf konsistent ist. Dazu gehört die Verwendung derselben Betriebssystemversionen, Appium-Versionen und Bibliotheken über verschiedene Testläufe hinweg. Vermeiden Sie unnötige Änderungen an der Umgebung, die zu falsch positiven Ergebnissen bei Ihren Tests führen könnten.
Isolieren Sie UI-Änderungen von funktionalen Änderungen
Trennen Sie Ihre visuellen Regressionstests von Funktionstests. Dadurch können Sie sich ausschließlich auf visuelle Unterschiede konzentrieren, ohne sich von funktionalen Problemen ablenken zu lassen.
Erwartete visuelle Abweichungen tolerieren
Nicht alle visuellen Unterschiede sind Fehler. Legen Sie ein Toleranzniveau für eine akzeptable visuelle Abweichung fest, um geringfügige Änderungen an der Benutzeroberfläche zu berücksichtigen, z. B. Abweichungen bei der Schriftartwiedergabe, die sich möglicherweise nicht auf das gesamte Benutzererlebnis auswirken.
Dynamische Inhaltsverarbeitung
Behandeln Sie dynamische Inhalte wie Anzeigen, benutzergenerierte Inhalte und Echtzeitdaten elegant. Möglicherweise müssen Sie diese Elemente entweder vom Vergleich ausschließen oder Ihre Referenzbilder aktualisieren, um diese dynamischen Änderungen zu berücksichtigen.
Intelligente Wartestrategien
Implementieren Sie intelligente Wartestrategien, um sicherzustellen, dass die UI-Elemente der App vollständig geladen sind, bevor Sie Screenshots aufnehmen. Dies trägt dazu bei, Fehlalarme zu vermeiden, die durch unvollständige oder teilweise geladene Bildschirme verursacht werden.
Parallele Ausführung
Wenn möglich, führen Sie visuelle Regressionstests parallel auf mehreren Geräten und Plattformen durch. Dies reduziert die Gesamttestzeit und sorgt für eine schnellere Rückmeldung zu möglichen visuellen Abweichungen.
Automatisierte Berichte und Benachrichtigungen
Richten Sie automatisierte Berichte und Benachrichtigungen ein, um das Team zu benachrichtigen, wenn visuelle Abweichungen festgestellt werden. Dies gewährleistet schnelles Handeln und minimiert den Zeitaufwand für die Behebung von Problemen.
Regelmäßige Testwartung
Wenn sich Ihre App weiterentwickelt, aktualisieren Sie Ihre Referenzbilder und passen Sie Ihre Tests an, um beabsichtigte visuelle Änderungen zu berücksichtigen. Überprüfen und pflegen Sie Ihre visuellen Regressionstests regelmäßig, um sicherzustellen, dass sie relevant bleiben.
Überprüfen und validieren Sie die Ergebnisse
Bevor Sie einen Unterschied als tatsächliches Problem betrachten, überprüfen Sie die Screenshots manuell, um zu überprüfen, ob es sich bei den Unterschieden um tatsächliche Fehler oder nur um Fehlalarme handelt, die durch dynamische Inhalte oder geringfügige visuelle Änderungen verursacht wurden.
Ständige Verbesserung
Bewerten Sie Ihre Strategie für visuelle Regressionstests kontinuierlich und passen Sie sie bei Bedarf an. Bleiben Sie mit den neuesten Tools, Bibliotheken und Best Practices auf dem Laufenden, um die Effektivität Ihres Testprozesses sicherzustellen.
Abschluss
Ganz gleich, ob Sie unbeabsichtigte Änderungen erkennen, den manuellen Qualitätssicherungsaufwand reduzieren oder einfach die visuelle Konsistenz über verschiedene Geräte und Auflösungen hinweg verbessern möchten, VRT ist ein unverzichtbares Werkzeug in Ihrem Testarsenal. Wie bei jeder Technologie braucht es Zeit, die Nuancen zu beherrschen, aber die Vorteile in Form von Zeitersparnis, weniger Fehlern und einem nahtloseren Benutzererlebnis können immens sein. Warum also warten? Beginnen Sie noch heute mit VRT und Appium und bringen Sie das Testen Ihrer mobilen Anwendungen auf die nächste Stufe.