Guten Tag.
In diesem Artikel möchte ich über meine Erfahrungen bei der Automatisierung visueller Regressionstests sprechen.
Einführung
Ich entschied mich für die Automatisierung visueller Tests, nachdem ich versehentlich einen kleinen Fehler im Layout entdeckt hatte. Das Projekt hat das Design einer Seite geändert, und die Änderungen haben Nicht-Aufgabenseiten berührt.
Nachdem ich entschieden hatte, dass das manuelle Überprüfen des Erscheinungsbilds der Seiten der Website keine Option war, begann ich mit der Automatisierung.
Wir brauchten eine einfache Lösung mit praktischen Berichten. Um Autotests ohne Einschränkungen schreiben zu können, vergleichen Sie Screenshots von Seiten und Site-Elementen und verwenden Sie verschiedene Browser.
Nach einer kurzen Suche nach einer vorgefertigten Lösung / einem fertigen Framework wurde entschieden, dass es einfacher ist, eine eigene Lösung mit der erforderlichen Funktionalität und dem erforderlichen Format von Berichten zu schreiben. Von den Optionen, die ich sah, schien nur das Galen Framework geeignet zu sein, aber ich fand es, nachdem ich meine Lösung geschrieben hatte.
Nachdem ich Autotests implementiert und getestet hatte, entschied ich mich, die Tests ein wenig zu verfeinern und ein separates Projekt zu erstellen, damit ich es später auf anderen Websites und Projekten verwenden kann.
Über das Projekt
VisualRegressionBoilerplate ist ein relativ einfaches Projekt mit einer bestimmten Struktur.
So etwas wie eine Boilerplate-Vorlage / ein Projekt für visuelle Autotests.
Das Projekt ist für kleine Standorte / Projekte gedacht. Für diejenigen, die eine einfache Lösung ohne komplexe Frameworks benötigen.
Die Möglichkeiten
- Vergleich von Screenshots von Site-Seiten. Sie können ein oder mehrere ignorierte Elemente angeben.
- Vergleich von Screenshots von Site-Elementen.
- Tests können mit verschiedenen Bildschirmbreiten ausgeführt werden: Mobil - 360 Pixel, Tablet - 768 Pixel, Desktop - 1920 Pixel
- Standardmäßig sind zwei Browser verfügbar - Chrome und Firefox + dieselben Browser im Headless- Modus.
- Berichtsgenerator - Für jeden Test werden 4 Screenshots erstellt - aktuell, erwartet, Differenz, GIF. Wenn keine erwarteten Screenshots vorhanden sind, werden die tatsächlichen Screenshots wie erwartet gespeichert.
Verwendete Technologien
- Java
- Testng
- Maven
- Selen Webdriver
- aShot - eine Bibliothek zum Vergleichen von Bildern
So beginnen Sie mit einem Projekt zu arbeiten
- Installieren Sie Java, Maven, Browser.
- Im Konstruktor der DriverWrapper- Klasse können Sie bei Bedarf Browser hinzufügen oder entfernen
- Die TestConfig- Klasse speichert alle Projekteinstellungen - Browser, Standardgröße des Browserfensters usw. Hier können Sie Einstellungen hinzufügen oder ändern.
- Legen Sie in der BasePage- Klasse die Adresse der getesteten Site fest. Sie können für verschiedene Umgebungen (dev, stage, prod) eine andere Adresse festlegen. BasePage und die übrigen Klassen im App- Modul sind ein Beispiel für das Seitenobjektmuster . Die Verwendung ist optional.
- Untersuchen Sie die TestExample-Testklasse und erstellen Sie als Beispiel Ihre eigenen Testklassen .
- Fügen Sie testng.xml neue Testklassen hinzu
- Führen Sie Tests mit den erforderlichen Parametern durch maven durch
- Überprüfen Sie den Bericht im Berichtsordner
Im
README- Projekt wird alles genauer beschrieben.
Wie schreibe ich Tests?
Im Allgemeinen, wie Sie möchten. Es gibt keine Einschränkungen. Sie können das Seitenobjektmuster oder etwas anderes verwenden.
Sie müssen lediglich die folgenden Funktionen verwenden, um Screenshots zu vergleichen:
Für Seiten:Vergleich der Seiten-Screenshots:
comparePageScreenshots("index_page");
Vergleich von Seiten-Screenshots mit dem Ignorieren eines Elements:
comparePageScreenshots("index_page_ignored_element", IndexPage.MACKBOOK_BLOCK);
Vergleich von Seiten-Screenshots mit dem Ignorieren mehrerer Elemente:
comparePageScreenshots("index_page_ignored_element", new String[]{"section.panel.features.dark", "div.macbook"});
Vergleich der Screenshots des Seitenelements - das Element kann mit dem CSS-Locator durchsucht werden
compareElementScreenshots("index_page_element", IndexPage.FORGE_BLOCK);
Oder Sie können ein Objekt der Klasse
WebElement übergeben compareElementScreenshots("index_page_element", driver.findElement(By.cssSelector("a.full.forge")));
Mögliche Probleme
- Tests können aufgrund von dynamischem Inhalt auf der Seite fehlschlagen. Das Problem wird gelöst, indem Elemente mit dynamischem Inhalt ignoriert werden.
- Tests können aufgrund einiger Pixelunterschiede fehlschlagen. Sie können dies beheben, indem Sie die Einstellung TestConfig.allowableDiffSize bearbeiten .
- Manchmal haben alle Bilder oder einige Elemente auf der Site keine Zeit zum Laden. Um dies zu beheben, habe ich die Funktion preparePageForScreenshot () geschrieben, mit der die Seite mithilfe von JavaScript nach oben und unten gescrollt wird. Das hilft aber nicht immer.
Zusammenfassung
Derzeit umfasst das Projekt etwa 50 Tests - Seiten und verschiedene Seitenelemente.
Durch das Bash-Skript werden Autotests gestartet und die Site wird sofort in drei Erweiterungen (Mobile, Tablet, Desktop) getestet.
Es gibt einige Probleme aufgrund des dynamischen Inhalts und der Tatsache, dass einige Elemente der Website nicht immer Zeit zum Laden haben, aber Autotests können ihre Aufgabe bewältigen.
Änderungen am Layout sind sofort sichtbar.
Link zum Projekt-Repository -
VisualRegressionBoilerplate