Verwendung von Firebug zum Erstellen von Selenium-Skripten – Selenium Tutorial # 4
Im vorherigen Tutorial haben wir gelernt, wie man automatisierte Testskripte mit Selenium IDE und seiner Aufnahmefunktion erstellt. Wir blätterten auch durch bevölkerungsreiche Funktionen von Selenium IDE. Wir wollten den Leser mit den wichtigsten Funktionen und Befehlen von Selenium IDE vertraut machen.
Nur zur Erinnerung – dies ist unser 4. Tutorial in der kostenlosen Selenium-Trainingsreihe.
Nun, da Sie daran gewöhnt und in der Lage sind, automatisierte Skripte mit dem Aufnahmemodus von Selenium IDE zu erstellen, wollen wir mit einem anderen Tool fortfahren, das eine sehr wichtige Rolle bei der Erstellung effektiver Testskripte spielt, die als „Firebug“ bekannt sind. Firebug hilft uns bei der Überprüfung der Eigenschaften von Web-Elementen und Web-Seiten.
Daher umfasst dieses Tutorial die Installation von Firebug und seine Benutzerfreundlichkeit.
Beachten Sie, dass der Inhalt dieses Tutorials nicht nur im Kontext von Selenium IDE anwendbar ist; vielmehr kann es auf jedes Tool der Selenium Suite angewendet werden. Daher würde ich vorzugsweise den Begriff Selen anstelle von Selenium IDE verwenden.
In diesem Tutorial erfahren Sie, wie Sie das Firebug-Add-On zum Erstellen von Selenium-Skripten verwenden. Dabei lernen wir auch, wie man Firebug installiert.
Einführung in Firebug
Firebug ist ein Mozilla Firefox Add-on. Dieses Tool hilft uns, HTML-, CSS- und JavaScript-Elemente auf einer Webseite zu identifizieren oder genauer zu untersuchen. Es hilft uns, die Elemente auf einer Webseite eindeutig zu identifizieren. Die Elemente können anhand ihrer Locator-Typen eindeutig gefunden werden, auf die wir später in diesem Lernprogramm eingehen werden.
Wie installiere ich Firebug?
Zum besseren Verständnis würden wir den Installationsprozess in die folgenden Schritte aufteilen.
Schritt -1: Starten Sie den Mozilla Firefox-Browser und navigieren Sie zu dieser Firebug-Add-On-Download-Seite. Die URL führt uns zu Firefox Add-ons Abschnitt.
Schritt -2: Klicken Sie auf die Schaltfläche „Zu Firefox hinzufügen“ auf der Webseite. Siehe die folgende Abbildung für die gleiche.
Schritt-3: Sobald wir auf die Schaltfläche „Zu Firefox hinzufügen“ klicken, wird ein Sicherheitswarnungsfeld angezeigt.Schritt 4: Jetzt lädt Firefox das Add-On im Hintergrund herunter und ein Fortschrittsbalken wird angezeigt.
Schritt 5: Sobald der Vorgang abgeschlossen ist, erscheint das Fenster zur Softwareinstallation. Klicken Sie nun auf die Schaltfläche „Jetzt installieren“.
Schritt-6: Sobald die Installation abgeschlossen ist, erscheint ein Popup, das besagt, dass der Firebug erfolgreich installiert wurde. Wählen Sie nun, um dieses Popup zu schließen.
Hinweis: Im Gegensatz zu Selenium IDE müssen wir Firefox nicht neu starten, um die Firebug-Installation widerzuspiegeln.
Schritt-7: Um Firebug zu starten, können wir eine der folgenden Möglichkeiten wählen:
- Drücken Sie F12
- Klicken Sie auf das Firebug-Symbol in der äußersten oberen rechten Ecke des Firefox-Fensters.
- Klicken Sie auf Firefox-Menüleiste -> Web Developer -> firebug -> Öffnen Sie Firebug.
Schritt-8: Jetzt ist der Firebug am unteren Rand des Firefox-Fensters zu sehen.
Nachdem wir Firebug heruntergeladen und installiert haben, wollen wir mit den Arten von Locators fortfahren, die wir mit Firebug erstellen würden.
Erstellen eines Selenium-Skripts mit Firebug
Im Gegensatz zur Selenium-IDE erstellen wir in Firebug automatisierte Testskripte manuell, indem wir mehrere Testschritte hinzufügen, um ein logisches und konsistentes Testskript zu erstellen.
Lassen Sie uns einen progressiven Ansatz verfolgen und den Prozess Schritt für Schritt verstehen.
Szenario:
- Öffne „https://accounts.google.com“.
- Titel der Anwendung bestätigen
- Geben Sie einen ungültigen Benutzernamen und ein ungültiges Passwort ein und senden Sie die Details zum Anmelden.
Schritt 1 – Starten Sie Firefox und öffnen Sie Selenium IDE in der Menüleiste.
Schritt 2 – Geben Sie die Adresse der zu testenden Anwendung („https://accounts.google.com“) in das Textfeld Basis-URL ein.
Schritt 3 – Standardmäßig ist die Aufnahmetaste eingeschaltet. Denken Sie daran, es auszuschalten, um den Aufnahmemodus zu deaktivieren. Hinweis Wenn der Aufnahmemodus eingeschaltet ist, kann dies dazu führen, dass unsere Interaktionen mit dem Webbrowser aufgezeichnet werden.
Schritt 4 – Öffnen Sie die zu testende Anwendung (https://accounts.google.com) im Firefox.
Schritt 5 – Starten Sie Firebug im Webbrowser.
Schritt 6 – Wählen Sie den leeren Testschritt im Editor aus.
Schritt 7 – Geben Sie „open“ in das Befehlstextfeld im Editorbereich ein. Der Befehl „Öffnen“ öffnet die angegebene URL im Webbrowser.
Empfehlung: Während Sie Befehle in das Befehlstextfeld eingeben, kann der Benutzer die Funktion der automatischen Auswahl nutzen. Sobald der Benutzer eine Zeichenfolge eingibt, werden die übereinstimmenden Vorschläge automatisch ausgefüllt.
Der Benutzer kann auch auf das Dropdown-Menü im Befehlstextfeld klicken, um alle von Selenium IDE bereitgestellten Befehle anzuzeigen.
Schritt 8 – Bewegen Sie sich nun in Richtung des Firebug-Abschnitts im Webbrowser und erweitern Sie den Abschnitt „head“ des HTML-Codes. Beachten Sie das HTML-Tag <title>. Um den Titel der Webseite zu bestätigen, benötigen wir den Wert des <title> -Tags.
Kopieren Sie den Titel der Webseite, die in unserem Fall „Anmelden – Google-Konten“ lautet.
Schritt 9 – Wählen Sie den zweiten leeren Testschritt im Editor aus.
Schritt 10 – Geben Sie „assertTitle“ in das Befehlstextfeld im Editorbereich ein. Der Befehl „assertTitle“ gibt den aktuellen Seitentitel zurück und vergleicht ihn mit dem angegebenen Titel.
Schritt 11 – Fügen Sie den in Schritt 8 kopierten Titel in das Zielfeld des zweiten ein.
Schritt 12 – Wählen Sie nun den dritten leeren Testschritt im Editorbereich aus
Schritt 13 – Geben Sie den Befehl „type“ in das Befehlstextfeld ein. Der Befehl „type“ gibt einen Wert in das angegebene Webelement in die GUI ein.
Schritt 14 – Wechseln Sie nun zum Webbrowser, bringen Sie den Mauszeiger in das Textfeld „E-Mail“ im Anmeldeformular und klicken Sie mit der rechten Maustaste.
Wählen Sie die Option „Element mit Firebug untersuchen“. Beachten Sie, dass der Firebug automatisch den entsprechenden HTML-Code für das Webelement hervorhebt, dh „E-Mail-Textfeld“.
Schritt 15 – Der HTML-Code in der obigen Abbildung zeigt die unterschiedlichen Eigenschaftsattribute, die zum Textfeld „E-Mail“ gehören. Beachten Sie, dass es vier Eigenschaften (ID, Typ, Platzhalter und Name) gibt, die das Webelement auf der Webseite eindeutig identifizieren. Somit liegt es am Benutzer, eine oder mehrere Eigenschaften auszuwählen, um das Webelement zu identifizieren.
Daher wählen wir in diesem Fall ID als Locator. Kopieren Sie den ID-Wert und fügen Sie ihn in das Zielfeld des dritten Testschritts mit dem Präfix „id =“ ein, um anzugeben, dass Selenium IDE ein Webelement mit der ID „E-Mail“ suchen soll.
(Klicken, um vergrößertes Bild anzuzeigen)
Beachten Sie, dass bei der Selenium-IDE die Groß- und Kleinschreibung beachtet wird.Geben Sie daher den Attributwert sorgfältig und genau so ein, wie er im HTML-Code angezeigt wird.
Schritt 16 – Klicken Sie auf die Schaltfläche Suchen, um zu überprüfen, ob der ausgewählte Locator das angegebene UI-Element auf der Webseite findet und lokalisiert.
Schritt 17 – Der nächste Schritt besteht nun darin, die Testdaten in das Textfeld Wert des dritten Testschritts im Editorbereich einzugeben. Geben Sie „InvalidEmailID“ in das Textfeld Wert ein. Der Benutzer kann die Testdaten ändern, wie und wann es gewünscht wird.
Schritt 18 – Wählen Sie nun den vierten leeren Testschritt im Editorbereich aus
Schritt 19 – Geben Sie den Befehl „type“ in das Befehlstextfeld ein.
Schritt 20 – Wechseln Sie nun zum Webbrowser, bewegen Sie den Mauszeiger auf das Textfeld „Passwort“ im Anmeldeformular und klicken Sie mit der rechten Maustaste.
Wählen Sie die Option „Element mit Firebug prüfen“.
Schritt 21 – Der folgende HTML-Code zeigt die eindeutigen Eigenschaftsattribute, die zum Textfeld „Passwort“ gehören. Beachten Sie, dass es vier Eigenschaften (ID, Typ, Platzhalter und Name) gibt, die das Webelement auf der Webseite eindeutig identifizieren. Somit liegt es am Benutzer, eine oder mehrere Eigenschaften auszuwählen, um das Webelement zu identifizieren.
Daher wählen wir in diesem Fall ID als Locator. Kopieren Sie den ID-Wert und fügen Sie ihn in das Zielfeld des dritten Testschritts ein, dem „id=“ vorangestellt ist.
(Klicken, um vergrößertes Bild anzuzeigen)
Schritt 22 – Klicken Sie auf die Schaltfläche Suchen, um zu überprüfen, ob das Locator-Tabbed das angegebene UI-Element auf der Webseite findet und lokalisiert.
Schritt 23 – Der nächste Schritt besteht nun darin, die Testdaten in das Textfeld Wert des vierten Testschritts im Editorbereich einzugeben. Geben Sie „InvalidPassword“ in das Textfeld Wert ein. Der Benutzer kann die Testdaten ändern, wie und wann es gewünscht wird.
Schritt 24 – Wählen Sie nun den fünften leeren Testschritt im Editorbereich aus
Schritt 25 – Geben Sie den Befehl „click“ in das Befehlstextfeld ein. Der Befehl „Klicken“ klickt auf ein bestimmtes Webelement innerhalb der Webseite.
Schritt 26 – Wechseln Sie nun zum Webbrowser, bewegen Sie den Mauszeiger auf die Schaltfläche „Anmelden“ im Anmeldeformular und klicken Sie mit der rechten Maustaste.
Wählen Sie die Option „Element mit Firebug prüfen“.
Schritt 27 – Der folgende HTML-Code zeigt die eindeutigen Eigenschaftsattribute, die zur Schaltfläche „Anmelden“ gehören.
Wählen Sie ID als Locator. Kopieren Sie den ID-Wert und fügen Sie ihn in das Zielfeld des dritten Testschritts ein, dem „id=“ vorangestellt ist.
(Klicken, um vergrößertes Bild anzuzeigen)
Schritt 28 – Klicken Sie auf die Schaltfläche Suchen, um zu überprüfen, ob der Locator das angegebene UI-Element auf der Webseite findet und lokalisiert.
Das Testskript ist nun abgeschlossen. In der folgenden Abbildung sehen Sie das fertige Testskript.
Schritt 29 – Spielen Sie das erstellte Testskript ab und speichern Sie es auf die gleiche Weise wie im vorherigen Lernprogramm.
Fazit
In diesem Tutorial haben wir ein weiteres Tool zur Skripterstellung bzw. ein Tool vorgestellt, das die Skripterstellung unterstützt.
Firebug hat überraschenderweise ein großes Potenzial, Web-Elemente auf einer Webseite zu lokalisieren. Somit kann der Benutzer die Funktionen des Tools nutzen, um effektive und effiziente Automatisierungstestskripte manuell zu erstellen.
Nächstes Tutorial # 5: Im nächsten Tutorial werfen wir einen Blick auf die verschiedenen Arten von Locators in Selenium und ihre Zugänglichkeitstechnik zum Erstellen von Testskripten. In der Zwischenzeit kann der Leser mit dem Erstellen seiner Automatisierungstestskripte mit Firebug beginnen.