Difference Testing mit recheck-web: Von der Installation bis zur Stabilisierung

Pflegen des Golden Master

Wenn Entwickler einen automatisierten Test erstellen, möchten sie, dass er grün ist, wenn sich nichts ändert. Der eigentliche Vorteil eines automatisierten Tests besteht jedoch darin, die Auswirkungen von Änderungen aufzuzeigen, insbesondere unbeabsichtigte Nebenwirkungen. Während der normalen Softwareentwicklung entstehen jedoch regelmäßig viele Änderungen. Mit einem Versionskontrollsystem kann man sie einfach akzeptieren, das heißt commiten. Mit recheck benötigt man die gleichen Funktionen, um den Golden Master zu pflegen.

Dafür müssen Entwickler zum Beispiel die recheck CLI installieren. Dafür entpackt sie einfach das Archiv zum Beispiel in C:\Program Files\recheck.cli-1.0.0. Dann müssen sie noch die Datei recheck.cmd oder recheck (je nach Betriebssystem) zu ihrem Pfad hinzufügen. Wie das zu bewerkstelligen ist, hängt stark vom Betriebssystem und dessen Version ab. Für Windows 10 funktioniert es beispielsweise so: Zuerst die "Einstellungen" öffnen. Dann im Suchfeld "Umgebung" eingeben und "Bearbeiten der Umgebungsvariablen" wählen. Danach klickt man auf die Registerkarte Erweitert | Umgebungsvariablen | Pfad | Bearbeiten | Neu. Schließlich fügt man den Pfad zum Ordner recheck/bin hinzu.

Ablauf unter Windows 10, um die recheck CLI dem Pfad hinzuzufügen (Abb. 1)

Ob alles funktioniert hat, können Entwickler überprüfen, indem sie recheck --version in eine neu gestartete CMD eingeben. Die Ausgabe sollte die aktuelle Version von recheck anzeigen, das heißt recheck CLI version 1.0.0.

Um Änderungen für die Prüfung und Pflege zu generieren, öffnen Entwickler einen Browser und gehen zu scratchpad.io. Wer die Seite öffnet, wird an eine eindeutige URL weitergeleitet (z. B. http://scratchpad.io/recheck-45678). Jetzt bearbeiten sie den Test aus dem vorherigen Abschnitt und ersetzen den Methodennamen google durch scratchpad und die URL durch die gerade neu erstellte, eindeutige URL von Scratchpad. Der Methodenrumpf sollte dann so ähnlich aussehen:

?  @Test
public void scratchpad() throws Exception {
re.startTest();
driver.get("http://scratchpad.io/recheck-45678");
re.check(driver, "open");

re.capTest();
}

Jetzt können Entwickler den Test mit mvn test erneut ausführen. Wie erwartet, schlägt er beim ersten Mal fehl, da recheck keinen Goldenen Master für den Test scratchpad finden kann. Aber unter src/test/resources/... wurde ein Golden Master erstellt. Wenn Entwickler den Test nun zum zweiten Mal ausführen, schlägt er immer noch fehl, da die Website eine volatile URL enthält. Später wird gezeigt, wie man das auf eine ausgefeiltere Art und Weise behandeln kann. Aber vorerst sollen Entwickler ihre neu installierte recheck CLI verwenden. Dazu navigieren sie in der CMD in das Projektverzeichnis. Dort geben sie dann recheck ein, um alle verfügbaren Befehle anzuzeigen. Die Ausgabe sollte etwa so aussehen:

?C:\Users\retest\Desktop\recheck-web-tutorial>recheck
Usage: recheck [--help] [--version] [COMMAND]
Command-line interface for recheck.
--help Display this help message.
--version Display version info.
Commands:
version Display version info.
diff Display given differences.
commit Accept given differences.
ignore Ignore given differences.
completion Generate and display auto completion script.
help Displays help information about the specified command

Jetzt sollen alle irrelevanten Änderungen für den Test automatisch ignoriert werden. Um das zu tun, geben Entwickler einfach recheck ignore --all target\test-classes\retest\recheck\com.mycompany.MyFirstTest.report ein. Das fügt automatisch die folgende Zeile zur recheck.ignore-Datei hinzu:

?matcher: xpath=HTML[1]/BODY[1]/DIV[1]/P[3]/IFRAME[1], attribute: src

Das lässt recheck nur ein Attribut eines Elements ignorieren: ein Twitter-API-bezogenes IFrame. Nun sollte die Wiederholung des Tests (mvn test) einen erfolgreichen Build und einen bestandenen Test anzeigen. Jetzt können Entwickler mit dem regulären Browser zu der URL wechseln, die sie auch im Test öffnen (z. B. http://scratchpad.io/recheck-45678) und die angezeigten Inhalte bearbeiten. Zum Beispiel ersetzen sie hier <h1>Welcome to <span>scratchpad.io</span></h1><br> auf der linken Seite der Website mit <h1>Welcome to <span>recheck</span></h1><br>. Wenn sie danach den Test erneut durchführen, sollte das zu folgendem Ergebnis führen:

?The following differences have been found in 'com.mycompany.MyFirstTest'(with 1 check(s)):
Test 'scratchpad' has 7 differences in 1 states:
open resulted in:
textnode [scratchpad.io] at 'HTML[1]/BODY[1]/DIV[3]/DIV[2]/DIV[1]/DIV[3]/DIV[23]/textnode[2]':
text: expected="scratchpad.io", actual="recheck"
DIV at 'HTML[1]/BODY[1]/DIV[3]/DIV[2]/DIV[1]/DIV[5]/DIV[1]':
left: expected="210.125px", actual="173.75px"
right: expected="252.813px", actual="289.188px"
style: expected="left: 210.125px; top: 286px; width: 6.0625px; height: 13px;", actual="left: 173.75px; top: 286px; width: 6.0625px; height: 13px;"
TEXTAREA at 'HTML[1]/BODY[1]/DIV[3]/TEXTAREA[1]':
left: expected="255.25px", actual="218.875px"
right: expected="148.297px", actual="184.672px"
style: expected="top: 285px; height: 13px; width: 6.0625px; left: 255.25px;", actual="top: 285px; height: 13px; width: 6.0625px; left: 218.875px;"
at de.retest.recheck.RecheckImpl.capTest(RecheckImpl.java:137)

Jetzt sieht man, dass Scratchpad ein style-Attribut generiert und anpasst. Da alle relevanten Style-Informationen gerendert und damit durch einzelne CSS-Attribute repräsentiert werden, können Entwickler den ignorierten Attributen style hinzufügen. Die Wiederholung des Tests zeigt nun die erwarteten Unterschiede im text und resultierend daraus auch in den Attributen left und right.

Angenommen, dies ist eine beabsichtigte Änderung und man will den Golden Master aktualisieren. Dazu können Entwickler nun ein CMD im Projektordner öffnen und den folgenden Befehl ausführen:

?recheck commit --all \target\test-classes\retest\recheck\com.mycompany.MyFirstTest.report

Das Ergebnis des Aufrufs sollte ungefähr so aussehen:

?
Updated SUT state file C:\Users\retest\Desktop\recheck-web-tutorial\src\test\resources\retest\recheck\com.mycompany.MyFirstTest\scratchpad.open.recheck

Wenn es mehr als einen Golden Master gäbe, würden nun alle aktualisiert. Verwalten Entwickler ihre Golden-Master-Dateien in einem Versionskontrollsystem, werden diese nun als geändert angezeigt und müssten zum Beispiel in Git committet werden. Jetzt lässt sich der Test erneut ausführen (mvn test) und sehen, ob das Update funktioniert hat: Der Test sollte prüfen, ob die Seite "welcome to recheck" enthält und entsprechend erfolgreich sein.

Um weitere Funktionen der recheck CLI zu zeigen, passt man den Inhalt der Scratchpad-Seite noch einmal an. Dazu öffnen Entwickler den Browser und ändern die Begrüßungsnachricht auf recheck-web. Das Ausführen des Tests sollte den Unterschied erneut aufzeigen und eine Berichtsdatei erstellen. Entwickler können nun die recheck CLI nutzen, um den Inhalt der Datei anzuzeigen, indem sie folgenden Befehl ausführen:

recheck diff target\test-classes\retest\recheck\com.mycompany.MyFirstTest.report

Das sollte zu einer Ausgabe ähnlich der folgenden führen:

Checking test report in path 'C:\Users\retest\Desktop\recheck-web-tutorial\target\test-classes\retest\recheck\com.mycompany.MyFirstTest.report'.
Reading JS ignore rules file from C:\Users\retest\Desktop\recheck-web-tutorial\.retest\recheck.ignore.js.
Specified JS ignore file has no 'shouldIgnoreAttributeDifference' function.
Specified JS ignore file has no 'shouldIgnoreElement' function.

Test 'scratchpad' has 5 differences in 1 states:
open resulted in:
textnode [recheck] at 'HTML[1]/BODY[1]/DIV[3]/DIV[2]/DIV[1]/DIV[3]/DIV[23]/textnode[2]':
text: expected="recheck", actual="scratchpad.io"
DIV at 'HTML[1]/BODY[1]/DIV[3]/DIV[2]/DIV[1]/DIV[5]/DIV[1]':
left: expected="173.75px", actual="210.125px"
right: expected="289.188px", actual="252.813px"
TEXTAREA at 'HTML[1]/BODY[1]/DIV[3]/TEXTAREA[1]':
left: expected="218.875px", actual="255.25px"
right: expected="184.672px", actual="148.297px"