Zoekers in Selenium

Wat zijn locators in Selenium?

Een locator is een commando dat een richting aangeeft. Selenium IDE of Selenium WebDriver verwijst naar het juiste GUI-element, zoals een tekstvak, knop, link of selectievakje, waarop een actie moet worden uitgevoerd. Het identificeren van het juiste GUI-element is een voorwaarde voor het bouwen van een betrouwbaar automatiseringsscript. Nauwkeurige identificatie is echter lastiger dan het lijkt. Soms kan het gebeuren dat je interactie hebt met het verkeerde element, of helemaal geen element. Om dit te voorkomen, Selenium biedt diverse lokalisatiestrategieën waarmee GUI-elementen nauwkeurig kunnen worden geselecteerd.

Hoewel sommige commando's, zoals het commando "openen", geen locator vereisen, geldt dit voor de meeste commando's wel. Selenium Commando's zijn afhankelijk van elementlocators. De keuze van de locator hangt grotendeels af van de applicatie die u test (AUT). In deze handleiding wisselen we af tussen Facebook en de Mercury De demo-website van Tours (newtours.demoaut) toont welke locators elke applicatie ondersteunt. Hetzelfde geldt voor uw eigen website. het testen van In dit project selecteert u een elementlocator. Selenium WebDriver wordt aangepast aan de structuur van uw applicatie.

Lokaliseren op ID

Dit is de meest gebruikelijke methode om elementen te lokaliseren, omdat ID's uniek moeten zijn voor elk element op een pagina. Wanneer een ID-attribuut aanwezig is, zou dit uw eerste keuze moeten zijn voor snelle, stabiele en leesbare testscripts.

Target Formaat: id=id van het element

Voor dit voorbeeld gebruiken we een demopagina van Facebook, omdat Mercury Tours gebruikt geen ID-attributen voor de belangrijkste formuliervelden.

Stap 1) Gebruik deze demopagina https://demo.guru99.com/test/facebook.html Voor testdoeleinden. Inspecteer het tekstvak 'E-mail of telefoonnummer' met behulp van de ingebouwde ontwikkelaarstools van uw browser (druk op F12 in Chrome, Edge of Windows 3D). Firefox) en noteer de ID. In dit geval is de ID "email".

Stap 2) Lancering Selenium IDE en voer “id=email” in het veld Target vak. Klik op de knop 'Zoeken' en u zult zien dat het tekstvak 'E-mail of telefoon' geel is gemarkeerd met een groene rand, wat aangeeft dat Selenium IDE heeft het element correct gevonden.

Lokaliseren op naam

Elementen op naam lokaliseren is vergelijkbaar met lokaliseren op ID, met als verschil dat we de “naam=” Voeg in plaats daarvan een voorvoegsel toe. Deze aanpak is handig wanneer elementen geen ID hebben, maar wel een gedefinieerd naamkenmerk.

Target Formaat: naam=naam van het element

Voor de volgende demonstratie zullen we gebruikmaken van Mercury Rondleidingen, omdat alle belangrijke formulierelementen op de site een naamkenmerk hebben.

Stap 1) Navigeer naar https://demo.guru99.com/test/newtours/ Gebruik de ontwikkelaarstools van de browser om het tekstvak 'Gebruikersnaam' te inspecteren. Let op het naamkenmerk.

Hier is de naam van het element "userName".

Stap 2) In Selenium IDE, voer “name=userName” in het Target en klik op de knop Zoeken. Selenium De IDE moet het tekstvak voor de gebruikersnaam vinden door het te selecteren.

Elementen op naam lokaliseren met behulp van filters

Filters zijn handig wanneer meerdere elementen hetzelfde naamkenmerk delen. Filters zijn extra attributen die worden gebruikt om elementen met dezelfde naam van elkaar te onderscheiden. Zonder filters, Selenium zou standaard alleen het eerste overeenkomende element selecteren.

Target Formaat: naam=naam_van_het_element filter=waarde_van_filter

Laten we een voorbeeld bekijken.

Stap 1) Meld u aan bij Mercury Rondleidingen.

Inloggen Mercury Volg de rondleidingen met "tutorial" als zowel gebruikersnaam als wachtwoord. De pagina 'Vluchten zoeken' zou moeten verschijnen, zoals hieronder weergegeven.

Stap 2) Gebruik de ontwikkelaarstools om de VALUE-attributen te inspecteren.

Merk op dat de keuzeknoppen 'Retour' en 'Enkele reis' dezelfde naam 'tripType' hebben. Ze hebben echter verschillende VALUE-attributen, waardoor we elke waarde als filter kunnen gebruiken.

Stap 3) Klik op de eerste rij in de editor.

• We gaan eerst de optie 'One Way' selecteren. Klik op de eerste regel in de Selenium IDE-editor.
• Voer in het opdrachtvak de opdracht 'klik' in.
• In de Target Voer in het vakje "name=tripType value=oneway" in. Het gedeelte "value=oneway" dient als filter.

Stap 4) Klik op de knop Zoeken.

Let erop dat Selenium De IDE markeert de keuzeknop 'One Way' groen, waarmee wordt bevestigd dat het element succesvol is benaderd via het VALUE-attribuut.

Stap 5) Selecteer de optie 'Eenrichtingsverkeer'.

Druk op de "X"-toets op uw toetsenbord om de klikopdracht uit te voeren. De optie "One Way" is nu geselecteerd.

Je kunt dezelfde actie uitvoeren op de keuzeknop 'Rondom de heen- en terugreis', maar gebruik dit keer 'naam=reistype waarde=rondreis' als doel.

Lokaliseren via linktekst

Deze lokalisatiestrategie is alleen van toepassing op hyperlinkteksten. We benaderen de link door het doel te laten voorafgaan door "link=", gevolgd door de zichtbare hyperlinktekst. Deze methode is zeer leesbaar en werkt goed voor navigatietests.

Target Formaat: link=link_tekst

In het volgende voorbeeld openen we de link "REGISTREREN" die te vinden is op de Mercury Homepagina van rondleidingen.

Stap 1)

• Zorg er eerst voor dat u bent uitgelogd. Mercury Rondleidingen.
• Navigeer naar de Mercury Homepagina van rondleidingen.

Stap 2)

• Gebruik de ontwikkelaarstools om de link "REGISTREREN" te inspecteren. De linktekst staat tussen de openings- en sluitings-ankertags.
• In dit geval is de linktekst "REGISTREREN". Kopieer de linktekst.

Stap 3) Kopieer de linktekst en plak deze in het volgende veld: Selenium IDE Target box. Voeg er “link=” voor toe.

Stap 4) Klik op de knop Zoeken. Selenium De IDE zal 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 klikt succesvol op de link 'REGISTREREN' en brengt u naar de onderstaande registratiepagina.

Lokaliseren via DOM (Document Object Model)

De Documentobjectmodel (DOM)Simpel gezegd beschrijft het hoe HTML-elementen zijn opgebouwd als een boomstructuur van knooppunten. Selenium De IDE kan door deze boomstructuur navigeren om toegang te krijgen tot pagina-elementen. Bij gebruik van deze methode, Target Een box begint altijd met “dom=document…”. Het voorvoegsel “dom=” wordt doorgaans weggelaten omdat Selenium De IDE interpreteert automatisch elke waarde die begint met "document" als een DOM-pad.

Er zijn vier basismanieren om een ​​element in de 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 eerst de getElementById-methode van de DOM eens nader bekijken. SeleniumDeze methode retourneert een enkel element door het ID-attribuut te vergelijken.

Syntaxis

document.getElementById("id of the element")

• De ID van het element is de waarde van het ID-attribuut van het element waartoe toegang moet worden verkregen. Deze waarde moet altijd tussen aanhalingstekens staan.

Stap 1) Gebruik deze demopagina https://demo.guru99.com/test/facebook.htmlNavigeer ernaartoe en gebruik de ontwikkelaarstools om het selectievakje 'Ingelogd blijven' te inspecteren. Noteer de ID ervan.

De ID die we moeten gebruiken is "persist_box".

Stap 2) Open Selenium IDE en in de Target Voer in het vak document.getElementById(“persist_box”) in en klik vervolgens op Zoeken. Selenium De IDE zal het selectievakje "Ingelogd blijven" detecteren. Hoewel de inhoud van het selectievakje niet kan worden gemarkeerd, wordt het element omgeven door een felgroene rand, zoals hieronder weergegeven.

Lokaliseren via DOM – getElementsByName

De getElementById-methode benadert slechts één element tegelijk, namelijk het element met de opgegeven ID. De getElementsByName-methode werkt anders. Deze retourneert een array van elementen die de opgegeven naam delen. Individuele elementen worden benaderd met behulp van een numerieke index die begint bij 0.

	getElementById Het retourneert slechts één element. Dat element heeft de ID die is opgegeven tussen de haakjes van getElementById().
	getElementsByName Het retourneert een verzameling elementen met identieke namen. Elk element wordt geïndexeerd door een nummer dat begint bij 0, net als in een array. Je selecteert een specifiek element door de index ervan tussen vierkante haken te plaatsen in de onderstaande syntax.

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 de Mercury Ga naar de homepage van Tours en log in met "tutorial" als gebruikersnaam en wachtwoord. De browser laadt vervolgens het scherm van de vluchtzoeker.

Stap 2) Gebruik de ontwikkelaarstools om de drie keuzeknoppen onderaan de pagina (Economy class, Business class en First class) te inspecteren. Merk op dat ze alle drie dezelfde naam hebben: "servClass".

Stap 3) Laten we eerst de keuzeknop "Economy class" openen. Van de drie keuzeknoppen is dit element het eerste, dus de index is 0. In Selenium Typ in de IDE document.getElementsByName(“servClass”)[0] en klik op de knop Zoeken. Selenium IDE zal de keuzeknop voor de Economy-klasse correct herkennen.

Stap 4) Wijzig het indexnummer naar 1, zodat uw Target wordt document.getElementsByName(“servClass”)[1]. Klik op de knop Zoeken en Selenium De IDE zal het keuzeradiobutton "Business class" markeren, zoals hieronder weergegeven.

Lokaliseren via DOM – dom:naam

Zoals eerder vermeld, is deze methode alleen van toepassing als het element waartoe u toegang wilt krijgen zich binnen een benoemd formulier bevindt. Het locatorpad begint bij het formulier en navigeert vervolgens via de naam naar het doelelement.

Syntaxis

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

• naam van het formulier = de waarde van het naamkenmerk 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 https://demo.guru99.com/test/newtours/ Gebruik de ontwikkelaarstools om het tekstvak voor de gebruikersnaam te inspecteren. U zult zien dat het zich in een formulier met de naam "home" bevindt.

Stap 2) In Selenium Typ in de IDE document.forms[“home”].elements[“userName”] en klik op de knop Zoeken. Selenium De IDE zal het element succesvol benaderen.

Lokaliseren via DOM – dom:index

Deze methode werkt zelfs wanneer het element zich niet binnen een benoemd formulier bevindt, omdat de index van het formulier in plaats van de naam wordt gebruikt. Dit is handig voor oudere pagina's of automatisch gegenereerde formulieren waar naamgeving niet beschikbaar is.

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 gehele pagina
• index van het element = het indexnummer (beginnend bij 0) van het element ten opzichte van het formulier waarin het voorkomt

We openen het tekstvak "Telefoon" op de Mercury Aanmeldingspagina voor rondleidingen. Het formulier op deze pagina heeft geen naam of ID-attribuut, dus het is een goed voorbeeld.

Stap 1) Navigeer naar de Mercury Bekijk de pagina 'Aanmelden voor rondleidingen' en controleer het tekstvak 'Telefoonnummer'. Merk op dat het omringende formulier geen ID- of naamkenmerken heeft.

Stap 2) Voer document.forms[0].elements[3] in de Selenium IDE Target en klik op de knop Zoeken. Selenium IDE zal het tekstvak 'Telefoonnummer' correct benaderen.

Stap 3) Als alternatief kunt u de naam van het element gebruiken in plaats van de index voor hetzelfde resultaat. Voer document.forms[0].elements[“phone”] in. Target Het tekstvak 'Telefoon' blijft gemarkeerd.

Lokaliseren via XPath

XPath is de querytaal die wordt gebruikt om door XML-knooppunten (Extensible Markup Language) te navigeren. Omdat HTML kan worden beschouwd als een implementatie van XML, XPath kan ook HTML-elementen lokaliseren. Het is een van de krachtigste lokalisatiestrategieën in Selenium.

• Voordeel: Het heeft toegang tot vrijwel elk element, inclusief elementen zonder klasse-, naam- of ID-attributen.
• Nadeel: Het is de meest complexe locatorstrategie vanwege de vele regels en syntactische variaties.

Moderne ontwikkelaarstools voor browsers kunnen automatisch XPath-expressies genereren. In Chrome, Edge of FirefoxKlik met de rechtermuisknop op een element in het paneel Elementen en kies Kopiëren > XPath kopiëren. In het volgende voorbeeld zullen we een afbeelding benaderen die niet kan worden gevonden met behulp van de eerder besproken methoden.

Stap 1) Navigeer naar de Mercury Ga naar de homepage van Tours en gebruik de ontwikkelaarstools om de oranje rechthoek rechts van het gele vak 'Links' te inspecteren, zoals hieronder weergegeven.

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 enkele schuine streep “/” in het veld Target Plak vervolgens het XPath-pad dat je in de vorige stap hebt gekopieerd in het daarvoor bestemde vak. De vermelding in de Target Het vak zou nu moeten beginnen met twee schuine strepen “//”.

Stap 4) Klik op de knop Zoeken. Selenium De IDE zal het oranje vak markeren, zoals hieronder weergegeven.

Waarom het kiezen van de juiste locatiebepaler belangrijk is

Het kiezen van de juiste lokalisatiestrategie is een van de meest invloedrijke beslissingen in Selenium Automatisering is belangrijk omdat het direct van invloed is op de stabiliteit van scripts, de uitvoeringssnelheid en de onderhoudskosten op lange termijn. Een slecht gekozen locator kan leiden tot onbetrouwbare tests, valse foutmeldingen en frequente herwerkzaamheden telkens wanneer de gebruikersinterface van de applicatie verandert. De door ervaren automatiseringsengineers aanbevolen volgorde is: eerst ID, dan Naam, gevolgd door CSS-selector, Linktekst en ten slotte XPath.

ID-gebaseerde locators zijn het snelst omdat de browserzoekfunctie is geoptimaliseerd voor unieke identificatoren. Naamgebaseerde locators zijn bijna net zo efficiënt wanneer namen uniek zijn. CSS-selectors en XPath bieden flexibiliteit, maar zijn doorgaans trager en kwetsbaarder wanneer ontwikkelaars de DOM herstructureren. Linktekst is uitstekend voor navigatielinks, maar biedt beperkte mogelijkheden voor hergebruik.

Stabiele automatisering is ook afhankelijk van samenwerking met ontwikkelaars. Wanneer testers tijdens codebeoordelingen consistente en betekenisvolle ID- of data-*-attributen vragen, verbetert de duurzaamheid van locators aanzienlijk. Vermijd het gebruik van automatisch gegenereerde ID's (zoals die van frameworks), omdat deze tussen builds kunnen veranderen. Door prioriteit te geven aan leesbare, intentiegedreven locators kunnen teams testsuites onderhoudbaar houden en de technische schuld verminderen naarmate de applicatie zich ontwikkelt.

Beste werkwijzen voor het schrijven van betrouwbare locatiebeschrijvingen

Betrouwbare locators vormen de basis van een duurzaam systeem. Selenium Testsuite. De volgende werkwijzen helpen scriptfouten te verminderen, de leesbaarheid te verbeteren en tests robuuster te maken tegen UI-wijzigingen.

1. Unieke ID's hebben de voorkeur: Controleer altijd eerst of er een ID-attribuut aanwezig is. ID's zijn bedoeld om uniek te zijn binnen een pagina en zijn de meest efficiënte keuze qua prestaties.
2. Gebruik semantische Name- en data-*-attributen: Moedig ontwikkelaars aan om stabiele testkenmerken zoals data-testid of data-qa toe te voegen. Deze blijven consistent, zelfs wanneer CSS-klassen veranderen.
3. Vermijd absolute XPath: Absolute paden zoals /html/body/div[2]/div[3]/span werken vaak niet. Gebruik relatieve XPath-expressies met attributen zoals //input[@name='userName'].
4. Combineer kenmerken voor meer precisie: Als een enkel attribuut niet uniek is, combineer dan meerdere attributen (bijvoorbeeld //button[@type='submit' en @name='login']) om het juiste element te selecteren.
5. Gebruik tekst verstandig: Locators die afhankelijk zijn van zichtbare tekst kunnen problemen veroorzaken bij verschillende taalversies. Gebruik tekstgebaseerde locators alleen wanneer de inhoud stabiel en eentalig is.
6. Centraliseer locators: Sla locators op in een Page Object Model (POM)-klasse, zodat updates op één plek kunnen worden doorgevoerd in plaats van in meerdere testscripts.
7. Valideren in de ontwikkelaarstools: Voordat je een locator aan een script toevoegt, test je deze in de browserconsole met $x(“//xpath”) voor XPath of document.querySelector voor CSS om te bevestigen dat deze precies één element retourneert.
8. Vermijd indexgebaseerde locators waar mogelijk: Indexposities zoals [3] zijn afhankelijk van de volgorde van de elementen. Zelfs kleine wijzigingen in de lay-out kunnen de index verschuiven en het script onbruikbaar maken.

Door deze werkwijzen consequent toe te passen, creëren automatiseringsengineers testsuites die schaalbaar zijn over teams heen en die frequente UI-updates met minimaal onderhoud doorstaan.

Veelgestelde vragen