Visuelle Regressionstests

Visuelle Regressionstests mit BackstopJS.

Jeder, der mit Tests oder Entwicklung arbeitet, hat sicherlich die Bedeutung von Au t -Tests erkannt, die während der Entwicklung durchgeführt werden. Unabhängig von Ihrer Erfahrung wird diese Wahrnehmung im Laufe der Zeit zu Ihnen kommen.
Dieser Artikel bietet keinen Überblick über automatisierte Tests. Es handelt sich insbesondere um einen relativ bekannten visuellen Regressionstest.
Visuelle Regressionstests bieten einen alternativen Ansatz zum Testen von Webseiten. Anstatt nur sicherzustellen, dass ein Element oder ein Textwert vorhanden ist, öffnet der Test die Seite und prüft, ob dieser bestimmte Block genau so angezeigt wird, wie er angezeigt werden soll.
Um diese Art von Test durchzuführen, gibt es eine Reihe von Tools, aber heute werde ich eine sehr einfache und schnelle Möglichkeit demonstrieren, visuelle Tests mit BackstopJS durchzuführen.

Was ist BackstopJS?

BackstopJS ist eine Anwendung für visuelle Regressionstests, an der CasperJS , PhantomJS und ResembleJS in einem Testprojekt beteiligt sind. Sie sind sehr einfach zu installieren und zu konfigurieren, um sie unter verschiedenen URLs und Bildschirmgrößen zu testen.
BackstopJS macht einen Screenshot, der als Bild von gespeichert wird Basis für zukünftige Referenz. Wenn Sie etwas auf der Website ändern und BackstopJS erneut ausführen, wird ein neuer Screenshot erstellt und mit dem Originalbild verglichen. Wenn es keine Unterschiede zwischen den Bildern gibt, gibt der Test “bestanden” zurück. Wenn die Bilder jedoch nicht übereinstimmen, gibt der Test “fehlgeschlagen” zurück und es wird ein neues Bild generiert. Dies zeigt den Unterschied zwischen den beiden Bildern.
Dies ist ein perfektes Tool zum Testen von Änderungen in Homologations- und Produktionsumgebungen.
BackstopJS-Tests basieren auf mehreren Schlüsselkomponenten, werden jedoch für diesen Test nur verwendet zwei:

BackstopJS e CasperJS

„Um die Tests auf Ihrem Computer ausführen zu können, muss NodeJS installiert sein.“
BackstopJS Zuerst müssen wir ein Testprojekt einrichten, um zu sehen, wie wir dieses Tool in der Praxis einsetzen können. Die Installation von BackstopJS ist einfach. Sie müssen Ihrem Projekt lediglich einige Abhängigkeiten hinzufügen:

npm install Backstopjs –g
npm installiere Casperjs –g

„Ich empfehle die globale Installation von BackstopJS und CaserJS auf Ihrem Computer, um die Ausführung der Tests zu vereinfachen.“

Erstellen eines Testprojekts
Erstellen Sie einen My_Projetct-Ordner mit Beispielinhalten, die ich in Codepen angehängt habe, exportieren Sie die Seite als .zip auf Ihren Computer und entpacken Sie sie.
Link_Codepen: https://codepen.io/Vilariano/pen/BweJJq

Um Backstop in Ihrem Projekt zu konfigurieren, müssen Sie Ihren Projektordner in der Eingabeaufforderung öffnen und den folgenden Befehl ausführen:

Backstop init

Dieser Befehl erstellt einen Ordner mit dem Namen backstop_data und generiert ein Skript backstop.json. Hier fügen wir die Befehle für die Tests ein.

package.json konfigurieren

Öffnen Sie die Datei Backstop.json in Ihrem bevorzugten Editor (in meinem Fall verwende ich Sublime Text).
Definieren Sie zunächst die Abmessungen unserer Testanzeigefenster und ändern Sie Breite und Höhe.
Ersetzen Sie die folgenden Definitionen in Ihrer Backstop.json-Datei:

“Ansichtsfenster”: [
{
“Etikett”: “Telefon”,
“Breite”: 960,
“Höhe”: 480
},
{
“label”: “Tablet_A”,
“width”: 660,
“height”: 480
},
{
“label”: “Tablet_B”,
“Breite”: 460,
“Höhe”: 480
},
{
“Etikett”: “Desktop”,
“Breite”: 1024,
” Höhe ”: 768
}
],

Dann konfigurieren wir unser Testszenario. In diesem Teil benötigen wir 5 Definitionen, um die Tests zu starten, von denen sie stammen:

“label”: “”, – Hier gebe ich eine Beschreibung für meinen Test (in meinem Fall verwende ich Phone, Tablet the Desktop).
“url”: “”, – Hier definieren Sie die Ziel-URL (als Test und Standort verwenden wir index.html).
“referenceUrl”: “”, – Hier definieren Sie die “url” Referenz (als Test und Speicherort verwenden wir index.html).
“Selektoren”: [], – Hier müssen Sie die folgende Definition vornehmen: “Selektoren”: [“html”].
Sie teilen Backstop also mit, dass er einen Screenshot aller “Selektoren” machen soll. Seiten-HTML ”. Sie können auch festlegen, dass nur ein Screenshot der Fußzeile oder des Menüs erstellt wird. In diesem Fall soll der gesamte Bildschirm erfasst werden. Unser Testszenario sieht also folgendermaßen aus:
“Szenarien”: [
{
“label”: “Telefon, Tablet the Desktop”,
“cookiePath”: “backstop_data / engine_scripts / cookies.json” “,
” url “:” index.html “,
” referenceUrl “:” index.html “,
” readyEvent “:” “,
” readySelector “:” “,
“Verzögerung”: 0,
“hideSelectors”: [],
“removeSelectors”: [],
“hoverSelector”: “”,
“clickSelector”: “”,
“PostInteractionWait”: “”,
“Selektoren”: [“html”],
“selectorExpansion”: true,
“misMatchThreshold”: 0.1,
“requireSameDimensions”: true
}
],

Starten von Tests.

Um den Test durchzuführen, benötigen Sie nur zwei Befehle:
Backstop-Referenz – Dieser Befehl erstellt einen Screenshot als Vergleichsreferenz.
Backstop-Test – Dieser Befehl führt den von uns konfigurierten Test aus Datei Backstop.json.
Ausführen des ersten Befehls (Backstop-Referenz):


Ihr Ergebnis sollte wie in den obigen Bildschirmen aussehen!
Als Nächstes führen wir den 2. Befehl aus (Backstop-Test). Dieser Befehl führt den Test durch, den Sie in der Datei Backstop.json konfiguriert haben. Das heißt, er öffnet die Seite index.html im Browser, erstellt einen Screenshot und vergleicht ihn mit den Referenzdateien, die wir beim Ausführen erstellt haben den Backstop-Referenzbefehl. Wenn Backstop den Test abgeschlossen hat, wird automatisch eine Datei mit dem Namen BackstopJS-Bericht generiert und in Ihrem Browser geöffnet, um den Unterschied anzuzeigen. Komm schon?


BackstopJS-Bericht:

Okay, unser Test hat wunderbar bestanden.
Er hat bestanden, weil wir keine Änderungen an der Seite vorgenommen haben, sodass es einen Unterschied gab.
Also machen wir das?
Was wir tun werden, ist einfach.
Lass uns gehen Richten Sie den Namen “Agnaldo Vilariano” oben aus, richten Sie den Namen “News Section” in der Mitte aus und richten Sie den Namen “Agnaldo Vilariano” in der Fußzeile rechts aus.
Fügen Sie dazu Folgendes hinzu:
a text-align: left; zur .top-Klasse.
a text-align: center; innerhalb des H2, das sich innerhalb der ID # row2 befindet.
eine Textausrichtung: rechts; zur .footer-Klasse.

Jetzt, wo wir einen Fehler verursacht haben, werden wir erneut testen?
Führen Sie dazu den Backstop-Testbefehl erneut aus.


Diesmal ist der Test fehlgeschlagen!

Dies geschah, weil wir Änderungen vorgenommen haben, dh Fehler verursacht haben. Und als er es mit der Referenzdatei verglich, fand er die Fehler, die wir verursacht haben, wie im Bericht gezeigt:

Das war’s, Leute! Was wir gemacht haben, war eine visuelle Überprüfung , dh ein visueller Regressionstest.
Es gibt viele Tools, um diese Art von Test durchzuführen, aber ich verwende BackstopJS, weil Es ist sehr einfach und die anderen auf dem Markt, mit denen ich nicht viele Integrationen benötige, führen einfach zwei Installationen durch und konfigurieren meine “.Json” -Datei so Er beantwortet seine Tests und führt einen Befehl in CMD aus.

Sie können mir gerne Fragen stellen. Hinterlassen Sie Ihren Kommentar oder schreiben Sie mir in den sozialen Medien.

Meine Forschungsquellen:

https://css-tricks.com/automating-css-regression-testing/
https://github.com/garris/BackstopJS
https://garris.github.io/BackstopJS/

Valeew!