guide visual regression testing with visual testing tools
In diesem umfassenden Handbuch wird alles über visuelle Regressionstests erläutert. Enthält auch eine Überprüfung der kostenlosen und kommerziellen visuellen Testtools wie Applitools, Percy, Screener usw.:
Visuelle Regressionstests oder visuelle Tests in Software sind eine Qualitätssicherungsaktivität zur Überprüfung, ob die visuellen Aspekte der Benutzeroberfläche der Anwendung für den Benutzer angemessen erscheinen. Es wird auch als Visual Validation Testing bezeichnet.
Ziel ist es zu überprüfen, ob die richtigen Daten und Inhalte am Frontend der Anwendung angezeigt werden. Darüber hinaus werden das Layout und das Erscheinungsbild jedes auf der Benutzeroberfläche und der gesamten Benutzeroberfläche vorhandenen visuellen Elements überprüft.
Was du lernen wirst:
Visuelle Regressionstests
Wenn wir über die Richtigkeit des Layouts sprechen, bedeutet dies, dass Position, Form und Größe jedes Elements auf dem Bildschirm korrekt sind. Elemente sollten sich nicht überlappen, sie sollten sichtbar und nicht verborgen sein.
Das visuelle Element kann sich hier auf ein Bild, eine Seite, einen Teil einer Seite oder einen Teil eines Bildes beziehen.
Die Überprüfung des Erscheinungsbilds bedeutet, dass Schriftart, Farbe, Helligkeit, Kontrast, Dichte, Textur, visuelles Gewicht, Grafiken usw. der visuellen Elemente korrekt aussehen müssen.
Was ist ein visueller Regressionstest?
Regressionstests stellen sicher, dass durch Änderungen an der Software nichts beschädigt wird, was zuvor einwandfrei funktioniert hat.
Wenn es um visuelle Tests geht, stellen die visuellen Regressionstests sicher, dass keine Stilprobleme auftreten, wenn Änderungen an der Software vorgenommen werden. Die Anwendung sollte weiterhin so gut aussehen wie sie war.
Ein visuelles Regressionstest-Tool erfasst Screenshots der aktuellen Benutzeroberfläche und vergleicht sie mit den ursprünglichen Screenshots. Bei visuellen Regressionstests werden also die historischen Unterschiede untersucht. Es wird bestätigt, dass die Webseite auch nach Änderungen am Code in verschiedenen Browsern wie erwartet gerendert wird.
Im Folgenden finden Sie einen Siebdruck eines visuellen Regressionstests, der mit einem automatisierten Tool durchgeführt wurde:
(Bild Quelle ))
In der heutigen Praxis der kontinuierlichen Integration sind visuelle Regressionstests sehr wichtig, um sicherzustellen, dass die neuen Änderungen keine Unordnung im Layout verursachen, wenn sich die Anwendung von Version zu Version entwickelt und über mehrere Browser hinweg fortschreitet.
Viele Unternehmen verwenden visuelle Regressionstests, um Versionen bestimmter Webseiten aufzuzeichnen und zu dokumentieren, wie sie sich von einer Iteration zur anderen ändern.
Bedeutung visueller Validierungstests
Unabhängig davon, wie korrekt die Funktionalität Ihrer Anwendung funktioniert, ist sie für den Kunden nur dann von Nutzen, wenn sie eine gute Benutzeroberfläche und Benutzererfahrung bietet.
Heutzutage sprechen wir nicht nur über UI (User Interface), sondern konzentrieren uns auch sehr auf UX (User Experience). Wenn wir eine bessere Benutzererfahrung erzielen möchten, werden visuelle Tests sehr wichtig, da das ansprechendere visuelle Design für den Benutzer als benutzerfreundlicher wahrgenommen werden kann.
Sehen wir uns das folgende Beispiel auf der Amazon-Website an:
(Bild Quelle ))
Im obigen Bild können Sie feststellen, dass sich Text und Bilder überlappen und nicht richtig ausgerichtet sind. Dies ist ein Beispiel für einen visuellen Fehler, der zu einer schlechten Benutzererfahrung führen kann, da der Kunde die beabsichtigte Aktion auf der Website nicht ausführen kann.
Visuelles Design prägt das Benutzererlebnis in vielerlei Hinsicht.
Zum Beispiel,
- Großartige visuelle Designs tragen dazu bei, Vertrauen und Glaubwürdigkeit aufzubauen.
- Stärkt das Markenimage.
- Beeinträchtigt die Lesbarkeit.
- Bildet eine visuelle Balance auf dem Bildschirm.
- Führt die Benutzer zu Aktionen.
- Überredet das Auge, seine Aufmerksamkeit auf bestimmte Seitenelemente zu lenken.
Heutzutage verfügen wir auch über eine Vielzahl von Betriebssystemen, Webbrowsern, Bildschirmauflösungen und Geräten. Daher ist es wichtig sicherzustellen, dass die Benutzeroberfläche bei jeder der möglichen Kombinationen dieser Betriebssysteme korrekt angezeigt wird.
Selbst eine kleine Verzerrung der Benutzeroberfläche kann zu Geschäftsverlusten führen. Visuelle Fehler können für die Benutzer ärgerlich und unangenehm sein und ihnen Unannehmlichkeiten bereiten.
Angenommen, Sie sind im Bankgeschäft tätig und bieten Ihren Kunden eine Online-Mobile-Banking-Anwendung an.
Einige Ihrer Kunden erhalten Beschwerden, dass sie das Geld nicht auf das Konto einer anderen Person überweisen können und diese nicht finden können, nachdem sie alle erforderlichen Informationen eingegeben haben 'Einreichen' Taste auf dem Bildschirm und dies ist eine irritierende Erfahrung für sie.
Wenn Sie das Problem untersuchen, stellen Sie fest, dass die Schaltfläche 'Senden' bei einer bestimmten Bildschirmauflösung für Android-Handys ausgeblendet wird. Aus diesem Grund konnten alle Kunden mit Android-Handys dieser bestimmten Bildschirmgröße die Schaltfläche 'Senden' nicht sehen.
Die Funktionalität der Anwendung funktionierte in diesem Fall einwandfrei, aber aufgrund des visuellen Fehlers konnten die Benutzer ihre beabsichtigten Aktionen in der App nicht ausführen. Dieses Beispiel zeigt, wie wichtig es ist, die visuellen Aspekte der Anwendung bei jeder möglichen Konfiguration zu testen, bevor Sie die Anwendung an die Kunden liefern.
Einige Bereiche, in denen visuelle Validierungstests dringend empfohlen werden, sind (da sie sich direkt auf Ihre Marke auswirken):
Fragen und Antworten zu Python-Interviews für Tester
- Mobile Apps
- Mobiles Web / Responsive Web
- Marketing-Websites
- Content-Management-Systeme
- Verbrauchersysteme wie Fluggesellschaften, Reisen, Banken usw.
Angesichts seiner Bedeutung sollten Unternehmen erhebliche Anstrengungen und Geld für visuelle Tests aufwenden. In Kombination mit den vorhandenen Entwicklertests können Sie die visuellen Probleme in den frühen Phasen des Entwicklungslebenszyklus erkennen.
Visuelle Testmethoden und -prozesse
Als Entwickler oder Tester arbeiten wir häufig daran, die Funktionalität der Anwendungen zu testen. Entweder mit einem manuellen oder einem automatisierten Tool prüfen wir, ob die Anwendung wie erwartet funktioniert. Solche Funktionstests sind sehr wichtig, um ein reibungsloses Funktionieren der Anwendung zu gewährleisten.
Wenn wir jedoch visuelle Tests hinzufügen, würde dies die Gesamtprüfung erheblich verbessern. Daher werden diese Tests häufig in Kombination mit Funktionstests durchgeführt.
Es gibt verschiedene Testmethoden und -prozesse, um die Herausforderungen des visuellen Testens von Anwendungen in weiten Konfigurationen zu bewältigen. Es stehen auch zahlreiche Tools zur Unterstützung visueller Validierungstests zur Verfügung.
Im Allgemeinen gibt es zwei Hauptansätze für visuelle Validierungstests, d. H. Codebasiert und Konfigurationsbasiert. Die visuellen Testwerkzeuge werden ebenfalls basierend auf diesen beiden Ansätzen kategorisiert.
Dies kann manuell oder automatisiert erfolgen. Aufgrund bestimmter Herausforderungen kann es weder vollständig manuell noch vollständig automatisiert werden. Im Allgemeinen wird eine Kombination aus manuellem und automatisiertem Ansatz bevorzugt.
Nachstehend sind die 3 verschiedenen visuellen Testmethoden aufgeführt, die im Allgemeinen befolgt werden.
Die Teams können je nach Bedarf zwischen diesen Optionen wählen:
# 1) Erstellen Sie spezielle visuelle Tests : Dies ist die am meisten empfohlene Methode, da Sie die volle Kontrolle über die visuelle Validierung haben. Mit diesem Ansatz können Sie auch Tests mit mäßigem Aufwand schreiben. Aber ja, Sie müssen die Tests von Grund auf neu schreiben und es wird einige Zeit dauern.
# 2) Fügen Sie visuelle Prüfpunkte in vorhandene Funktionstests ein: Bei dieser Methode verfügen Sie bereits über die Tests zur Überprüfung der Funktionalität der Anwendung und fügen zwischen diesen Tests lediglich einige visuelle Überprüfungen hinzu, um die Seiten zu überprüfen.
Natürlich schränkt diese Methode Ihre Testabdeckung ein, aber es ist eine schnelle Möglichkeit, visuelle Tests einzufügen und den vorhandenen Funktionstestcode zu nutzen.
# 3) Fügen Sie implizite visuelle Validierung in das vorhandene Test-Framework ein: Diese Methode ist sehr einfach zu implementieren, da nur wenige Codezeilen erforderlich sind. Es besteht jedoch die Einschränkung, dass Sie in diesem Fall auch eine generische Validierung durchführen können. Sie können bestimmte Komponenten im Framework nicht validieren.
Im weiteren Verlauf werden wir uns mit manuellen und automatisierten visuellen Tests befassen. Wir werden auch die visuellen Testwerkzeuge und Frameworks im Detail überprüfen.
Manuelle visuelle Prüfung
Softwareunternehmen haben zwei Möglichkeiten, visuelle Tests durchzuführen, d. H. Manuelle Tests oder automatisierte Tests. Sehen wir uns die manuellen visuellen Tests im Detail an.
Obwohl manuelle Tests langsam, teuer und fehleranfällig sein können, ist es aufgrund der subjektiven Natur des Schnittstellendesigns oft nicht möglich, einen automatisierten Test durchzuführen, um die Richtigkeit jedes Szenarios zu erfassen. Daher müssen wir manchmal ein Gleichgewicht zwischen manuellen und Automatisierungstests wählen.
Einer der Hauptvorteile des manuellen Testens durch einen Menschen kann auch außerhalb des Testumfangs liegen. Ein Automatisierungstest kann nur das Problem erfassen, das in seinem Umfang liegt. In einem manuellen Test kann ein menschlicher Tester jedoch auch andere kosmetische Fehler und andere Dinge erkennen, die auf der Benutzeroberfläche falsch aussehen.
Da manuelle Tests näher an realen Benutzeraktionen liegen, können sie Layoutfehler und Designprobleme erfassen, die im Allgemeinen aufgedeckt werden, wenn ein realer Benutzer mit der Anwendung interagiert.
Sie können zu Beginn der Anwendungsentwicklung manuelle Tests durchführen, wenn Ihre Benutzeroberfläche instabil ist. Es ist auch hilfreich für Ad-hoc-Tests, wenn Sie schnelle Überprüfungen vor Ort benötigen.
Bei manuellen visuellen Validierungstests muss der Tester das Erscheinungsbild und Layout der visuellen Elemente manuell überprüfen. Dies kann bedeuten, dass aktuelle Screenshots erstellt und dann manuell mit den Basis-Screenshots verglichen werden, um Lücken zu identifizieren.
Eine weitere effektive Möglichkeit, manuelle Tests durchzuführen, ist die Verwendung eines Komponenten-Explorers. Hier definieren Sie die Testzustände, wählen mit dem Explorer einen Zustand und eine Komponente aus und überprüfen sie auf dem Bildschirm. Ein solches Tool ist React Storybook, mit dem Sie UI-Komponenten isoliert entwickeln können.
Mit dieser Methode kann ein Tester einen manuellen Test einer Komponente ausführen, überprüfen, wie sie gerendert wird, und feststellen, ob sie ordnungsgemäß funktioniert oder nicht.
Manuelle Testschritte:
- Durchsuchen Sie die App und erfassen Sie die bekannten guten Basis-Screenshots.
- Machen Sie zu einem späteren Zeitpunkt weitere Screenshots aus der neuesten Version der App.
- Vergleichen Sie nun diese Screenshots manuell (Grundlinie gegen aktuelle), um die visuellen Fehler herauszufinden.
Automatisierte visuelle Tests
Mit automatisierten visuellen Tests kann automatisch überprüft werden, ob eine Benutzeroberfläche wie beabsichtigt angezeigt wird.
Die Automatisierung visueller Tests hat den Vorteil, dass sie eine langfristige Kosteneffizienz bieten, schneller als manuelle Tests sind, genauer, da sie menschliche Fehler ausschließen und pixelgenaue visuelle Tests liefern können. Sie sind wiederverwendbar und transparent, da sie automatische Berichte bieten leicht und leicht zugänglich für jeden im Team.
Einige der Einschränkungen automatisierter visueller Tests bestehen darin, dass im Voraus hohe Kosten anfallen können und Sie erhebliche Anstrengungen in die Testwartung investieren müssen, um jede Änderung zu berücksichtigen.
Beim Automatisierungstest ist der Umfang enger, sofern kein Screenshot-Test vorhanden ist. Es gibt auch eine steile Lernkurve, da sich die Unternehmen Zeit nehmen, um sich mit Tools für Automatisierungstests vertraut zu machen.
Die Automatisierung ist eine gute Wahl, wenn Sie visuelle Regressionstests durchführen müssen, um häufige Änderungen an einer stabilen Benutzeroberfläche zu bewältigen. Automatisierte Tests helfen auch bei einem großartigen visuellen Screenshot-Vergleich.
Der automatisierte Screenshot-Vergleich bietet ein hohes Maß an Präzision beim visuellen Testen und erhöht den ROI. Der automatische Screenshot-Vergleich kann Fehler erfassen, die mit menschlichen Augen nicht erkannt werden können, und manuelle Vergleiche durchführen. Dies ist auch hilfreich beim End-to-End-Testen komplexer User Stories.
Für automatisierte Tests stehen eine Vielzahl von Open Source- und kommerziellen Tools zur Verfügung.
Das folgende Bild zeigt, wie die visuelle Validierung mit jeder Programmiersprache automatisiert werden kann:
(Bild Quelle ))
Im Folgenden finden Sie den allgemeinen Workflow von Visual Test Automation:
(Bild Quelle ))
Wie im obigen Workflow-Diagramm gezeigt, sind beim automatisierten visuellen Testen vier Schritte erforderlich:
Schritt 1 : In diesem Schritt müssen wir die Anwendung und die Test- und Erfassungs-Screenshots steuern.
Schritt 2 : In diesem Schritt vergleicht das Automatisierungstool diese Screenshots mit den Basis-Screenshots. Die Basis-Screenshots sind im Allgemeinen die Bilder, die in den vorherigen Testläufen aufgenommen und von einem Tester bewiesen wurden.
Schritt 3: Sobald das Tool die Ergebnisse der Bildvergleiche erhalten hat, generiert es einen Bericht, in dem alle gefundenen Unterschiede hervorgehoben werden.
Zum Beispiel,Das folgende Bild zeigt eines der Testautomatisierungswerkzeuge, das die Unterschiede in einer Winkelanwendung hervorhebt:
Schritt 4 : Im letzten Schritt überprüft der Tester den Bericht und prüft auf jeden Unterschied, ob es sich um einen Fehler oder eine gültige Änderung handelt (falsch positive Ergebnisse). Auf dieser Grundlage werden die Basisbilder aktualisiert.
Für den ersten Testlauf haben Sie keine Basisbilder. Daher werden die im ersten Durchlauf erhaltenen Bilder im Allgemeinen selbst als Basisbilder behandelt. Ab dem nächsten Lauf werden sie mit den Screenshots verglichen.
Best Practices für automatisierte visuelle Tests
- Wählen Sie ein Tool, das intelligent genug ist, um Fehlalarme zu ignorieren. Das Tool sollte in der Lage sein, Anti-Aliasing, Pixel-Offsets usw. zu verarbeiten, und besteht Ihre Tests aus diesen Gründen nicht.
- Die Testautomatisierung sollte in der Lage sein, dynamische und sich bewegende Inhalte zu verarbeiten.
- Verlassen Sie sich nicht auf Fehlerquoten oder die Konfiguration von Schwellenwerten. Das einzige, was wichtig sein sollte, ist, ob ein Mensch diesen Unterschied erkennen kann und ob sich dies auf die Benutzererfahrung auswirkt.
- Der Automatisierungsalgorithmus sollte in der Lage sein, die Struktur der Seite zu analysieren und Layoutvergleiche durchzuführen.
- Überprüfen Sie lieber die vollständige UI-Seite als einzelne Komponenten. Dies bietet mehr und bessere Abdeckung. Wenn Sie nur bestimmte Komponenten validieren, können Sie unerwartete Fehler übersehen.
Automatisierte Testwerkzeuge und visuelle Test-Frameworks
Heutzutage gibt es auf dem Markt eine Vielzahl (fast 30) von Werkzeugen für automatisierte visuelle Tests. Einige dieser Tools sind Open Source, andere kommerziell. Die meisten dieser Tools funktionieren auf die gleiche Weise, verfolgen jedoch einen anderen Workflow als die Zielgruppe.
Für Front-End-Entwickler gibt es zwei Arten von Frameworks für visuelle Tests. Zunächst benötigen Sie einen Testläufer, mit dem Sie die Tests schreiben und ausführen können. Zweitens benötigen Sie ein Browser-Automatisierungsframework, um Benutzerinteraktionen zu replizieren. Diese beiden Frameworks werden gemeinsam als visueller Testcode bezeichnet.
Mithilfe dieser Test-Frameworks erstellen die Entwickler den Code, der echte Benutzeraktionen wie das Eingeben von Text oder das Klicken auf Schaltflächen imitiert. Der Testcode enthält Befehle zum Erstellen von Screenshots an relevanten Punkten. Wenn der Test zum ersten Mal ausgeführt wird, wird ein erster Satz von Screenshots erstellt.
Diese Screenshots dienen als Vergleichsgrundlage für Änderungen in der Anwendung. Sobald die Baseline erstellt ist, führt der Entwickler den Code im Hintergrund aus. Wenn eine Änderung gefunden wird, wird der Screenshot der Änderung erfasst.
Der Testläufer vergleicht diesen Screenshot mit dem Basis-Screenshot für diesen Codebereich. Wenn Unterschiede zwischen den Bildern festgestellt werden, wird der Test als Fehler angesehen und der visuelle Fehler wird gemeldet.
Wenn der gesamte Testcode ausgeführt wird, wird automatisch ein Bericht generiert. Dieser Bericht wird manuell von einem menschlichen Tester überprüft, um alle Screenshot-Bilder zu überprüfen, die sich von den Basisbildern unterscheiden. Einige Tools generieren ein Diff-Bild, um den Unterschied zwischen dem tatsächlichen und dem erwarteten Screenshot hervorzuheben.
Wenn der Unterschied durch ein Problem im Code verursacht wird, kann der Entwickler dieses Problem beheben und den Code erneut ausführen. Wenn der Unterschied durch eine erforderliche Änderung in der Benutzeroberfläche der Anwendung verursacht wird, überprüft der Entwickler diesen Screenshot und aktualisiert den Basis-Screenshot, damit die zukünftigen Tests bestanden werden können.
Visual Testing umfasst sowohl kostenlose als auch kostenpflichtige Tools. Lassen Sie uns die Tools im Detail diskutieren.
Liste der besten visuellen Testwerkzeuge
Code- / Skript-basierte Open-Source- und kostenlose Tools
Nachfolgend finden Sie eine Liste der codebasierten Tools zur visuellen Validierung, die Open Source sind und kostenlos zur Verfügung stehen.
- PhantomCSS (UJs CapserJs)
- FBSnapshotTestCase (Verwendet XCTest)
- Zwillinge (Verwendet JS DSL)
- Nadel (Verwendet Python)
- Rspec-Seitenregression (Verwendet Capibara)
- Pix-Diff (Verwendet JS und Winkelmesser)
- Selen Visual Diff (Verwendet Java und WD)
- Vizregress (Verwendet .NET und WD)
- VisualCeption (Verwendet PHP und CodeCeption)
- Gespenst (Verwendet ein JS DSL)
Konfigurationsbasierte Open Source & Free Tools
Konfigurationsbasierte visuelle Validierungstools, die Open Source sind und kostenlos verfügbar sind, sind unten als Referenz aufgeführt:
- BaskstopJS
- dpxdtMake –Depicted
- CSSCritic
- Grunzende Fotobox
- VIFF
- Grüne Zwiebel
- Kobold
- CSS Visual Test
- Schnappen und vergleichen
- Grunzen-Vigo
- Galen Framework
- Automotion
Wir werden nicht näher auf die oben genannten Tools eingehen. Lassen Sie uns jedoch kurz auf die besten Tools eingehen.
Phantom CSS ist eines der beliebtesten Open-Source-Tools für die visuelle Validierung. Es hat 4.768 GitHub-Sterne. Es unterstützt Sie bei automatisierten visuellen Regressionstests. Es verwendet CasperJS, um die Screenshots aufzunehmen und sie mit den Baseline-Screenshots unter Verwendung von Resemble.js zu vergleichen.
(Bild Quelle ))
Es generiert die Bildunterschiede basierend auf RGB-Pixelunterschieden. Dieses Tool ist nur nützlich, wenn die Benutzeroberfläche vorhersehbar ist.
FBSnapshotTestCase ist auch ein weiteres beliebtes Tool in dieser Kategorie. Es hat 880 GitHub-Sterne.
Es erfasst eine konfigurierte UIView oder CALayer und verwendet eine Methode namens Rendern von InContext: um einen Bildschnappschuss seines Inhalts zu erhalten. Es vergleicht dieses Bild mit einem 'Referenzbild', das in Ihrem Quellcode-Repository gespeichert ist, und besteht den Test nicht, falls die beiden Schnappschüsse nicht übereinstimmen.
BackstopJS ist ein führendes Tool in der Kategorie der konfigurationsbasierten Tools. Es fängt die CSS Curveballs. Es ist ein Automatisierungstool für visuelle Regressionstests, mit dem die reaktionsfähige Web-Benutzeroberfläche getestet werden kann, indem die DOM-Screenshots im Laufe der Zeit abgeglichen werden.
Es ist ein benutzerfreundliches Tool mit einigen großartigen Funktionen wie der Benutzeroberfläche für die Berichterstellung im Browser, dem integrierten Docker-Rendering, JUnit-Berichten, CLI-Berichten usw.
Das Galen-Framework ist auch eines der bekanntesten Open-Source-Frameworks für visuelle Validierungstests. Mit diesem Tool können Sie das Layout und das reaktionsschnelle Design von Web-Apps automatisiert testen.
(Bild Quelle ))
Dieses Gerüst läuft gut im Selengitter.
Lassen Sie uns jetzt einige kommerzielle Tools und Frameworks diskutieren, die für Visual Test Automation verfügbar sind!
Kommerzielle Werkzeuge
# 1) Applitools
Es ist eines der beliebtesten kommerziellen Frameworks für automatisierte visuelle Tests und visuelle Regressionstests. Dieses Tool bietet eine KI-gestützte kognitive Vision. Es verwendet künstliche Intelligenz, um Sie bei der durchgängigen visuellen Prüfung und Überwachung zu unterstützen.
Mit Applitools können Sie automatisch Hunderte von UI-Komponenten auf allen Plattformen und Konfigurationen testen, ohne Code zu schreiben oder mit sehr geringem Code. Es unterstützt mehr als 40 Test-Frameworks und -Sprachen.
Es unterstützt auch den DevOps-Prozess, bei dem Sie Ihre visuellen Testfälle einfach in die CI / CD-Pipeline integrieren können. Mit diesem Tool können Sie auch benutzerdefinierte visuelle Berichte erstellen.
Dieses Framework wird von einigen Top-Unternehmen eingesetzt, darunter Sony, SAP, MasterCard und PayPal. Es hat auch sehr positive Kundenbewertungen.
Der Anbieter bietet drei Versionen dieses Frameworks an, d. H. Starter, Enterprise Public Cloud und Enterprise Dedicated Cloud. Sie müssen den Anbieter für die Preisgestaltung kontaktieren.
Webseite: Applitools
# 2) Crossbrowsertesting Visual Testing
Crossbrowsertesting ist eine von SmartBear für den gesamten Testprozess entwickelte Webtestplattform. Dieses Tool umfasst sowohl visuelle Tests als auch visuelle Regressionstests.
Die von diesem Tool bereitgestellte Funktion zum Testen von Screenshots erfasst ganzseitige Screenshots und hilft schnell dabei, visuelle Fehler zu finden und visuelle Inkonsistenzen zu verfolgen. Um einen Screenshot-Test zu starten, müssen Sie die URL angeben und einige Browser auswählen.
Screenshot-Tests sind für die meisten Desktop-Geräte und gängigen Mobilgeräte verfügbar. Sie können Ihre Browserauflösung für dynamische, reaktionsschnelle Tests über Desktop-Browser und mobile Orientierungen hinweg mischen und anpassen. Ihr Screenshot-Test erfasst drei Ansichten jeder Konfiguration, d. H. Fenster, ganzseitig und ganzseitig ohne Chrom.
Sie können Ihre Testergebnisse schnell filtern und die visuellen Fehler sehen. Sie können auch zu einem Live-Test springen und die visuellen Fehler debuggen oder korrigieren. Sie können lokale Umgebungen und Entwicklungsumgebungen mit einem lokalen Verbindungstool testen, das von dieser Software bereitgestellt wird.
Wenn Sie einen Screenshot-Test erfolgreich durchgeführt haben, können Sie ihn für visuelle Regressionstests einfach täglich, wöchentlich oder monatlich planen. Das Tool sendet auch die Testergebnisbenachrichtigungen.
Dieses Tool verfügt über eine automatisierte Vergleichs-Engine, mit der automatisierte Screenshots derselben Seite in verschiedenen Konfigurationen erfasst werden können. Von hier aus können Sie einen Basisbrowser auswählen und anschließend die hervorgehobenen Layoutunterschiede auswerten.
Es bietet auch einige erweiterte Optionen, um Ihren Test leistungsfähiger zu machen. Diese Optionen umfassen Standardauthentifizierung, Anmeldeprofil, Selenium-Skript, Screenshot-Verzögerung, E-Mail senden, feste Elemente ausblenden usw.
Lesen Sie auch = >> So machen Sie einen Screenshot in Selen
Dies ist ein preisgünstiges Tool. Es ist jedoch auch eine kostenlose Testversion verfügbar. Die Live-Testversion dieses Tools kostet 29 US-Dollar pro Monat, automatisierte Tests kosten 60 US-Dollar pro Monat und unbegrenzte Tests kosten 100 US-Dollar pro Monat.
Webseite: Crossbrowsertesting
# 3) Percy Visual Testing
Percy ist eines der leistungsstarken Tools für automatisierte visuelle Tests. Sie können die visuellen Tests integrieren, ausführen und überprüfen. Die Integration kann über Testautomatisierungs-Frameworks, CI / CD-Services oder direkt über Ihre Anwendung erfolgen.
Nach der Integration können wir mit der Ausführung der visuellen Tests beginnen, die für die Anwendungen und Komponenten erforderlich sind. Wenn ein visueller Test gestartet wird, extrahiert das Percy-Tool UI-Screenshots in verschiedenen Browsern und Reaktionsbreiten. Anschließend wird ein Pixel-für-Pixel-Basislinienvergleich durchgeführt und alle relevanten visuellen Änderungen in Ihrer Benutzeroberfläche identifiziert.
Sobald die Screenshots gerendert sind, können Sie sie auf visuelle Probleme überprüfen.
Die von diesem Tool bereitgestellten pixelweisen Unterschiede und reaktionsschnellen Unterschiede bieten eine hervorragende visuelle Abdeckung. Die Snapshot-Stabilisierungsfunktion minimiert außerdem Fehlalarme.
Dies ist ein kostenpflichtiges Tool. Es bietet jedoch auch eine kostenlose Testversion. Die kostenpflichtigen Versionen haben drei Varianten, d. H. Essential, Business und Enterprise. Die Essential-Version kostet 29 US-Dollar pro Monat, die Business-Version 849 US-Dollar pro Monat und die Enterprise-Version wird individuell nach Ihren Wünschen erstellt. Daher variiert der Preis entsprechend.
Webseite: Percy Visual Testing
# 4) Screener.io
Dies ist ein automatisiertes Testtool, mit dem Sie die Tests in Echtzeit in der Cloud aufzeichnen und ausführen können. Testabläufe können ohne Codierung einfach automatisiert werden. Es erkennt automatisch die Inkonsistenzen der Benutzeroberfläche auf verschiedenen Plattformen. Es unterstützt auch das Testen von Storybook-Komponenten.
Sie können visuelle Tests in Kombination mit Funktionstests im selben Testlauf durchführen, wodurch sich die Gesamttestabdeckung erhöht. Zu den Unternehmen, die screener.io verwenden, gehören Yammer, Microsoft, Uber usw.
Das Starter-Paket dieses Tools kostet ungefähr 249 US-Dollar pro Monat, das Perform-Paket kostet 499 US-Dollar pro Monat und das Enterprise-Paket bietet benutzerdefinierte Preise, die auf Ihren Anforderungen basieren.
Webseite: Screener.io
# 5) Abschlusstest
endtest ist eine UI-Testplattform, die codelose Automatisierungstests mit Hilfe von maschinellem Lernen unterstützt. Sie können die automatisierten Tests schnell erstellen, speichern und direkt in der Cloud ausführen. Sie haben auch eine Chrome-Erweiterung, über die Sie die Tests aufzeichnen können.
Dieses Tool verfügt über zahlreiche Funktionen wie das Generieren von zufälligen Testdaten, erweiterte Zusicherungen, automatische Sicherungen, Geolokalisierung, Live-Videos, Screenshot-Vergleich usw.
Webseite: Endtest
Fazit
In diesem Lernprogramm haben wir erläutert, wie wichtig das Testen der visuellen Validierung im heutigen Szenario ist, in dem die Softwareanwendung für mehrere Konfigurationen von Bildschirmgrößen, Mobilgeräten, Betriebssystemen, Bildschirmauflösungen usw. einwandfrei funktionieren muss.
Wenn Sie eine gute Benutzererfahrung wünschen, ist das Testen der visuellen Validierung genauso wichtig wie das Testen der Funktion. Visuelle Tests und Funktionstests können in Kombination eine breite Testabdeckung bieten.
Für visuelle Validierungstests steht eine Vielzahl von Open-Source- und kommerziellen Tools und Frameworks zur Verfügung. In diesem Tutorial haben wir einige der besten Tools besprochen. Diese Tools können Ihnen in der Tat beim automatisierten visuellen Testen und beim Testen der visuellen Regression helfen.
Fröhliches Lesen!
Literatur-Empfehlungen
- Beste Software-Test-Tools 2021 (QA Test Automation Tools)
- Alpha-Tests und Beta-Tests (eine vollständige Anleitung)
- Ultimativer Leitfaden für Validierungstests
- 11 besten Automatisierungstools zum Testen von Android-Anwendungen (Android App Testing Tools)
- Netzwerksicherheitstests und beste Netzwerksicherheitstools
- Funktionstests gegen nichtfunktionale Tests
- Testen von Primer eBook Download
- Die Unterschiede zwischen Unit Testing, Integration Testing und Functional Testing