Selenium - Webanwendungen testen

Selenium IDE ist ein kostenloser WEB-Recorder zum Aufnehmen und Abspielen von Browseraktivitäten und eignet sich zum Automatisieren von wiederkehrenden Webabläufen.

  • Selenium kann praktisch alles aufnehmen, was ein Anwender mit einem Browser anstellen kann: Klicken auf Links, Texteingabe in Formularfelder, Abschicken von Formularen usw...
  • Die Aufnahmen können gespeichert und automatisiert abgespielt werden.
  • Zusätzlich kann Selenium Inhalte von Webseiten prüfen, ob z.Bsp. ein bestimmter Text enthalten ist.

Das Selenium Einsatzgebiet reicht vom automatischen Löschen des Spammailordners beim Mailprovider bis zum Testen komplexer Webanwendungen. Gerade nach Fertigstellung einer größeren Webanwendung folgt meist ein mühsames Wechselspiel zwischen Testen, Fehler beseitigen, nochmal Testen, usw. Zeichnet man die Tests beim ersten Mal auf, dann können bei jeder neuen Softwareauslieferung die Tests "augenschonend" automatisiert ablaufen.

Zur Installation sind folgende Schritte notwendig:

  • Die Selenium IDE ist ein Firefox-AddOn.
    Also wird zum Anwenden der Firefox-Browser benötigt und kein Internet Explorer.
  • Die Firefox Add-OnSelenium IDE downloaden und per "drag and drop" in die AddOns des Firefox ablegen.
    Zu beachten sind die Versionshinweise, also welche Selenium Version zu welcher Firefox Version paßt.
  • Firefox starten und im Menü "Extras" die "Selenium IDE" anwählen und das Tool läuft.
    Hilfreich ist, den Firefox zu verkleinern und Selenium optisch neben den Browser zu legen.

Beispiel

Nach dem Wort "Tastenkombinationen" googeln und die Ergebnisseite auf das Vorhandensein von "selenium" prüfen.

1.) Aufnahme:

Firefox Selenium
Firefox starten und im Menü "Extras" die Selenium IDE anklicken. Selenium startet, der rote Aufnahmeknopf ist an.
In Adressleiste "www.google.de" eingeben und absenden.  
"tastenkombinationen" ins Google-Suchfeld eingeben und Tab-Taste drücken,
um das Suchfeld zu verlassen.
Speichert die Eingabe als "type/q/tastenkombinationen".
Auf den Button "Google-Suche" klicken. Speichert den Klick als "clickAndWait/btnG".
Auf der Google-Ergebnisseite mit der linken Maustaste ein "tastenkombinationen" markieren, mit der rechten Maustaste die Markierung anklicken und im sich öffnenden Kontextmenü "VerifyTextPresent Tastenkombinationen" auswählen. Speichert den Test als "verifyTextPresent/Tastenkombinationen".
  Auf den roten Knopf klicken und die Aufzeichnung ist beendet.

2.) Aufnahme abspielen:

Selenium
Auf den grünen Abspielpfeil für "test case" klicken und der aufgezeichnete Test läuft einmal durch. Alle Schritte des Tests sollten grün sein.

3.) Fehler einbauen und Aufnahme abspielen:

Selenium
Zeile mit "verifyTextPresent Tastenkombinationen" anklicken, unten im Target das "Tastenkombinationen" auf "Tastenkombinationen123" ändern.
Auf den grünen Abspielpfeil für "test case" klicken und der aufgezeichnete Test läuft einmal durch. Die Zeile mit dem "verifyTextPresent Tastenkombinationen" sollte rot angezeigt werden, weil "Tastenkombinationen123" nicht auf der Google Seite gefunden wird.

Testfall und TestSuite

Ein mit Selenium aufgezeichnter Testfall wird standardmäßig als HTML-Source aufgezeichnet und kann als HTML-Datei abgespeichert werden.
Mehrere gespeicherte Testfälle können über eine zentrale HTML-Datei verlinkt und somit zu einer TestSuite zusammengefasst und in einem Rutsch abgespielt werden.

Beispiel für einen von Selenium aufgezeichneten HTML-Testfall, der nach "tastenkombinationen" googelt und einen Treffer auf der Zielseite prüft:

<?xml version="1.0" encoding="UTF-8"?>
...
<table cellpadding="1" cellspacing="1" border="1">
  <tr>
    <td>open</td>
    <td>http://www.google.de/</td>
    <td></td>
  </tr>
  <tr>
    <td>type</td>
    <td>q</td>
    <td>tastenkombinationen</td>
  </tr>
  <tr>
    <td>clickAndWait</td>
    <td>btnG</td>
    <td></td>
  </tr>
  <tr>
    <td>verifyTextPresent</td>
    <td>tastenkombinationen</td>
    <td></td>
</tr>
</table>
</body>
</html>

Testfall als "Test Case" speichern (Bsp: test1.html).

Hinweise:
  • Tests "für den Hausgebrauch" als HTML-Dateien speichern.
  • Jeder Einzelschritt eines Tests ist anwählbar und läßt sich in der Table- oder Source-Ansicht verändern.
    So kann man "test1.html" laden, mit einem Editor verändern und als "test2.html" speichern.
  • Mehrere Testfälle können zu einer TestSuite zusammengefaßt werden.
Beispiel für eine selbst erstellte HTML-TestSuite, über die zwei Testfälle automatisiert ablaufen:
<html>
<body>
<table>
  <tr><td>Test Suite</td></tr>
  <tr><td><a href="testfall1.html">Test 1</a></td></tr>
  <tr><td><a href="testfall2.html">Test 2</a></td></tr>
</table>
</body>
</html>
Für jeden Testfall eine Zeile mit einem Link zum Testfall-HTML-Dokument anlegen.
Diese TestSuite-HTML-Datei in Selenium als Test-Suite öffnen (Open Test Suite) und über "play test suite" ablaufen lassen.

Prüfungen

Mit Selenium-Checks können Zustände einer Webanwendung geprüft werden (Werte von Formularfeldern, das Vorhandensein von Texten, die URL der aktuellen Seite usw.). Das Editieren der Prüfungen (Kombination aus Command, Target und Value) kann in der Sichtweise "Table" (Grundeinstellung) oder "Source" erfolgen. Abhängig von den Einstellungen unter "Options/Format" werden Sourcen in HTML, Java, PHP usw. angezeigt.

Das Ansprechen eines HTML-Ziels (Target) erfolgt über Elementname ("xtest" bei <input name="xtest">), Id ("ytest" bei <td id="ytest">), DOM (document.forms['formularname'].test), XPath (//img[@alt='alternativtext']) oder Attributname(@type='submit').

Ob ein Test nach einem Fehler abgebrochen werden soll wird über die Modi "assert" (Test abbrechen) und "verify" (Test nicht abbrechen) gesteuert. In der folgenden Übersicht werden hauptsächlich verify-Prüfungen erläutert. Für den assert-Modus einfach im Kommando das führende "verify" gegen "assert" tauschen.

Prüfungen:

Beschreibung Command Target Value
URL prüfen verifyLocation http://www.google.de/  
Werte einer Selectbox gegen kommaseparierte Liste prüfen
(Keine unnötigen Leerzeichen nach Kommas!)
verifySelectOptions automarken vw,opel,bmw
Titel einer Seite prüfen
(Bsp: <title>Google...)
verifyTitle Google  
Text im Formularfeld prüfen
(Bsp: <input type="text" name="eingabe"...)
verifyValue eingabe tastenkombinationen
Text eines Elements prüfen
(Bsp: <h1>Überschrift</h1>)
verifyText //h1 Überschrift
Attributwert eines Elements prüfen
(Bsp: <h1 align="center")
verifyAttribute //h1@align center
Prüfen, ob Text irgendwo auf der Seite vorkommt
(Bsp: <p>hallo und willkommen...)
verifyTextPresent willkommen  
Prüfen, ob ein Element auf der Seite vorhanden ist
(Bsp: <input type="submit" value="Absenden">)
verifyElementPresent //input[@type='submit']  
Prüfen, ob Text in einer Tabellenzelle vorhanden ist
(Syntax: Tabellenname.Zeile.Spalte, beginnend mit 0)
verifyTable myTable.1.6 Hamburg  
Prüft, ob ein Element vorhanden und sichtbar ist
(Bsp: <h1 id="Ueberschrift" style="visibility:hidden">)
verifyVisible Ueberschrift  
Prüft, ob ein Element editierbar ist
(Bsp: <input type="text" name="test" disabled>)
verifyEditable //input[@name='test']  

Weitere Beispiele

Angenommen, man hat ein Formular mit zwei Eingabefeldern (eingabe1, eingabe2), einem Ergebnisfeld (ergebnis) und einem Additionsbutton (plus), dann könnte ein Test als HTML-Source folgendermaßen aussehen:

Command Target Value Beschreibung
type eingabe1 1 1 in "eingabe1" eingegeben
type eingabe2 1 1 in "eingabe2" eingegeben
click plus   "plus" angeklickt
verifyValue ergebnis 2 Wert in "ergebnis" per Maus markiert und im Kontextmenü "verifyValue ergebnis 2" ausgewählt

Obiges Beispiel erweitert um eine Javascript-Prüfung:

Command Target Value Beschreibung
type eingabe1 1  
type eingabe2 1  
click plus    
verifyValue ergebnis 2  
storeValue ergebnis varErgebnis Inhalt von "ergebnis" in der Variablen "varErgebnis" speichern
verifyEval javascript{1+1} ${varErgebnis} JavaScript-Berechnung (1+1) mit dem gespeicherten Ergebnis in "varErgebnis" vergleichen

Weitere Beispiele:

Command Target Value Beschreibung
open file:///D:/seleniumtest.html   HTML-Testdokument öffnen.
type //input[@type='text'] aaa In ein Inputfeld ohne "name" oder "id" den Wert "aaa" eingegeben (XPath).
type //form[@id='formId']/input[2] bbb In ein zweites Inputfeld ohne "name" oder "id" den Wert "bbb" eingeben (XPath).
type iId ccc In ein Inputfeld mit Name="iName" und Id "iId" den Wert "ccc" eingeben. Selenium bevorzugt Id.
select pizzaId label=Pizza Salami Aus Selectbox die Option mit dem Text "Pizza Salami" auswählen.
click bezahlen   Aus mehreren Radio-Buttons mit dem Namen "bezahlen" den ersten wählen.
click //input[@name='Zahlmethode' and @value='Visa']   Aus mehreren Radio-Buttons den mit dem Namen "bezahlen" und dem Value "Visa" wählen.
click zutat   Aus mehreren Check-Boxen mit dem Namen "zutat" den ersten wählen.
click //input[@name='zutat' and @value='pilze']   Aus mehreren Check-Boxen die mit dem Namen "zutat" und dem Value "pilze" wählen.

open
storeText
open
verifyText

/page1
element_id_1
/page2
element_id_2

 
test1
 
${test1}
Zwei Werte von verschiedenen Web-Seiten vergleichen:
1. Seite öffnen
Ersten Wert speichern in test1
2. Seite öffnen
Zweiten Wert lesen/vergleichen mit gespeichertem Wert

Zum Homepage von Selenium.