Wat zijn locators?
Locator is een commando dat Selenium IDE vertelt op welke GUI-elementen (bijvoorbeeld Tekstvak, Knoppen, Selectievakjes enz.) Het moet werken. Identificatie van de juiste 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 onjuiste GUI-elementen of helemaal geen elementen! Daarom biedt Selenium een aantal locators om een GUI-element nauwkeurig te lokaliserenDe verschillende soorten CSS Locator in Selenium IDE
Er zijn commando's die geen locator nodig hebben (zoals het "open" commando). De meeste hebben echter wel Element Locators nodig in Selenium webdriver.
De keuze van de locator hangt grotendeels af van uw te testen applicatie . In deze tutorial zullen we schakelen tussen Facebook, nieuwe tours.demoaut op basis van locators die deze applicaties ondersteunen. Op dezelfde manier selecteert u in uw testproject een van de hierboven vermelde elementlocators in Selenium webdriver, op basis van uw toepassingsondersteuning.
Lokaliseren op ID
Dit is de meest gebruikelijke manier om elementen te lokaliseren, aangezien ID's voor elk element uniek zouden moeten zijn.
Doelformaat: id = id van het element
Voor dit voorbeeld gebruiken we Facebook als onze test-app omdat Mercury Tours geen ID-attributen gebruikt.
Stap 1. Sinds deze tutorial is gemaakt, heeft Facebook het ontwerp van de aanmeldingspagina gewijzigd. Gebruik deze demopagina http://demo.guru99.com/test/facebook.html om te testen. Inspecteer het tekstvak 'E-mail of telefoon' met Firebug en noteer de ID. In dit geval is de ID "e-mail".
Stap 2. Start Selenium IDE en typ "id = e-mail" in het vak Doel. Klik op de knop Zoeken en merk op dat het tekstvak "E-mail of telefoon" wordt gemarkeerd met geel en omrand met groen, wat betekent dat Selenium IDE dat element correct kon lokaliseren.
Lokaliseren op naam
Het zoeken van elementen op naam lijkt erg op het lokaliseren op ID, behalve dat we in plaats daarvan het voorvoegsel "name =" gebruiken.
Doelformaat: naam = naam van het element
In de volgende demonstratie zullen we nu Mercury Tours gebruiken 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 "gebruikersnaam" is.
Stap 2. Voer in Selenium IDE "naam = gebruikersnaam" in het vak Doel in en klik op de knop Zoeken. Selenium IDE zou het tekstvak Gebruikersnaam moeten kunnen vinden door het te markeren.
Zoeken op naam 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 Format : name = name_of_the_element filter = value_of_filter
Laten we een voorbeeld bekijken -
Stap 1 . Log in op Mercury Tours met "tutorial" als gebruikersnaam en wachtwoord. Het zou u naar de Flight Finder-pagina moeten brengen die hieronder wordt weergegeven.
Stap 2. Gebruik Firebug en merk op dat de keuzerondjes Round Trip en One Way dezelfde naam "tripType" hebben. Ze hebben echter verschillende VALUE-kenmerken, dus we kunnen ze allemaal als ons filter gebruiken.
Stap 3.
- We gaan eerst naar het keuzerondje Eenrichtingsverkeer. Klik op de eerste regel in de Editor.
- In het Commando veld van Selenium IDE, voer het commando "klik" in.
- Voer in het vak Doel "name = tripType value = oneway" in. Het "waarde = eenrichtings" -gedeelte is ons filter.
Stap 4 . Klik op de knop Zoeken en merk op dat Selenium IDE het keuzerondje One Way groen kan markeren - wat betekent dat we het element met succes kunnen openen met behulp van het VALUE-attribuut.
Stap 5. Druk op de "X" -toets op uw toetsenbord om deze klikopdracht uit te voeren. Merk op dat het keuzerondje Eenrichtingsverkeer is geselecteerd.
U kunt exact hetzelfde doen met het Round Trip-keuzerondje, deze keer met "name = tripType value = roundtrip" als uw doel.
Lokaliseren via koppelingstekst
Dit type CSS-locator in Selenium is alleen van toepassing op hyperlinkteksten. We openen de link door ons doel vooraf te laten gaan met "link =" en vervolgens gevolgd door de hyperlinktekst.
Target Format : link = LINK_TEXT
In dit voorbeeld hebben we toegang tot de link "REGISTREREN" op de startpagina van Mercury Tours.
Stap 1.
- Zorg er eerst voor dat u bent uitgelogd bij Mercury Tours.
- Ga naar de startpagina van Mercury Tours.
Stap 2 .
- Gebruik Firebug om de link "REGISTREREN" te bekijken. De linktekst staat tussen en tags.
- In dit geval is onze linktekst "REGISTREREN". Kopieer de linktekst.
Stap 3 . Kopieer de linktekst in Firebug en plak deze in het doelvak van Selenium IDE. Zet het voorvoegsel met "link =".
Stap 4. Klik op de knop Zoeken en merk op dat Selenium IDE de link REGISTREREN correct heeft gemarkeerd.
Stap 5. Om verder te verifiëren, typ "clickAndWait" in het Commando veld en voer het uit. Selenium IDE zou in staat moeten zijn om met succes op die REGISTREREN-link te klikken en u naar de onderstaande registratiepagina te brengen.
Lokaliseren met CSS Selector
CSS-selectors in Selenium zijn tekenreekspatronen die worden gebruikt om een element te identificeren op basis van een combinatie van HTML-tag, id, klasse en attributen. Lokaliseren met CSS Selectors in Selenium is ingewikkelder dan de vorige methoden, maar het is de meest gebruikelijke lokalisatiestrategie van geavanceerde Selenium-gebruikers omdat het zelfs toegang heeft tot die elementen die geen ID of naam hebben.
CSS Selectors in Selenium hebben veel formaten, maar we zullen ons alleen richten op de meest voorkomende.
- Tag en ID
- Tag en klasse
- Tag en kenmerk
- Tag, klasse en kenmerk
- Innerlijke tekst
Bij het gebruik van deze strategie, voegen we altijd "css =" toe aan het vak Doel, zoals in de volgende voorbeelden zal worden getoond.
Lokaliseren door CSS Selector - Tag en ID
Nogmaals, we zullen in dit voorbeeld het e-mailtekstvak van Facebook gebruiken. Zoals u zich kunt herinneren, heeft het de ID "e-mail" en hebben we het al geopend in het gedeelte "Lokaliseren op ID". Deze keer zullen we een Selenium CSS Selector met ID gebruiken om toegang te krijgen tot datzelfde element.
|
Syntaxis |
Omschrijving |
|---|---|
|
css = tag # id |
|
Houd er rekening mee dat de ID altijd wordt voorafgegaan door een hekje (#).
Stap 1. Navigeer naar www.facebook.com. Gebruik Firebug om het tekstvak 'E-mail of telefoon' te bekijken.
Houd er op dit punt rekening mee dat de HTML-tag "invoer" is en de ID "e-mail". Onze syntaxis is dus "css = input # e-mail".
Stap 2. Typ "css = input # email" in het doelvak van Selenium IDE en klik op de knop Zoeken. Selenium IDE zou dat element moeten kunnen benadrukken.
Lokaliseren door CSS Selector - Tag en klasse
Lokaliseren door CSS Selector in Selenium met behulp van een HTML-tag en een klassenaam is vergelijkbaar met het gebruik van een tag en ID, maar in dit geval wordt een punt (.) Gebruikt in plaats van een hekje.
|
Syntaxis |
Omschrijving |
|---|---|
|
css = tag. klasse |
|
Stap 1. Ga naar de demopagina http://demo.guru99.com/test/facebook.html en gebruik Firebug om het tekstvak "E-mail of telefoon" te inspecteren. Merk op dat de HTML-tag "input" is en de klasse "inputtext".
Stap 2. Typ in Selenium IDE "css = input.inputtext" in het vak Doel en klik op Zoeken. Selenium IDE zou het tekstvak E-mail of Telefoon moeten kunnen herkennen.
Houd er rekening mee dat wanneer meerdere elementen dezelfde HTML-tag en naam hebben, alleen het eerste element in de broncode wordt herkend . Gebruik Firebug om het tekstvak Wachtwoord op Facebook te inspecteren en merk op dat het dezelfde naam heeft als het tekstvak E-mail of Telefoon.
De reden waarom alleen het tekstvak E-mail of Telefoon werd gemarkeerd in de vorige afbeelding, is dat het op de eerste plaats komt in de paginabron van Facebook.
Lokaliseren door CSS Selector - Tag en kenmerk
Deze strategie maakt gebruik van de HTML-tag en een specifiek attribuut van het element waartoe toegang moet worden verkregen.
|
Syntaxis |
Omschrijving |
|---|---|
|
css = tag [attribuut = waarde] |
|
Stap 1. Navigeer naar de registratiepagina van Mercury Tours (http://demo.guru99.com/test/newtours/register.php) en inspecteer het tekstvak "Achternaam". Let op de HTML-tag (in dit geval "input") en de naam ("lastName").
Stap 2. Voer in Selenium IDE "css = input [name = lastName]" in het vak Doel in en klik op Zoeken. Selenium IDE zou met succes toegang moeten hebben tot het veld Achternaam.
Als meerdere elementen dezelfde HTML-tag en hetzelfde kenmerk hebben, wordt alleen het eerste herkend . Dit gedrag is vergelijkbaar met het lokaliseren van elementen met behulp van CSS-selectors met dezelfde tag en klasse.
Lokaliseren met CSS Selector - tag, klasse en attribuut
| Syntaxis | Omschrijving |
|---|---|
| css = tag.class [attribuut = waarde] |
|
Stap 1. Ga naar de demopagina http://demo.guru99.com/test/facebook.html en gebruik Firebug om de invoervakken 'E-mail of telefoon' en 'Wachtwoord' te inspecteren. Let op hun HTML-tag, klasse en attributen. Voor dit voorbeeld zullen we hun 'tabindex'-attributen selecteren.
Stap 2. We zullen eerst het tekstvak 'E-mail of telefoon' openen. We gebruiken dus een tabindex-waarde van 1. Typ "css = input.inputtext [tabindex = 1]" in het vak Doel van Selenium IDE en klik op Zoeken. Het invoervak 'E-mail of telefoon' moet worden gemarkeerd.
Stap 3. Om toegang te krijgen tot het wachtwoordinvoervak, vervangt u eenvoudig de waarde van het tabindex-attribuut. Typ "css = input.inputtext [tabindex = 2]" in het vak Doel en klik op de knop Zoeken. Selenium IDE moet het tekstvak Wachtwoord met succes kunnen identificeren.
Lokaliseren door CSS Selector - innerlijke tekst
Zoals je misschien hebt opgemerkt, krijgen HTML-labels zelden id-, naam- of class-attributen. Dus, hoe krijgen we er toegang toe? Het antwoord is door het gebruik van hun innerlijke teksten. Binnenteksten zijn de daadwerkelijke tekenreekspatronen die het HTML-label op de pagina laat zien.
|
Syntaxis |
Omschrijving |
|---|---|
|
css = tag: bevat ("innerlijke tekst") |
|
Stap 1. Navigeer naar de startpagina van Mercury Tours (http://demo.guru99.com/test/newtours/) en gebruik Firebug om het label "Wachtwoord" te onderzoeken. Let op de HTML-tag (in dit geval "font") en merk op dat deze geen class-, id- of name-attributen heeft.
Stap 2. Typ css = font: contains ("Wachtwoord:") in het doelvak van Selenium IDE en klik op Zoeken. Selenium IDE zou toegang moeten hebben tot het wachtwoordlabel zoals weergegeven in de onderstaande afbeelding.
Stap 3. Vervang deze keer de binnentekst door "Boston" zodat uw Target nu "css = font: contains (" Boston ")" wordt. Klik op Zoeken. U zou moeten opmerken dat het label "Boston to San Francisco" wordt gemarkeerd. Dit toont u aan dat Selenium IDE toegang heeft tot een lang label, zelfs als u zojuist het eerste woord van de binnentekst hebt aangegeven.
Lokaliseren op DOM (Document Object Model)
Het Document Object Model (DOM) is, in eenvoudige bewoordingen, de manier waarop HTML-elementen zijn gestructureerd. Selenium IDE kan de DOM gebruiken om toegang te krijgen tot pagina-elementen. Als we deze methode gebruiken, zal ons doelvak altijd beginnen met "dom = document…"; Het voorvoegsel "dom =" wordt normaal gesproken verwijderd omdat Selenium IDE alles dat begint met het trefwoord "document" automatisch kan interpreteren als een pad binnen de DOM in Selenium.
Er zijn vier basismanieren om een element via DOM in Selenium te lokaliseren:
- getElementById
- getElementsByName
- dom: name (alleen van toepassing op elementen binnen een benoemde vorm)
- dom: index
Lokaliseren op 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 |
Omschrijving |
|---|---|
|
document.getElementById ("id van het element") |
id van het element = dit is de waarde van het ID-attribuut van het element waartoe toegang moet worden verkregen. Deze waarde moet altijd tussen haakjes ("") staan. |
Stap 1. Gebruik deze demopagina http://demo.guru99.com/test/facebook.html Navigeer ernaar en gebruik Firebug om het selectievakje "Aangemeld blijven" te inspecteren. Noteer zijn ID.
We kunnen zien dat de ID die we moeten gebruiken "persist_box" is.
Stap 2. Open Selenium IDE en typ in het vak Doel "document.getElementById (" persist_box ")" en klik op Zoeken. Selenium IDE zou het selectievakje "Aangemeld blijven" moeten kunnen vinden. Hoewel het de binnenkant van het selectievakje niet kan markeren, kan Selenium IDE het element toch omringen met een heldergroene rand, zoals hieronder wordt weergegeven.
Lokaliseren op DOM - getElementsByName
De methode getElementById heeft toegang tot slechts één element tegelijk, en dat is het element met de ID die u hebt opgegeven. De methode getElementsByName is anders. Het verzamelt een reeks elementen met de naam die u hebt opgegeven. U opent de afzonderlijke elementen met behulp van een index die begint bij 0.
|
getElementById
|
||
|
getElementsByName
|
||
|
Syntaxis |
Omschrijving |
|---|---|
|
document.getElementsByName ("naam") [index] |
|
Stap 1. Navigeer naar de startpagina van Mercury Tours en log in met "tutorial" als gebruikersnaam en wachtwoord. Firefox zou u naar het Flight Finder-scherm moeten brengen.
Stap 2. Gebruik Firebug om de drie keuzerondjes onder aan de pagina te inspecteren (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 als eerste, dus het heeft een index van 0. Typ in Selenium IDE "document.getElementsByName (" servClass ") [0]" en klik op de knop Zoeken. Selenium IDE moet het keuzerondje Economy class correct kunnen herkennen.
Stap 4. Wijzig het indexnummer in 1 zodat uw doel nu document.getElementsByName ("servClass") [1] wordt. Klik op de knop Zoeken en Selenium IDE zou het keuzerondje "Business class" moeten kunnen markeren, zoals hieronder weergegeven.
Lokaliseren op DOM - dom: naam
Zoals eerder vermeld, is deze methode alleen van toepassing als het element dat u gebruikt zich in een benoemd formulier bevindt.
|
Syntaxis |
Omschrijving |
|---|---|
|
document.forms ["naam van het formulier"] .elements ["naam van het element"] |
|
Stap 1. Navigeer naar de startpagina van Mercury Tours (http://demo.guru99.com/test/newtours/) en gebruik Firebug om het tekstvak Gebruikersnaam te inspecteren. Merk op dat het is opgenomen in een formulier met de naam "thuis".
Stap 2. Typ in Selenium IDE "document.forms [" home "]. Elements [" gebruikersnaam "]" en klik op de knop Zoeken. Selenium IDE moet in staat zijn om met succes toegang te krijgen tot het element.
Lokaliseren op 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.
|
Syntaxis |
Omschrijving |
|---|---|
|
document.forms [index van het formulier] .elements [index van het element] |
|
We hebben toegang tot het tekstvak "Telefoon" op de registratiepagina van Mercury Tours. Het formulier op die pagina heeft geen naam en ID-kenmerk, dus dit is een goed voorbeeld.
Stap 1. Navigeer naar de registratiepagina van Mercury Tours en inspecteer het tekstvak Telefoon. Merk op dat het formulier dat het bevat geen ID- en naamkenmerken heeft.
Stap 2. Typ "document.forms [0] .elements [3]" in het doelvak van Selenium IDE en klik op de knop Zoeken. Selenium IDE moet het tekstvak Telefoon correct kunnen openen.
Stap 3. U kunt ook de naam van het element gebruiken in plaats van de index en hetzelfde resultaat verkrijgen. Typ "document.forms [0] .elements [" phone "]" in het doelvak van Selenium IDE. Het tekstvak Telefoon moet nog steeds gemarkeerd zijn.
Lokaliseren door 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 XPath ook gebruiken bij het lokaliseren van HTML-elementen.
Voordeel: het heeft toegang tot bijna elk element, zelfs die zonder class-, naam- of id-attributen.
Nadeel: het is de meest gecompliceerde methode om elementen te identificeren vanwege te veel verschillende regels en overwegingen.
Gelukkig kan Firebug automatisch XPath Selenium-locators genereren. In het volgende voorbeeld krijgen we toegang 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. Raadpleeg de onderstaande afbeelding.
Stap 2 . Klik met de rechtermuisknop op de HTML-code van het element en selecteer vervolgens de optie "Kopieer XPath".
Stap 3. Typ in Selenium IDE een schuine streep "/" in het vak Doel en plak vervolgens het XPath dat we in de vorige stap hebben gekopieerd. De invoer in uw Doelvak zou nu moeten beginnen met twee schuine strepen "//".
Stap 4 . Klik op de knop Zoeken. Selenium IDE zou het oranje vak moeten kunnen markeren zoals hieronder weergegeven.
Overzicht
Syntaxis voor gebruik van locator|
Methode |
Doelsyntaxis |
Voorbeeld |
|---|---|---|
| Op ID | id = id_of_the_element | id = e-mail |
| Bij naam | name = naam_van_het_element | naam = gebruikersnaam |
| Op naam met behulp van filters | naam = naam_van_het_elementfilter = waarde_van_filter | naam = tripType waarde = eenrichtingsverkeer |
| Door koppelingstekst | link = link_text | link = REGISTREREN |
| Tag en ID | css = tag # id | css = input # e-mail |
| Tag en klasse | css = tag. klasse | css = input.inputtext |
| Tag en kenmerk | css = tag [attribuut = waarde] | css = input [naam = achternaam] |
| Tag, klasse en kenmerk | css = tag. class [attribuut = waarde] | css = input.inputtext [tabindex = 1] |