Einfache Lösung für visuelle Regressionstests in Java + Selenium Webdriver + aShot

Guten Tag.

Ich habe bereits einen Artikel über meine Erfahrungen mit der Automatisierung von visuellen Regressionstests veröffentlicht.

Seitdem wurde das Projekt erheblich verbessert - die Struktur hat sich geändert, es ist viel einfacher geworden, das Projekt einzurichten und Autotests zu schreiben, der Bericht wurde erheblich verbessert.



VisualRegressionFramework ist eine relativ einfache Lösung für kleine Projekte. Für das Projekt, mit dem ich arbeite, wurden ungefähr 50 Autotests (Seiten + Elemente) geschrieben.

Ich führe Tests nach Änderungen im Layout durch. Änderungen sind sofort sichtbar, das heißt, Probleme wie „ das Layout des Elements auf einer Seite geändert, aber auf der anderen Seite ist alles kaputt gegangen “ wurden schon lange behoben.

Verwendete Technologien - Java, TestNG, Maven, Selenium Webdriver, aShot (Bibliothek zum Vergleichen von Bildern).

Möglichkeiten:

• Vergleichen Sie Screenshots von Seiten
• Vergleich von Seiten-Screenshots + Ignorieren bestimmter Elemente (dynamischer Inhalt usw.)
• Vergleichen Sie Screenshots von Elementen
• Haltepunkte - Sie können Screenshots von Seiten oder Elementen mit unterschiedlichen Breiten vergleichen. Standardmäßig werden 3 Haltepunkte verwendet - 1920px, 768px, 360px
• Automatische Erzeugung erwarteter Screenshots
• Sie können Tests als gewöhnliche funktionale Autotests schreiben, es gibt keine Einschränkungen - dies ist wichtig, da es manchmal erforderlich sein kann, einige komplexe Aktionen durchzuführen, bevor ein Screenshot erstellt wird.

Bericht

Der Bericht sieht folgendermaßen aus:



Die linke Seitenleiste enthält eine Liste von Tests, ein Protokoll mit Fehlern und den Browser, in dem Autotests ausgeführt wurden.

Sie können auch zwischen Haltepunkten wechseln und jedes Bild vergrößern, indem Sie darauf klicken.

Rahmenstruktur

src / config / visual.properties - hier sind alle notwendigen Einstellungen

• Haltepunkte - Haltepunkte, die Breite der Site, an der ein Screenshot erstellt wird
• allowableDiffSize - zulässige Abweichung zwischen dem erwarteten und dem tatsächlichen Screenshot in Pixel
• Pfade zu Ordnern mit Screenshots
• Pfade zur Vorlage für den Bericht, zum Bericht selbst und zur Datei mit dem Fehlerprotokoll

report / REPORT.html - Bericht

Screenshots

• actual - Aktuelle Screenshots, die während des Tests erstellt wurden
• erwartet - erwartete Screenshots. Wenn keine erwarteten Screenshots vorhanden sind, werden diese automatisch erstellt, wenn Sie den Test zum ersten Mal ausführen
• diff - Bild, auf dem nicht übereinstimmende Bereiche rot hervorgehoben sind
• GIFs - GIFs, die aus tatsächlichen, erwarteten und diff-Bildern erstellt wurden

src / main / framework - Framework- Klassen - Berichtsgenerator, Screenshots, Gifs usw.

src / main / app ist nur ein Beispiel für eine Seitenobjektarchitektur. Sie muss nicht verwendet werden und kann gelöscht werden.

src / test / resources / testng.xml - hier müssen Sie neue Testklassen zwischen A_BeforeAllTests und A_AfterAllTests hinzufügen

src / test / java

• A_BaseTest - Die Basistestklasse, von der alle neuen Testklassen erben sollen
• A_BeforeAllTests - Initialisierung der Einstellungen und des Browsers vor den Tests
• A_AfterAllTests - Generierung von Berichten nach Tests
• A_ErrorsLogListener - Protokollierungsfehler
• StaticGuestTest - Beispiel für eine Testklasse

Klassen werden in einer bestimmten Reihenfolge ausgeführt:

1. Zunächst erfolgt die Initialisierung der Einstellungen und der Browserklasse A_BeforeAllTests
2. dann teste autotests
3. und am Ende wird ein Bericht generiert - Klasse A_AfterAllTests

Wie man mit dem Framework arbeitet

Testbeispiel

@Test public void indexPage() { app.open(); app.preparePageForScreenshot(); Comparer.comparePages("index_page"); } 

Im obigen Beispiel wird die Seite einfach geöffnet, dann wird die Seite für einen Screenshot vorbereitet, wonach die erwarteten und aktuellen Screenshots der Seite verglichen werden. Screenshots werden an allen Haltepunkten erstellt und verglichen.

Warum brauchen wir die preparePageForScreenshot () Funktion :

Standardmäßig scrollt die Seite einfach nach unten und nach oben durch js + gibt es eine zweite Verzögerung. Dies ist erforderlich, damit alle Bilder, Stile usw. geladen werden können.

Auch in dieser Funktion können Sie unnötige Elemente ausblenden, beispielsweise einen dynamischen Block mit Werbung. In meinem Projekt verstecke ich Fußzeile, Kopfzeile und Seitenleiste, da sie auf allen Seiten gleich sind. Ohne diese Elemente laufen die Tests schneller ab und die Überprüfung eines Berichts ist einfacher.

Seiten

Vergleichen Sie Screenshots der Seite in allen Haltepunkten:

 Comparer.comparePages("test_name"); 

Screenshots der Seite in allen Haltepunkten vergleichen + Elemente ausblenden:

 Comparer.comparePages("test_name", new String[]{"css_locator_1", "css_locator_2"}); 

Vergleichen Sie Screenshots der Seite nur am angegebenen Haltepunkt:

 Comparer.comparePagesWithBreakpoint("test_name", "1920"); 

Vergleichen Sie Screenshots der Seite nur an dem angegebenen Haltepunkt + Ausblenden von Elementen:

 Comparer.comparePagesWithBreakpoint("test_name", "1920", new String[]{"css_locator_1", "css_locator_2"}); 

Gegenstände

Vergleichen Sie Screenshots des angegebenen Elements in allen Haltepunkten:

 Comparer.compareElements("test_name", "css_locator"); 

Vergleichen Sie Screenshots des angegebenen Elements nur am angegebenen Haltepunkt:

 Comparer.compareElementsWithBreakpoint("test_name", "1920", "css_locator"); 

Link zum Projekt-Repository

Aktuelle Ausgaben

• Möglicherweise wird am Ende des Screenshots ein schwarzer Bereich hinzugefügt, auf den ich seit einiger Zeit gestoßen bin. Das Problem verschwand, als ich anfing, die Fußzeile auszublenden. Dies ist ein Problem mit der Shot-Bibliothek - https://github.com/pazone/ashot/issues/169
• Der Autotest wird möglicherweise aufgrund eines Unterschieds von mehreren Pixeln nicht bestanden. Das Problem wird durch Erhöhen des Werts von TestConfig.allowableDiffSize behoben .