Automatisieren Sie Ihre Funktionstests mit Selenium WebDriver

Dieser Artikel richtet sich an Webentwickler, die weniger Zeit mit dem Testen des Frontends ihrer Webanwendungen verbringen möchten, aber dennoch sicher sein möchten, dass alle Funktionen einwandfrei funktionieren. Es spart Ihnen Zeit, indem es sich wiederholende Online-Aufgaben mit Selenium WebDriver automatisiert. Sie finden ein Schritt-für-Schritt-Beispiel zum Automatisieren und Testen der Login-Funktion von WordPress, können das Beispiel aber auch für jedes andere Login-Formular anpassen.

Was ist Selen und wie kann es Ihnen helfen?

Selenium ist ein Framework zum automatisierten Testen von Webanwendungen. Mit Selenium können Sie im Grunde jede Aufgabe in Ihrem Browser automatisieren, als ob eine echte Person die Aufgabe ausführen würde. Die Schnittstelle zum Senden von Befehlen an die verschiedenen Browser heißt Selenium WebDriver. Implementierungen dieser Schnittstelle sind für jeden gängigen Browser verfügbar, einschließlich Mozilla Firefox, Google Chrome und Internet Explorer.

Automatisieren Sie Ihre Funktionstests mit Selenium WebDriver

Welcher Typ Webentwickler bist du? Sind Sie der disziplinierte Typ, der nach jeder Bereitstellung alle wichtigen Funktionen Ihrer Webanwendung testet? Wenn ja, ärgern Sie sich wahrscheinlich darüber, wie viel Zeit dieses wiederholte Testen in Anspruch nimmt. Oder sind Sie der Typ, der sich einfach nicht die Mühe macht, wichtige Funktionen zu testen und immer denkt: „Ich sollte mehr testen, aber ich entwickle lieber neue Sachen.“ Dann finden Sie Fehler wahrscheinlich nur zufällig oder wenn sich Ihr Kunde oder Chef darüber beschwert.

Ich arbeite seit geraumer Zeit für einen namhaften Online-Händler in Deutschland und gehörte immer zur zweiten Kategorie: Es war so spannend, an neue Funktionen für den Online-Shop zu denken, und ich bin überhaupt nicht gerne hingegangen alle vorherigen Funktionen nach jeder neuen Softwarebereitstellung erneut. Die Strategie bestand also mehr oder weniger darin zu hoffen, dass alle wichtigen Funktionen funktionieren würden.

Eines Tages hatten wir einen ernsthaften Rückgang unserer Conversion-Rate und begannen, in unseren Webanalyse-Tools zu graben, um die Ursache dieses Rückgangs zu finden. Es hat eine ganze Weile gedauert, bis wir herausfanden, dass unser Checkout seit der letzten Softwarebereitstellung nicht richtig funktionierte.

Das war der Tag, an dem ich anfing, etwas über die Automatisierung unseres Testprozesses von Webanwendungen zu recherchieren, und ich stolperte über Selenium und seinen WebDriver. Selenium ist im Grunde ein Framework, mit dem Sie Webbrowser automatisieren können. WebDriver ist der Name der Schlüsselschnittstelle, mit der Sie Befehle an alle gängigen Browser (mobil und Desktop) senden und mit ihnen wie ein echter Benutzer arbeiten können.

Vorbereitung des ersten Tests mit Selenium WebDriver

Zunächst war ich etwas skeptisch, ob Selenium meinen Anforderungen entsprechen würde, da das Framework am häufigsten in Java verwendet wird und ich sicherlich kein Java-Experte bin. Später erfuhr ich, dass man kein Java-Experte sein muss, um die Leistungsfähigkeit des Selenium-Frameworks zu nutzen.

Als einfachen ersten Test habe ich den Login eines meiner WordPress-Projekte getestet. Warum WordPress? Nur weil die Verwendung des WordPress-Anmeldeformulars ein Beispiel ist, dem jeder leichter folgen kann, als wenn ich mich auf eine benutzerdefinierte Webanwendung beziehen würde.

Was benötigen Sie, um mit der Verwendung von Selenium WebDriver zu beginnen? Da ich mich entschied, die gängigste Implementierung von Selenium in Java zu verwenden, musste ich meine kleine Java-Umgebung einrichten.

Wenn Sie meinem Beispiel folgen möchten, können Sie die Java-Umgebung Ihrer Wahl verwenden. Wenn Sie noch keines eingerichtet haben, schlage ich vor, Eclipse zu installieren und sicherzustellen, dass Sie in der Lage sind, ein einfaches „Hello World“-Skript in Java auszuführen.

Da ich die Anmeldung in Chrome testen wollte, stellte ich sicher, dass der Chrome-Browser bereits auf meinem Rechner installiert war. Das ist alles, was ich in Vorbereitung getan habe.

Herunterladen des ChromeDriver

Alle gängigen Browser bieten ihre eigene Implementierung der WebDriver-Schnittstelle. Da ich die WordPress-Anmeldung in Chrome testen wollte, musste ich die WebDriver-Implementierung von Chrome abrufen: ChromeDriver.

Ich entpackte das ZIP-Archiv und speicherte die ausführbare Datei chromedriver.exe an einem Ort, an den ich mich später erinnern konnte.

Einrichten unseres Selenium-Projekts in Eclipse

Die Schritte, die ich in Eclipse unternommen habe, sind wahrscheinlich ziemlich einfach für jemanden, der viel mit Java und Eclipse arbeitet. Aber für diejenigen wie mich, die sich damit nicht so gut auskennen, gehe ich auf die einzelnen Schritte ein:

1. Öffnen Sie Eclipse.
2. Klicken Sie auf das Symbol „Neu“.
   

   

3. Wählen Sie den Assistenten zum Erstellen eines neuen "Java-Projekts" und klicken Sie auf "Weiter".
   

   

4. Geben Sie Ihrem Projekt einen Namen und klicken Sie auf „Fertig stellen“.
   

   

5. Jetzt sollten Sie Ihr neues Java-Projekt auf der linken Seite des Bildschirms sehen.
   

   

Hinzufügen der Selenium-Bibliothek zu unserem Projekt

Jetzt haben wir unser Java-Projekt, aber Selen fehlt noch. Als nächstes müssen wir also das Selenium-Framework in unser Java-Projekt einbringen. Hier sind die Schritte, die ich unternommen habe:

1. Laden Sie die neueste Version der Java-Selenium-Bibliothek herunter.
   

   

2. Extrahieren Sie das Archiv und speichern Sie den Ordner an einem Ort, an den Sie sich leicht erinnern können.
3. Gehen Sie zurück zu Eclipse und gehen Sie zu „Projekt“ → „Eigenschaften“.
   

   

4. Gehen Sie im Dialog zu „Java Build Path“ und registrieren Sie dann „Libraries“.
5. Klicken Sie auf „Externe JARs hinzufügen“.
   

   

6. Navigieren Sie zu dem gerade heruntergeladenen Ordner mit der Selenium-Bibliothek. Markieren Sie alle .jar Dateien und klicken Sie auf „Öffnen“.
   

   

7. Wiederholen Sie dies auch für alle .jar Dateien im Unterordner libs .
8. Schließlich sollten Sie alle .jar Dateien in den Bibliotheken Ihres Projekts sehen:
   

   

Das ist es! Alles, was wir bisher getan haben, ist eine einmalige Aufgabe. Sie könnten dieses Projekt jetzt für alle Ihre verschiedenen Tests verwenden und müssten nicht den gesamten Einrichtungsprozess für jeden Testfall erneut durchführen. Irgendwie ordentlich, oder?

Erstellen unserer Testklasse und Öffnen des Chrome-Browsers

Jetzt haben wir unser Selenium-Projekt, aber was kommt als nächstes? Um zu sehen, ob es überhaupt funktioniert, wollte ich etwas ganz Einfaches ausprobieren, z. B. einfach meinen Chrome-Browser öffnen.

Dazu musste ich eine neue Java-Klasse erstellen, von der aus ich meinen ersten Testfall ausführen konnte. In diese ausführbare Klasse habe ich ein paar Java-Codezeilen kopiert, und ob Sie es glauben oder nicht, es hat funktioniert! Auf magische Weise öffnete sich der Chrome-Browser und schloss sich nach einigen Sekunden von selbst.

Versuch es selber:

1. Klicken Sie erneut auf die Schaltfläche "Neu" (während Sie sich im Ordner Ihres neuen Projekts befinden).
   

   

2. Wählen Sie den Assistenten „Klasse“ und klicken Sie auf „Weiter“.
   

   

3. Benennen Sie Ihre Klasse (z. B. „RunTest“) und klicken Sie auf „Fertig stellen“.
   

   

4. Ersetzen Sie den gesamten Code in Ihrer neuen Klasse durch den folgenden Code. Das einzige, was Sie ändern müssen, ist der Pfad zu chromedriver.exe auf Ihrem Computer:
   

    import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author Nils Schuette via frontendtest.org */ public class RunTest { static WebDriver webDriver; /** * @param args * @throws InterruptedException */ public static void main(final String[] args) throws InterruptedException { // Telling the system where to find the chrome driver System.setProperty( "webdriver.chrome.driver", "C:/PATH/TO/chromedriver.exe"); // Open the Chrome browser webDriver = new ChromeDriver(); // Waiting a bit before closing Thread.sleep(7000); // Closing the browser and WebDriver webDriver.close(); webDriver.quit(); } }

5. Speichern Sie Ihre Datei und klicken Sie auf die Wiedergabeschaltfläche, um Ihren Code auszuführen.
   

   

6. Wenn Sie alles richtig gemacht haben, sollte der Code eine neue Instanz des Chrome-Browsers öffnen und kurz darauf wieder schließen.
   

   

Testen der WordPress-Admin-Anmeldung

Jetzt war ich optimistisch, dass ich meinen ersten kleinen Feature-Test automatisieren konnte. Ich wollte, dass der Browser zu einem meiner WordPress-Projekte navigiert, sich im Admin-Bereich anmeldet und überprüft, ob die Anmeldung erfolgreich war. Also, welche Befehle musste ich nachschlagen?

1. Navigieren Sie zum Anmeldeformular,
2. Suchen Sie die Eingabefelder,
3. Geben Sie den Benutzernamen und das Passwort in die Eingabefelder ein,
4. Drücken Sie die Login-Schaltfläche,
5. Vergleichen Sie die Überschrift der aktuellen Seite, um zu sehen, ob die Anmeldung erfolgreich war.

Nachdem ich alle notwendigen Aktualisierungen an meinem Code vorgenommen und in Eclipse auf die Schaltfläche „Ausführen“ geklickt hatte, begann mein Browser, sich wie von Zauberhand durch das WordPress-Login zu arbeiten. Ich habe meinen ersten automatisierten Website-Test erfolgreich durchgeführt!

Wenn Sie dies selbst ausprobieren möchten, ersetzen Sie den gesamten Code Ihrer Java-Klasse durch den folgenden. Ich werde den Code später im Detail durchgehen. Bevor Sie den Code ausführen, müssen Sie vier Werte durch Ihre eigenen ersetzen:

1. Der Speicherort Ihrer chromedriver.exe -Datei (wie oben),

2. Die URL des WordPress-Administratorkontos, das Sie testen möchten,

3. Der WordPress-Benutzername,

4. Das WordPress-Passwort.

Dann speichern und erneut ausführen lassen. Es öffnet Chrome, navigiert zum Login Ihrer WordPress-Website, meldet sich an und prüft, ob die h1 -Überschrift der aktuellen Seite „Dashboard“ lautet.

 import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author Nils Schuette via frontendtest.org */ public class RunTest { static WebDriver webDriver; /** * @param args * @throws InterruptedException */ public static void main(final String[] args) throws InterruptedException { // Telling the system where to find the chrome driver System.setProperty( "webdriver.chrome.driver", "C:/PATH/TO/chromedriver.exe"); // Open the Chrome browser webDriver = new ChromeDriver(); // Maximize the browser window webDriver.manage().window().maximize(); if (testWordpresslogin()) { System.out.println("Test Wordpress Login: Passed"); } else { System.out.println("Test Wordpress Login: Failed"); } // Close the browser and WebDriver webDriver.close(); webDriver.quit(); } private static boolean testWordpresslogin() { try { // Open google.com webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/"); // Type in the username webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME"); // Type in the password webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD"); // Click the Submit button webDriver.findElement(By.id("wp-submit")).click(); // Wait a little bit (7000 milliseconds) Thread.sleep(7000); // Check whether the h1 equals “Dashboard” if (webDriver.findElement(By.tagName("h1")).getText() .equals("Dashboard")) { return true; } else { return false; } // If anything goes wrong, return false. } catch (final Exception e) { System.out.println(e.getClass().toString()); return false; } } }

Wenn Sie alles richtig gemacht haben, sollte Ihre Ausgabe in der Eclipse-Konsole in etwa so aussehen:

Den Kodex verstehen

Da Sie wahrscheinlich ein Webentwickler sind und zumindest ein grundlegendes Verständnis anderer Programmiersprachen haben, bin ich mir sicher, dass Sie die Grundidee des Codes bereits verstanden haben: Wir haben eine separate Methode, testWordpressLogin , für den spezifischen Testfall erstellt, von dem aus aufgerufen wird unsere Hauptmethode.

Abhängig davon, ob die Methode wahr oder falsch zurückgibt, erhalten Sie eine Ausgabe in Ihrer Konsole, die Ihnen mitteilt, ob dieser spezielle Test bestanden oder fehlgeschlagen ist.

Dies ist nicht notwendig, aber auf diese Weise können Sie dieser Klasse problemlos viele weitere Testfälle hinzufügen und haben dennoch lesbaren Code.

Nun, Schritt für Schritt, das passiert in unserem kleinen Programm:

1. Zuerst teilen wir unserem Programm mit, wo es den spezifischen WebDriver für Chrome finden kann.
   

    System.setProperty("webdriver.chrome.driver","C:/PATH/TO/chromedriver.exe");

2. Wir öffnen den Chrome-Browser und maximieren das Browserfenster.
   

    webDriver = new ChromeDriver(); webDriver.manage().window().maximize();

3. Hier springen wir in unsere Untermethode und prüfen, ob sie wahr oder falsch zurückgibt.
   

    if (testWordpresslogin()) …

4. Der folgende Teil in unserer Teilmethode ist möglicherweise nicht intuitiv zu verstehen:
   Die try{…}catch{…} -Blöcke. Wenn alles wie erwartet läuft, wird nur der Code in try{…} ausgeführt, aber wenn beim Ausführen von try{…} etwas schief geht, wird die Ausführung in catch{} fortgesetzt. Immer wenn Sie versuchen, ein Element mit findElement zu finden und der Browser dieses Element nicht finden kann, wird eine Ausnahme ausgelöst und der Code in catch{…} ausgeführt. In meinem Beispiel wird der Test immer dann als "fehlgeschlagen" markiert, wenn etwas schief geht und der catch{} ausgeführt wird.
5. In der Untermethode navigieren wir zunächst zu unserem WordPress-Adminbereich und suchen die Felder für den Benutzernamen und das Passwort, indem wir nach ihren IDs suchen. Außerdem geben wir die angegebenen Werte in diese Felder ein.
   

    webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/"); webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME"); webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD");

   
   

   

6. Nach dem Ausfüllen des Anmeldeformulars suchen wir die Schaltfläche „Senden“ anhand ihrer ID und klicken darauf.
   

    webDriver.findElement(By.id("wp-submit")).click();

7. Um den Test visuell zu verfolgen, baue ich hier eine Pause von 7 Sekunden ein (7000 Millisekunden = 7 Sekunden).
   

    Thread.sleep(7000);

8. Wenn der Login erfolgreich war, sollte die h1 -Überschrift der aktuellen Seite jetzt „Dashboard“ lauten und sich auf den WordPress-Adminbereich beziehen. Da die h1 -Überschrift nur einmal auf jeder Seite vorhanden sein sollte, habe ich hier den Tag-Namen verwendet, um das Element zu lokalisieren. In den meisten anderen Fällen ist der Tag-Name keine gute Lokalisierung, da ein HTML-Tag-Name auf einer Webseite selten eindeutig ist. Nachdem wir das h1 gefunden haben, extrahieren wir den Text des Elements mit getText() und prüfen, ob er gleich dem String „Dashboard“ ist. Wenn die Anmeldung nicht erfolgreich ist, würden wir „Dashboard“ nicht als aktuelles h1 finden. Daher habe ich mich entschieden, mit dem h1 zu prüfen, ob der Login erfolgreich ist.
   

    if (webDriver.findElement(By.tagName("h1")).getText().equals("Dashboard")) { return true; } else { return false; } 

   
   

   

9. Wenn im vorherigen Teil der Untermethode etwas schief gelaufen wäre, wäre das Programm direkt zum folgenden Teil gesprungen. Der catch -Block gibt die Art der Ausnahme aus, die auf der Konsole aufgetreten ist, und gibt anschließend false an die Hauptmethode zurück.
   

    catch (final Exception e) { System.out.println(e.getClass().toString()); return false; }

Anpassen des Testfalls

Hier wird es interessant, wenn Sie eigene Testfälle anpassen und hinzufügen möchten. Sie können sehen, dass wir immer Methoden des webDriver Objekts aufrufen, um etwas mit dem Chrome-Browser zu tun.

Zuerst maximieren wir das Fenster:

 webDriver.manage().window().maximize();

Dann navigieren wir in einer separaten Methode zu unserem WordPress-Adminbereich:

 webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/");

Es gibt andere Methoden des webDriver Objekts, die wir verwenden können. Abgesehen von den beiden oben genannten werden Sie diese wahrscheinlich häufig verwenden:

 webDriver.findElement(By. …)

Die Methode findElement hilft uns, verschiedene Elemente im DOM zu finden. Es gibt verschiedene Möglichkeiten, Elemente zu finden:

• By.id
• By.cssSelector
• By.className
• By.linkText
• By.name
• By.xpath

Wenn möglich, empfehle ich die Verwendung von By.id , da die ID eines Elements immer eindeutig sein sollte (anders als beispielsweise der className ) und normalerweise nicht betroffen ist, wenn sich die Struktur Ihres DOM ändert (anders als beispielsweise der xPath ). .

Hinweis : Hier können Sie mehr über die verschiedenen Optionen zum Auffinden von Elementen mit WebDriver lesen.

Sobald Sie ein Element mit der Methode findElement haben, können Sie die verschiedenen verfügbaren Methoden des Elements aufrufen. Die gebräuchlichsten sind sendKeys , click und getText .

Wir verwenden sendKeys , um das Anmeldeformular auszufüllen:

 webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME");

Wir haben click verwendet, um das Anmeldeformular durch Klicken auf die Schaltfläche „Senden“ zu senden:

 webDriver.findElement(By.id("wp-submit")).click();

Und getText wurde verwendet, um zu überprüfen, welcher Text in h1 ist, nachdem auf die Schaltfläche „Senden“ geklickt wurde:

 webDriver.findElement(By.tagName("h1")).getText()

Hinweis : Sehen Sie sich unbedingt alle verfügbaren Methoden an, die Sie mit einem Element verwenden können.

Fazit

Seit ich die Leistungsfähigkeit von Selenium WebDriver entdeckt habe, hat sich mein Leben als Webentwickler verändert. Ich liebe es einfach. Je tiefer ich in das Framework eintauche, desto mehr Möglichkeiten entdecke ich – einen Test gleichzeitig in Chrome, Internet Explorer und Firefox oder sogar auf meinem Smartphone ausführen oder automatisch Screenshots verschiedener Seiten erstellen und vergleichen. Heute verwende ich Selenium WebDriver nicht nur zu Testzwecken, sondern auch zur Automatisierung sich wiederholender Aufgaben im Web. Wann immer ich eine Möglichkeit sehe, meine Arbeit im Web zu automatisieren, kopiere ich einfach mein ursprüngliches WebDriver-Projekt und passe es an die nächste Aufgabe an.

Wenn Sie der Meinung sind, dass Selenium WebDriver für Sie geeignet ist, empfehle ich Ihnen, sich die Dokumentation von Selenium anzusehen, um sich über alle Möglichkeiten von Selenium zu informieren (z. B. das gleichzeitige Ausführen von Aufgaben auf mehreren (mobilen) Geräten mit Selenium Grid).

Ich freue mich darauf zu hören, ob Sie WebDriver genauso nützlich finden wie ich!