Zoekers in Selenium

Wat zijn locatiezoekers?

Locator is een commando dat vertelt Selenium IDE welke GUI-elementen (zeg Text Box, Knopen, Controle Boxes etc) het moet werken. Identificatie van correcte GUI-elementen is een vereiste voor het maken van een automatiseringsscript. Maar nauwkeurige identificatie van GUI-elementen is moeilijker dan het klinkt. Soms werk je met incorrecte GUI-elementen of helemaal geen elementen! Daarom, Selenium biedt een aantal Locators om een ​​GUI-element nauwkeurig te lokaliseren

Er zijn commando's waarvoor geen locator nodig is (zoals het commando "openen"). De meeste van hen hebben echter wel elementlocators nodig Selenium webstuurprogramma.

De keuze van de locator hangt grotendeels af van uw applicatie die wordt getest. In deze tutorial schakelen we tussen Facebook, new tours.demoaut op basis van locators die deze applicaties ondersteunen. Evenzo in uw Testen project, selecteert u een van de hierboven genoemde elementlocators in Selenium webdriver, gebaseerd op uw applicatie-ondersteuning.

Lokaliseren op ID

Dit is de meest gebruikelijke manier om elementen te lokaliseren, aangezien ID's voor elk element uniek moeten zijn.

Target Formaat: id=id van het element

Voor dit voorbeeld gebruiken we Facebook als onze test-app omdat Mercury Tours gebruiken geen ID-attributen.

Stap 1) Sinds deze tutorial is gemaakt, heeft Facebook het ontwerp van de inlogpagina gewijzigd. Gebruik deze demopagina http://demo.guru99.com/test/facebook.html voor testen. Inspecteer het tekstvak "E-mail of telefoon" met Firebug en noteer de ID. In dit geval is de ID "e-mail".

Stap 2) Lancering Selenium IDE en voer “id=email” in het veld Target box. Klik op de knop Zoeken en merk op dat het tekstvak 'E-mail of telefoon' geel wordt gemarkeerd en groen omrand, wat betekent dat Selenium IDE kon dat element correct lokaliseren.

Lokaliseren op naam

Het lokaliseren van elementen op naam lijkt sterk op het lokaliseren op ID, behalve dat we de “naam=” voorvoegsel in plaats daarvan.

Target Formaat: naam=naam van het element

In de volgende demonstratie zullen we nu gebruiken Mercury Tours omdat alle belangrijke elementen een naam hebben.

Stap 1) Navigeer naar http://demo.guru99.com/test/newtours/ en gebruik Firebug om het tekstvak "Gebruikersnaam" te inspecteren. Let op het naamkenmerk.

Hier zien we dat de naam van het element “userName” is.

Stap 2) In Selenium IDE, voer “name=userName” in het Target en klik op de knop Zoeken. Selenium De IDE zou het tekstvak Gebruikersnaam moeten kunnen vinden door het te markeren.

Elementen op naam lokaliseren met behulp van filters

Filters kunnen worden gebruikt als meerdere elementen dezelfde naam hebben. Filters zijn aanvullende attributen die worden gebruikt om elementen met dezelfde naam te onderscheiden.

Target Formaat: naam=naam_van_het_element filter=waarde_van_filter

Laten we een voorbeeld bekijken -

Stap 1) Meld u aan bij Mercury Rondleidingen.

Meld u aan bij Mercury Rondleidingen met “tutorial” als gebruikersnaam en wachtwoord. U wordt naar de hieronder weergegeven Flight Finder-pagina geleid.

Stap 2) Gebruik Firebug en gebruik VALUE-attributen.

Als u Firebug gebruikt, ziet u dat de keuzerondjes Round Trip en One Way dezelfde naam hebben als 'tripType'. Ze hebben echter verschillende VALUE-kenmerken, zodat we ze allemaal als ons filter kunnen gebruiken.

Stap 3) Klik op de eerste regel.

• We gaan eerst naar het keuzerondje One Way. Klik op de eerste regel in de Editor.
• In het opdrachtvenster van Selenium IDE, voer het commando "klik" in.
• In het Target box, voer “name=tripType value=oneway” in. Het “value=oneway” gedeelte is ons filter.

Stap 4) Klik op de knop Zoeken.

Let erop dat Selenium IDE kan het keuzerondje One Way groen markeren, wat betekent dat we met succes toegang kunnen krijgen tot het element met behulp van het VALUE-attribuut.

Stap 5) Selecteer het keuzerondje Eénrichtingsverkeer.

Druk op de “X”-toets op uw toetsenbord om deze klikopdracht uit te voeren. Merk op dat het keuzerondje One Way geselecteerd is.

U kunt precies hetzelfde doen met het keuzerondje Round Trip, deze keer met 'name=tripType value=roundtrip' als uw doel.

Lokaliseren via linktekst

Dit type CSS-locator in Selenium geldt alleen voor hyperlinkteksten. We krijgen toegang tot de link door ons doel te laten voorafgaan door “link=” en vervolgens gevolgd door de hyperlinktekst.

Target Formaat: link=link_tekst

In dit voorbeeld gaan we naar de link “REGISTER” op de website Mercury Homepagina van rondleidingen.

Stap 1)

• Zorg er eerst voor dat u bent afgemeld Mercury Rondleidingen.
• Ga naar Mercury Homepagina van rondleidingen.

Stap 2)

• Gebruik Firebug om de link “REGISTREREN” te inspecteren. De linktekst bevindt zich tussen en tags.
• In dit geval is onze linktekst “REGISTREREN”. Kopieer de linktekst.

Stap 3) Kopieer de linktekst in Firebug en plak deze erop Selenium Ides Target box. Voeg er “link=” voor toe.

Stap 4) Klik op de knop Zoeken en merk dat op Selenium IDE kon de REGISTER-link correct markeren.

Stap 5) Om dit verder te verifiëren, typt u “clickAndWait” in het opdrachtvak en voert u het uit. Selenium IDE zou in staat moeten zijn om met succes op de REGISTER-link te klikken en u naar de hieronder weergegeven registratiepagina te brengen.

Lokaliseren via DOM (Document Object Model)

De Documentobjectmodel (DOM), in eenvoudige bewoordingen, is de manier waarop HTML-elementen zijn gestructureerd. Selenium IDE kan de DOM gebruiken bij het benaderen van pagina-elementen. Als we deze methode gebruiken, zal onze Target box zal altijd beginnen met “dom=document…”; het voorvoegsel “dom=” wordt echter normaal gesproken verwijderd omdat Selenium IDE kan alles wat begint met het trefwoord "document" automatisch interpreteren als een pad binnen de DOM Selenium toch.

Er zijn vier basismanieren om een ​​element via DOM te lokaliseren Selenium:

• getElementById
• getElementsByName
• dom:naam (alleen van toepassing op elementen binnen een benoemde vorm)
• dom:index

Lokaliseren via DOM – getElementById

Laten we ons concentreren op de eerste methode – met behulp van de getElementById-methode van DOM in Selenium. De syntaxis zou zijn:

Syntaxis

document.getElementById("id of the element")

• id van het element = dit is de waarde van het ID-attribuut van het te benaderen element. Deze waarde moet altijd tussen haakjes staan ​​(“”).

Stap 1) Gebruik deze demopagina http://demo.guru99.com/test/facebook.html Navigeer ernaartoe en gebruik Firebug om het selectievakje 'Houd mij aangemeld' te inspecteren. Noteer de ID.

We kunnen zien dat de ID die we moeten gebruiken “persist_box” is.

Stap 2) Openen Selenium IDE en in de Target Voer in het zoekvak “document.getElementById(“persist_box”)” in en klik op Zoeken. Selenium IDE zou het selectievakje “Houd mij aangemeld” moeten kunnen vinden. Hoewel het de binnenkant van het selectievakje niet kan markeren, Selenium IDE kan het element nog steeds omringen met een heldergroene rand, zoals hieronder weergegeven.

Lokaliseren via DOM – getElementsByName

De methode getElementById heeft slechts toegang tot één element tegelijk, en dat is het element met de ID die u hebt opgegeven. De getElementsByName-methode is anders. Het verzamelt een array van elementen met de naam die u hebt opgegeven. U krijgt toegang tot de afzonderlijke elementen via een index die begint bij 0.

	getElementById Het krijgt slechts één element voor je. Dat element draagt ​​de ID die u tussen de haakjes van getElementById() hebt opgegeven.
	getElementsByName Het krijgt een verzameling elementen waarvan de namen allemaal hetzelfde zijn. Elk element wordt geïndexeerd met een nummer dat begint bij 0, net als bij een array U geeft aan welk element u wilt benaderen door het indexnummer ervan tussen de vierkante haken te plaatsen in de onderstaande syntaxis van getElementsByName.

Syntaxis

document.getElementsByName(“name“)[index]

• naam = naam van het element zoals gedefinieerd door het attribuut 'name'
• index = een geheel getal dat aangeeft welk element binnen de array van getElementsByName zal worden gebruikt.

Stap 1) Navigeer naar Mercury De startpagina van Tours en log in met "tutorial" als gebruikersnaam en wachtwoord. Firefox zou u naar het Flight Finder-scherm moeten brengen.

Stap 2) Inspecteer met behulp van Firebug de drie keuzerondjes onderaan de pagina (keuzerondjes Economy Class, Business Class en First Class). Merk op dat ze allemaal dezelfde naam hebben, namelijk "servClass".

Stap 3) Laten we eerst naar het keuzerondje ‘Economy class’ gaan. Van al deze drie keuzerondjes komt dit element op de eerste plaats, dus het heeft een index van 0. In Selenium IDE, typ “document.getElementsByName(“servClass”)[0]” en klik op de knop Zoeken. Selenium IDE zou het keuzerondje Economy Class correct moeten kunnen identificeren.

Stap 4) Wijzig het indexnummer in 1, zodat uw Target wordt nu document.getElementsByName(“servClass”)[1]. Klik op de knop Zoeken en Selenium IDE zou het keuzerondje “Business class” moeten kunnen markeren, zoals hieronder weergegeven.

Lokaliseren via DOM – dom:naam

Zoals eerder vermeld, is deze methode alleen van toepassing als het element waartoe u toegang krijgt, zich in een benoemd formulier bevindt.

Syntaxis

document.forms[“name of the form“].elements[“name of the element“]

• naam van het formulier = de waarde van het naamattribuut van de formuliertag die het element bevat waartoe u toegang wilt krijgen
• naam van het element = de waarde van het naamattribuut van het element waartoe u toegang wilt krijgen

Stap 1) Navigeer naar Mercury Homepagina van rondleidingen http://demo.guru99.com/test/newtours/ en gebruik Firebug om het tekstvak Gebruikersnaam te inspecteren. Merk op dat het zich in een formulier met de naam "home" bevindt.

Stap 2) In Selenium IDE, typ “document.forms[“home”].elements[“gebruikersnaam”]” en klik op de knop Zoeken. Selenium IDE moet succesvol toegang kunnen krijgen tot het element.

Lokaliseren via DOM – dom:index

Deze methode is zelfs van toepassing als het element zich niet binnen een benoemd formulier bevindt, omdat het de index van het formulier gebruikt en niet de naam ervan.

Syntaxis

document.forms[index of the form].elements[index of the element]

• index van het formulier = het indexnummer (beginnend bij 0) van het formulier ten opzichte van de hele pagina
• index van het element = het indexnummer (beginnend bij 0) van het element ten opzichte van de gehele vorm die het bevat

We zullen toegang krijgen tot het tekstvak "Telefoon" binnen Mercury Registratiepagina voor rondleidingen. Het formulier op die pagina heeft geen naam- en ID-attribuut, dus dit is een goed voorbeeld.

Stap 1) Navigeer naar Mercury Tours Registratiepagina en inspecteer het tekstvak Telefoon. Merk op dat het formulier dat het bevat geen ID- en naamattributen heeft.

Stap 2) Voer “document.forms[0].elements[3]” in Selenium Ides Target en klik op de knop Zoeken. Selenium IDE zou het tekstvak Telefoon correct moeten kunnen openen.

Stap 3) Als alternatief kunt u de naam van het element gebruiken in plaats van de index en hetzelfde resultaat verkrijgen. Voer “document.forms[0].elements[“telefoon”]” in Selenium Ides Target vak. Het tekstvak Telefoon zou nog steeds gemarkeerd moeten worden.

Lokaliseren via XPath

XPath is de taal die wordt gebruikt bij het lokaliseren van XML-knooppunten (Extensible Markup Language). Omdat HTML kan worden gezien als een implementatie van XML, kunnen we ook gebruik maken van XPath bij het lokaliseren van HTML-elementen.

• Voordeel: Het heeft toegang tot vrijwel elk element, zelfs die zonder klasse-, naam- of id-attributen.
• Nadeel: Het is de meest ingewikkelde methode om elementen te identificeren vanwege te veel verschillende regels en overwegingen.

Gelukkig kan Firebug automatisch XPath genereren Selenium locators. In het volgende voorbeeld zullen we toegang krijgen tot een afbeelding die onmogelijk toegankelijk is via de methoden die we eerder hebben besproken.

Stap 1) Navigeer naar Mercury Tours Homepage en gebruik Firebug om de oranje rechthoek rechts van het gele "Links"-vak te inspecteren. Zie de afbeelding hieronder.

Stap 2) Klik met de rechtermuisknop op de HTML-code van het element en selecteer vervolgens de optie "XPath kopiëren".

Stap 3) In Selenium IDE, typ een schuine streep “/” in de Target box en plak vervolgens het XPath dat we in de vorige stap hebben gekopieerd. De vermelding in uw Target Het vak zou nu moeten beginnen met twee schuine strepen “//”.

Stap 4) Klik op de knop Zoeken. Selenium IDE zou het oranje vakje moeten kunnen markeren zoals hieronder weergegeven.