Hoe gebruik je Firebug voor het maken van Selenium Scripts – Selenium Tutorial #4

in de vorige tutorial hebben we geleerd hoe je geautomatiseerde testscripts kunt maken met Selenium IDE en de opnamefunctie. We bladerden ook door dichtbevolkte kenmerken van Selenium IDE. We richtten ons op het herbergen van de lezer met de meest vitale functies en commando ‘ s van Selenium IDE.

slechts een herinnering-Dit is onze 4e tutorial in gratis Selenium training serie.

nu u gewend bent en in staat bent om geautomatiseerde scripts te maken met behulp van de opnamemodus van Selenium IDE, laten we doorgaan met een ander hulpmiddel dat een zeer belangrijke rol speelt in het helpen van ons om effectieve testscripts te maken die bekend staan als “Firebug”. Firebug helpt ons bij het inspecteren van de eigenschappen van web-elementen en webpagina ‘ s.

Deze tutorial bestaat dus uit de installatie van Firebug en de bruikbaarheid ervan.

merk op dat de inhoud van deze tutorial niet alleen van toepassing is in de context van Selenium IDE; eerder kan worden toegepast op elk gereedschap van Selenium suite. Dus zou ik bij voorkeur gebruik maken van de term Selenium in plaats van Selenium IDE.

in deze tutorial, laten we leren hoe Firebug add-on te gebruiken voor het maken van selenium scripts. In het proces, we zullen ook leren hoe Firebug installeren.

Inleiding tot Firebug

Firebug is een Mozilla Firefox add-on. Deze tool helpt ons bij het identificeren of meer specifiek inspecteren van HTML -, CSS-en JavaScript-elementen op een webpagina. Het helpt ons de elementen uniek te identificeren op een webpagina. De elementen kunnen uniek worden gevonden op basis van hun locator types die we later in deze tutorial zouden bespreken.

hoe Firebug installeren?

Voor het gemak van het begrijpen, zouden we het installatie proces splitsen in de volgende stappen.

stap -1: start de Mozilla Firefox-browser en navigeer naar deze Firebug add-on download pagina. De URL brengt ons naar Firefox add-ons sectie.

stap -2: klik op de knop” Toevoegen aan Firefox ” aanwezig op de webpagina. Refereer het volgende cijfer voor hetzelfde.

Stap-3: Zodra we klikken op de” Toevoegen aan Firefox “knop, een security alert box verschijnt, klik op de” Toestaan ” knop Nu.

Stap-4: Firefox downloadt nu de add-on op de achtergrond en er wordt een voortgangsbalk weergegeven.

Stap-5: Zodra het proces is voltooid, verschijnt het software-installatievenster. Klik nu op de” Install Now ” knop.

Stap-6: Zodra de installatie is voltooid, verschijnt er een pop-up waarin staat dat de firebug met succes is geïnstalleerd. Kies nu om deze pop-up te sluiten.

opmerking: In tegenstelling tot Selenium IDE, we zijn niet verplicht om de Firefox opnieuw op te starten om de firebug installatie weer te geven, in plaats van het komt gemakkelijk.

Stap-7: om firebug te starten, kunnen we een van de volgende manieren kiezen:

• druk op F12
• klik op het Firebug-pictogram in de extreme rechterbovenhoek van het Firefox-venster.
• 
• klik op de menubalk van Firefox -> Web Developer -> firebug -> Open Firebug.

Stap 8: Nu is de firebug te zien aan de onderkant van het Firefox-venster.

nu we firebug hebben gedownload en geïnstalleerd, gaan we verder met de soorten locators die we zouden maken met firebug.

Seleniumscript aanmaken met Firebug

In tegenstelling tot Selenium IDE maken we in Firebug handmatig geautomatiseerde testscripts door meerdere teststappen toe te voegen om een logisch en consistent testscript te vormen.

laten we een progressieve aanpak volgen en het proces stap voor stap begrijpen.

Scenario:

• Open “https://accounts.google.com”.
• beweren titel van de toepassing
• voer een Ongeldige gebruikersnaam en ongeldig wachtwoord in en stuur de gegevens om in te loggen.

Stap 1-start de Firefox en open Selenium IDE vanuit de menubalk.

Stap 2-Voer het adres in van de te testen toepassing (“https://accounts.google.com”) in het tekstvak Basis-URL.

Stap 3 – standaard staat de opnameknop in ON. Vergeet niet om het af te stemmen staat om zo de opnamemodus uit te schakelen. Let op als de opnamemodus in ON staat, kan dit resulteren in het opnemen van onze interacties met de webbrowser.

Stap 4 – Open de toepassing die wordt getest (https://accounts.google.com) in de Firefox.

Stap 5-Start Firebug in de webbrowser.

Stap 6 – Selecteer de lege teststap in de Editor.

Stap 7 – typ” open ” in het commando tekstvak aanwezig in het Editor Paneel. Het” open ” commando opent de opgegeven URL in de webbrowser.

aanbeveling: tijdens het typen van commando ‘ s in het tekstvak commando, kan de gebruiker gebruik maken van de functie van automatische selectie. Dus zodra de gebruiker een reeks tekens typt, worden de bijpassende suggesties automatisch ingevuld.

De gebruiker kan ook op de dropdown klikken die beschikbaar is in het tekstvak commando om alle commando ‘ s van Selenium IDE te bekijken.

Stap 8-nu, beweging naar de Firebug sectie binnen de webbrowser, vouw “head” sectie van de HTML-code uit. Let op de HTML tag <title>. Dus om de titel van de webpagina te bevestigen, zouden we de waarde van de <title> tag nodig hebben.

kopieer de titel van de webpagina die in ons geval “Sign in – Google Accounts” is.

stap 9-Selecteer de tweede lege teststap in de Editor.

stap 10-typ “assertTitle” in het tekstvak commando dat aanwezig is in het editorvenster. Het” assertTitle ” commando geeft de huidige paginatitel terug en vergelijkt deze met de opgegeven titel.

stap 11 – plak de titel gekopieerd in Stap 8 in het doelveld van de tweede.

stap 12 – Selecteer nu de derde lege teststap in het Editor Paneel

stap 13 – type” type ” Commando binnen het commando tekstvak. Het” type ” commando voert een waarde in in het opgegeven web element op de GUI.

stap 14 – Schakel nu over naar de webbrowser, breng de muiscursor naar het” e-mail ” tekstvak in het aanmeldformulier en klik met de rechtermuisknop.

kies “inspecteer Element with Firebug” optie. Merk op dat de Firebug automatisch wijst op de bijbehorende HTML-code voor het web-element dat wil zeggen “e-mail tekstvak”.

stap 15 – de HTML-code in de bovenstaande afbeelding toont de verschillende eigenschappen die behoren tot het tekstvak” Email”. Merk op dat er vier eigenschappen (ID, type, plaatshouder en naam) zijn die het webelement op de webpagina uniek identificeren. Het is dus aan de gebruiker om één of meer eigenschappen te kiezen om het webelement te identificeren.

dus, in dit geval, kiezen we ID als de locator. Kopieer de ID-waarde en plak deze in het doelveld van de derde teststap, voorafgegaan door “id=” om Selenium IDE aan te geven om een webelement met ID als “e-mail”te lokaliseren.

(Klik om een vergrote afbeelding te bekijken)

merk op dat Selenium IDE hoofdlettergevoelig is, Typ de attribuutwaarde zorgvuldig en precies zoals deze in de HTML-code wordt weergegeven.

stap 16-klik op de knop Zoeken om te controleren of de geselecteerde locator het aangewezen UI-element op de webpagina vindt en lokaliseert.

stap 17-nu is de volgende stap het invoeren van de testgegevens in het tekstvak Waarde van de derde teststap in het Editor-Paneel. Voer “InvalidEmailID” in het tekstvak Waarde in. De gebruiker kan de testgegevens wijzigen als en wanneer het gewenst is.

stap 18 – Selecteer nu de vierde lege teststap in het Editor Paneel

stap 19 – type” type ” Commando binnen het commando tekstvak.

stap 20-Schakel nu over naar de webbrowser, breng de muisaanwijzer naar het tekstvak “Password” in het aanmeldformulier en klik met de rechtermuisknop.

kies “inspecteer Element met Firebug” optie.

stap 21 – de onderstaande HTML-code toont de verschillende eigenschappen die behoren tot het tekstvak “Password”. Merk op dat er vier eigenschappen (ID, type, plaatshouder en naam) zijn die het webelement op de webpagina uniek identificeren. Het is dus aan de gebruiker om één of meer eigenschappen te kiezen om het webelement te identificeren.

dus, in dit geval, kiezen we ID als de locator. Kopieer de ID-waarde en plak deze in het doelveld van de derde teststap, voorafgegaan door “id=”.

(Klik om een vergrote afbeelding te bekijken)

stap 22 – klik op de knop Zoeken om te controleren of het tabblad locator het aangewezen UI-element op de webpagina vindt en lokaliseert.

stap 23-nu is de volgende stap het invoeren van de testgegevens in het tekstvak Waarde van de vierde teststap in het Editor-Paneel. Voer “InvalidPassword” in het tekstvak Waarde in. De gebruiker kan de testgegevens wijzigen als en wanneer het gewenst is.

stap 24 – Selecteer nu de vijfde lege teststap in het Editor Paneel

stap 25 – Type “click” Commando binnen het commando tekstvak. De opdracht” klik ” klikt op een bepaald webelement binnen de webpagina.

stap 26-Schakel nu over naar de webbrowser, breng de muiscursor naar de “Sign in” knop in het login formulier en druk op een klik met de rechtermuisknop.

kies “inspecteer Element met Firebug” optie.

stap 27 – de onderstaande HTML-code toont de verschillende eigenschappen die behoren tot de “Sign in” knop.

kies ID als de locator. Kopieer de ID-waarde en plak deze in het doelveld van de derde teststap, voorafgegaan door “id=”.

(Klik om een vergrote afbeelding te bekijken)

stap 28 – klik op de knop Zoeken om te controleren of de locator het aangewezen UI-element op de webpagina vindt en lokaliseert.

het testscript is nu voltooid. Raadpleeg de volgende illustratie om het voltooide testscript te bekijken.

stap 29 – Speel het aangemaakte test script af en sla het op dezelfde manier op als in de vorige tutorial.

conclusie

In deze tutorial introduceerden we nog een ander script creation tool of beter gezegd een tool die helpt bij het maken van script.

Firebug heeft verrassend genoeg een groot potentieel om webelementen op een webpagina te vinden. Zo kan de gebruiker de mogelijkheden van de tool benutten in het creëren van effectieve en efficiënte automatisering test scripts handmatig.

Next Tutorial # 5: verder in de volgende tutorial zouden we een kijkje nemen op de verschillende soorten locators in Selenium en hun toegankelijkheidstechniek om testscripts te bouwen. In de tussentijd, reader kan beginnen met het bouwen van zijn / haar automatisering test scripts met behulp van Firebug.