End 2 End Test the Visual Studio Way

Auch wenn die ganze Welt von JavaScript besetzt ist, ein kleines Dorf an der Grenze zu Österreich leistet unerbittlich Widerstand. Test einer Web Anwendung muss doch auch mit Visual Studio 2013 funktionieren. Und das geht, ganz ohne jeden Code.

Ausgehend von einem einfachen Web Projekt, wird ein Taschenrechner implementiert. Zwei Felder, ein Add Button, am Client per JavaScript gerechnet. Dabei spielt das keine Rolle ob ASP.NET Webforms, SPA mit Angular oder MVC.

Zuerst wird dem Web Projekt ein Coded UI Test Projekt in der Visual Studio Solution hinzugefügt. Im neuen Projekt wird per Add Item ein Coded UI Test erstellt.

image

Ziel ist es das Nutzerverhalten im User Interface zu simulieren. Dafür werden die Eingaben aufgezeichnet,

image

Nun erscheint rechts unten der Testrecorder –genannt UI Map Test Builder. Dieser zeichnet alles auf, was wir so tun. Egal mit welcher Anwendung.

image

Die Aufnahme startet mit dem roten Button. Danach öffnet man den Browser und ruft die URL auf. Falls man Aktivitäten später entfernen möchte, kann man dies über das Treppensymbol. Bei klick zeigt es die Liste der recorded Actions an.  Versehentlich erzeugte Einträge lassen sich später so noch löschen. Im Brweoser wurden in die HTML Input Elemente die Zahlen 1 und 2 eingetippt und am Schluss der Berechnen Button geklickt.

image

Nun wird Generate Code gedrückt. Allerdings fehlt uns noch die Prüfung des Rechenergebnisses. Kurz gesagt ob 1+2 auch 3 ergibt.

image

Jetzt sollte eine Art Zielscheibe im Coded UI Test Builder sichtbar sein

image

Dieser wird angeklickt und dann der Mauszeiger auf dem DIV im Browser Fenster platziert, das das Ergebnis enthält (also 3). Dann wird STRG SHIFT I gedrückt.

Es wird einen Eigenschaftsdialog des DIV (hier mit der ID c) angezeigt. Dann scrollt man auf die Eigenschaft innerText und wählt eine Assertion.

codedUI2

Diese Bedingung definiert den Erfolg oder Misserfolg des Tests. Hier soll das Ergebnis 3 lauten. Der Comparator AreEqual wird mit dem Comparison Value 3 belegt.  Anschließend muss nochmalig die Code Generierung angestoßen werden.

In meinem Projekt befinden sich auch Unit Testroutinen, die mit Jasmine.js erstellt wurden. Außerdem ein nicht funktionierender E2E Test mit protractor.js,. CalcUitestAdd ist mein aufgezeichneter Coded UI Test.

Alle Tests werden im Test Explorer angezeigt und durchgeführt.

image

Wenn der Test läuft, startet einen Instanz des Internet Explorers und wird wie von Geisterhand mit Daten gefüllt. Auch der Button wird geklickt, dadurch die Berechnung angestoßen und das Ergebnis im DOM Element mit der ID c angezeigt. Ein übereifriger HTML Designer (rein fiktiv) hat aus dem DIV ein Label gemacht und der Test schlägt fehl.

image

Dabei funktioniert die Webseite trotzdem korrekt. Das ist genau das Problem von Tests, egal ob Unit Test oder E2E, auch Tests haben Fehler. Das bedeutet ein Test schlägt fehl, obwohl der Code korrekt ist, oder noch schlimmer umgekehrt.

Kommentare sind geschlossen