Testen von Web-Formularen (Professionelle Browser-Automation mit Selenium WebDriver , Teil 2)

In Teil 1 dieses Artikels habe ich gezeigt, wie Sie den Webbrowser mit Hilfe von Selenium WebDriver (SelWD) für sich arbeiten lassen. Nun stelle ich die von mir entwickelte Erweiterung SeleniumFormExtensions vor, die das Testen von Web-Formularen im Rahmen eines Continuous-Integration-Ansatzes vereinfacht. Die Lösung ist in .NET und C# erstellt, lässt sich aber natürlich auch in den anderen Sprachen, die SelWD unterstützt, nachbilden (Java, Ruby, Python, JavaScript etc.).

Die Demo-Solution

Als Grundlage dient eine Solution für Visual Studio 2012, in der Sie drei Projekte finden:

  1. Die SelWD-Erweiterung SeleniumFormExtensions, mit deren Hilfe sich Formulare leicht und sehr flexibel testen lassen.
  2. Eine Web-Anwendung WebApplication. Sie enthält die zu testende Formularseite „Profile.aspx“ (Bild 1).
  3. Das eigentliche Testprojekt WebApplication.Test Es enthält die Klassen zum Testen des Formulars. Das Projekt macht von NUnit1) Gebrauch – allerdings nicht, um Unit Tests auszuführen, sondern Browsertests, denn auf diese Weise lassen sich die Tests in einen Continuous-Integration-Prozess einbinden.
Zu testende Seiten Profile.aspx
Bild 1: Die zu testende Seite Profile.aspx

Installation & Konfiguration

  1. Installieren Sie NUnit von der NUnit Download-Seite2).
  2. Deaktivieren Sie etwaige Webserver auf Ihrem System, die unter localhost auf Port 80 laufen.
  3. Richten Sie die Browser-Treiber für Internet Explorer und Chrome wie in Teil 1 beschrieben ein.
  4. Laden Sie die Demo-Solution SeleniumDemo.zip aus unserem Downloadbereich herunter und legen Sie sie nach dem Entpacken in Ihrem Visual-Studio-Projektordner ab.
  5. Öffnen Sie die Solution in Visual Studio und aktualisieren Sie die externen Pakete über NuGet3) wie folgt:

Update-Package Selenium.WebDriver
Update-Package Selenium.Support
Update-Package NUnit

  1. Starten Sie die Webanwendung (Taste F5).
  2. Starten Sie NUnit durch Doppelklick auf die Datei SeleniumDemo.nunit.

Nun können Sie bereits die Demo-Tests über NUnit ausführen. Hierauf öffnet SelWD drei Browserfenster, meldet sich jeweils an der Webanwendung an und füllt das Formular der Profilseite aus. Dabei wird auch ein Bild hochgeladen. Schließlich werden die Formulardaten übermittelt und die folgende Seite, welche die empfangenen Daten nochmals anzeigt, wird auf korrekte Werte getestet.

Sollte es Probleme geben, die Tests auszuführen, kontrollieren Sie, ob die Webanwendung unter http://localhost läuft und die Browser-Treiber für Internet Explorer und Chrome  gefunden werden. Wenn der Upload der Bilder nicht funktioniert, stellen Sie sicher, dass in der Datei Configuration/TestData/UserProfiles.xml des Projekts WebApplication.Test der Pfad zum Upload-Verzeichnis stimmt und Sie Schreibrechte auf diesem Verzeichnis besitzen.

Wenn die Tests erfolgreich durchlaufen, können Sie sich daran machen, eigene Tests zu erstellen. Eine Schritt-für-Schritt-Anleitung finden Sie weiter unten (Eigene Tests). Dabei ist es allerdings hilfreich, den Aufbau der Formularerweiterungen SeleniumFormExtensions und des Testprojekts WebApplication.Test zu verstehen, so dass ich diese zunächst erläutere.

Formularerweiterungen SeleniumFormExtensions

Die Klassenbibliothek SeleniumFormExtensions besteht im Wesentlichen aus folgenden Klassen (vgl. Bild 2):

  1. Eine Basisklasse PageObject, die eine FillForm– und einige Hilfsmethoden zur Verfügung stellt, welche das Ausfüllen von Formularen und generell die Interaktion mit Seitenelementen vereinfachen.
  2. Eine Basisklasse für Tests (SeleniumTest), die sich um die Browser-Treiber und die Protokollierung von Fehlern kümmert, sowie das Navigieren zu Webseiten erleichtert.
  3. Eine Reihe von Konfigurationsklassen, mit denen Sie die Eigenschaften von Page Objects und das genaue Verhalten beim Ausfüllen der Formularfelder deklarativ festlegen können. Hier wird zudem das Einlesen von Testdaten aus XML-Dateien ermöglicht.
  4. Strategien zum Setzen von Werten (Value Setters) für verschiedene Formularelemente. Aus diesen Klassen können Sie ersehen, wie unterschiedliche Formularelemente programmatisch angesteuert werden.
Das Projekt SeleniumFormExtensions
Bild 2: Das Projekt SeleniumFormExtensions

Das Testprojekt WebApplication.Test

Aufbauend auf SeleniumFormExtensions können Sie Ihre eigenen Tests erstellen, wie im Projekt WebApplication.Test demonstriert (vgl. Bild 3):

  1. Die Klasse Page dient als Basisklasse für die eigentlichen Page-Object-Klassen. Somit repräsentiert die Page-Klasse die Master Page der Website und enthält folgerichtig eine Logout-Methode (das entsprechende Seitenelement – der „Log Off“-Hyperlink – befindet sich in der Master Page).
  2. Die Klasse Test dient als Basisklasse für die konkreten Testklassen. In dieser Klasse erfolgt die Vorbereitung (Setup) und das Aufräumen (Teardown), das vor bzw. nach jedem Test notwendig ist. Im Beispiel erfolgt hier die An- und Abmeldung an der Website.
  3. Der Ordner Pages enthält die Page-Object-Klassen, hierarchisch gegliedert wie die entsprechenden Webseiten. Wie diese konfiguriert werden können, sehen Sie in Tabelle 1. Weitere Erläuterungen dazu finden Sie auch im Quellcode.
  4. Der Ordner Tests beinhaltet die konkreten Testklassen. Hier können Sie im TestFixture-Attribut angeben, für welche Browser die Tests ausgeführt werden sollen, und im TestCaseSource-Attribut bestimmen Sie, woher die Testdaten stammen. Die Testmethoden benutzen die Schablonenmethode Execute ihrer Basisklasse, damit Fehler abgefangen und protokolliert werden können.
  5. Unter Properties/Settings.settings konfigurieren Sie das Projekt. Die meisten Werte sind selbsterklärend. TestUserName und TestUserPassword sind Anmeldedaten, die für jeden Test benötigt werden; daher sind sie hier zentral abgelegt. SourceCulture und TargetCulture werden zum Umwandeln von Formaten – speziell von eingelesenen Datumswerten – verwendet.
  6. Configuration/TestData enthält XML-Dateien mit den zu verwendenden Testdaten.
  7. Configuration/TestFiles enthält Binärdateien zum Testen der Upload-Funktion.
  8. Die Klasse Configuration/DataProvider besorgt die Testdaten und stellt sie den Testklassen zur Verfügung. Im Beispiel liefert die UserProfiles-Eigenschaft sukzessiv die Werte aller XML-Knoten namens Profile der verfügbaren XML-Dateien.
  9. Der Ordner Log ist der Speicherort für Fehlerprotokolle und zugehörige Screenshots.
Das Projekt WebApplikation.Test
Bild 3: Das Projekt WebApplikation.Test

Tabelle 1: Attribute zur Konfiguration von Page Objects

Attribut Ziel-Element Eigenschaft Beschreibung
Pageldentifier Page Object-Klasse Title Titel der Webseite. Wird benutzt, um festzustellen, ob die korrekte Webseite geladen wurde.
Elementld ID eines DOM-Elements der Webseite. Wird benutzt, um festzustellen, ob die korrekte Webseite geladen wurde.
PageUrl Page Object-Klasse Url URL der repräsentierten Webseite. Zu dieser URL navigiert der Browser-Treiber.
Contiguration IWebElement-Feld Delay Zeitverzögerung beim Setzen eines Wertes in Millisekunden. Nützlich. wenn das Element Zeit zum Reagieren benötigt.
Tab Name eines Formularreiters, der angeklickt wird, bevor ein Wert gesetzt wird.
Click Das Element wird vor dem Setzen eines Wertes angeklickt.
Leave Das Element verliert nach dem Setzen eines Wertes den Fokus.
Data Type Datentyp des zu setzenden Wertes. Wird bei der Umwandlung von Werten in eine andere Culture benutzt.
SourceCulture Culture des eingelesenen Wertes.
TargetCulture Culture, in die ein Wert umgewandelt wird.
Format Format, in das ein Wert umgewandelt wird.
ElementType Control-Typ des Elements (z.B. textoder select. Für jeden Typ kann eine eigene Strategie zum Setzen von Werten benutzt werden.
SetMethod Ansatz, der zum Setzen eines Wertes gewählt wird.
SelectMethod Ansatz, der zur Auswahl eines Wertes gewählt wird.

Eigene Tests

Um eigene Formulartests anzulegen, gehen Sie am besten wie folgt vor:

  1. Legen Sie ein neues Projekt vom Typ Klassenbibliothek an und referenzieren Sie SeleniumFormExtensions.
  2. Legen Sie eine Page-Object-Klasse pro Webseite, mit der die Tests interagieren sollen, an. Wenn die Webseiten eine verschachtelte Struktur haben (also gleiche Elemente auf mehreren Seiten wiederkehren, wie z.B. ein Navigationsmenü oder ein Logout-Link), bilden Sie die Struktur durch vererbende Page-Object-Klassen wie im Beispielprojekt nach (siehe Bild 3 (A) und (C) sowie Listing 1 und Listing 2).
  3. Konfigurieren Sie die Page-Object-Klassen mit einem PageUrl- sowie einem PageIdentifier-Attribut (Title oder ElementId), so dass zur Seite navigiert und diese eindeutig identifiziert werden kann (Listing 3).
  4. Legen Sie für jedes Formularfeld ein IWebElement an und konfigurieren Sie es mit einem FindsBy-Attribut und ggfls. Configuration-Attribut (Listing 4).
  5. Legen Sie benötigte Hilfseigenschaften und -methoden an, z.B. eine Upload-Methode, welche die entsprechenden Formularaktionen ausführt, um eine Datei hochzuladen.
  6. Legen Sie eine Testklasse pro Formular an. Wenn Sie vor und/oder nach jedem Einzeltest bestimmte Aktionen ausführen wollen (z.B. Anmelden an der Website), bilden Sie dies durch vererbende Testklassen wie im Beispielprojekt nach (siehe Bild 3 (B) und (D) sowie Listing 5 und Listing 6).
  7. Konfigurieren Sie die Testklassen mit TestFixture[<Browsertyp>]-Attributen (Listing 7).
  8. Implementieren Sie die Methoden Setup, Teardown und die eigentlichen Testmethoden der Testklassen.
  9. Konfigurieren Sie jede Testmethode mit einem TestCaseSource-Attribut (Listing 8).
  10. Legen Sie die xml-Dateien mit den Testdaten und ggfls. Binärdateien für den Upload an.
  11. Konfigurieren Sie die Projekteigenschaften (Settings).

Listing 1: Das Page Object für die Master Page wird als abstrakte Basisklasse implementiert

Listing 2: Das Page Object für die zu testende Webseite erbt von der Master Page

Listing 3: Setzen von PageUrl und PageIdentifier

Listing 4: Beispiele für FindsBy- und Configuration-Werte

Listing 5: Die Testklasse für die Master Page wird als abstrakte Basisklasse implementiert

Listing 6: Die Testklasse für die zu testende Webseite erbt von der Master-Page-Testklasse

Listing 7: Konfiguration der Testklasse mit anzuwendenden Browsertypen

Listing 8: Die Testmethode wird mit einer Quelle für Testdaten versehen

Fazit

Selenium WebDriver bringt eine Reihe nützlicher Funktionen mit, die das Testen von Web-Anwendungen erleichtern. Im Zusammenspiel mit NUnit und den SeleniumFormExtensions lässt sich ein hochkonfigurierbares System bauen, das Ihnen viel Tipparbeit beim Testen von Web-Formularen abnimmt und sich ähnlich wie Unit Tests in einen  Continuous-Integration-Prozess einbinden lässt.

Links   [ + ]

1, 2. http://www.nunit.org/index.php?p=download
3. https://www.nuget.org/

Artikelreihe „Professionelle Browser-Automation mit Selenium WebDriver“

Automation einer Google-Suchanfrage (Professionelle Browser-Automation mit Selenium WebDriver, Teil 1)
Testen von Web-Formularen (Professionelle Browser-Automation mit Selenium WebDriver , Teil 2)

Weitere Links:
NUnit

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.