Locatorer i Selenium
Krishna Rungta
⚡ Smart opsummering
Locatorer i Selenium er kommandoer, der instruerer automatiseringsmotoren til at identificere GUI-elementer såsom tekstbokse, knapper og afkrydsningsfelter. Denne reference forklarer ID-, navn-, linktekst-, DOM- og XPath-lokaliseringstyper med praktiske eksempler, syntaksregler og udvælgelsesstrategier til pålidelige webautomatiseringsscripts.
Hvad er lokaliseringsværktøjer i Selenium?
En lokaliseringsenhed er en kommando, der dirigerer Selenium IDE eller Selenium WebDriver til det korrekte GUI-element, såsom en tekstboks, knap, link eller afkrydsningsfelt, hvor en handling skal udføres. At identificere det korrekte GUI-element er en forudsætning for at bygge et pålideligt automatiseringsscript. Nøjagtig identifikation er dog mere udfordrende, end det lyder. Nogle gange kan du ende med at interagere med det forkerte element eller slet ikke med noget element. For at løse dette, Selenium tilbyder en række lokaliseringsstrategier, der muliggør præcis målretning af GUI-elementer.
Selvom nogle kommandoer, såsom kommandoen "åbn", ikke kræver en locator, kræver størstedelen af Selenium Kommandoer afhænger af elementlokaliseringsværktøjer. Valget af lokator afhænger i høj grad af din applikation under test (AUT). I denne vejledning vil vi skifte mellem Facebook og Mercury Tours demoside (newtours.demoaut), baseret på hvilke lokaliseringsværktøjer hver applikation understøtter. Ligeledes i din egen test projekt, skal du vælge en elementsøger i Selenium WebDriver baseret på strukturen af din applikation.
Lokalisering efter ID
Dette er den mest almindelige metode til at finde elementer, fordi ID'er er beregnet til at være unikke for hvert element på en side. Når en ID-attribut findes, bør den være dit førstevalg for hurtige, stabile og læsbare testscripts.
Target Format: id=id for elementet
I dette eksempel bruger vi en Facebook-demoside fordi Mercury Tours bruger ikke ID-attributter til sine primære formularfelter.
Trin 1) Brug denne demoside https://demo.guru99.com/test/facebook.html til test. Undersøg tekstfeltet "E-mail eller telefon" ved hjælp af din browsers indbyggede udviklerværktøjer (tryk på F12 i Chrome, Edge eller Firefox) og noter dens ID. I dette tilfælde er ID'et "e-mail".
Trin 2) Launch Selenium IDE og indtast "id=email" i Target boks. Klik på knappen Søg, og bemærk, at tekstfeltet "E-mail eller telefon" er fremhævet med gult med en grøn kant, hvilket angiver, at Selenium IDE har placeret elementet korrekt.
Finder efter navn
At lokalisere elementer efter navn minder om at lokalisere efter ID, bortset fra at vi bruger "navn =" præfiks i stedet. Denne tilgang er nyttig, når elementer mangler et ID, men har en defineret navneattribut.
Target Format: navn=navn på elementet
Til den følgende demonstration vil vi bruge Mercury Rundvisninger fordi alle væsentlige formelementer på webstedet har en navneattribut.
Trin 1) Naviger til https://demo.guru99.com/test/newtours/ og brug browserens udviklerværktøjer til at undersøge tekstfeltet "Brugernavn". Bemærk dens navneattribut.
Her er elementets navn "brugernavn".
Trin 2) In Selenium IDE, indtast "navn=brugernavn" i Target boksen og klik på knappen Find. Selenium IDE bør finde tekstfeltet Brugernavn ved at markere det.
Sådan finder du element efter navn ved hjælp af filtre
Filtre er nyttige, når flere elementer deler den samme navneattribut. Filtre er yderligere attributter, der bruges til at skelne mellem elementer, der deler et identisk navn. Uden filtre, Selenium ville som standard kun bruge det første matchende element.
Target Format: navn=navn_på_elementet filter=værdi_af_filter
Lad os gennemgå et eksempel.
Trin 1) Log på Mercury Ture.
Log ind på Mercury Ture med "tutorial" som både brugernavn og adgangskode. Siden Flight Finder burde vises som vist nedenfor.
Trin 2) Brug udviklerværktøjer til at inspicere VALUE-attributterne.
Bemærk, at radioknapperne for tur/retur og enkeltbillet deler det samme navn "tripType". De har dog forskellige VALUE-attributter, så vi kan bruge hver værdi som et filter.
Trin 3) Klik på den første række i editoren.
- Vi skal først tilgå radioknappen Ensrettet. Klik på den første linje i Selenium IDE-editor.
- I kommandofeltet skal du indtaste kommandoen "klik".
- I Target I feltet skal du indtaste "name=tripType value=oneway". Delen "value=oneway" fungerer som vores filter.
Trin 4) Klik på knappen Find.
Læg mærke til det Selenium IDE fremhæver radioknappen Envejs med grønt, hvilket bekræfter, at elementet er blevet tilgået via dets VALUE-attribut.
Trin 5) Vælg radioknappen Ensrettet.
Tryk på "X"-tasten på tastaturet for at udføre klikkommandoen. Radioknappen Envejs er nu valgt.
Du kan udføre den samme handling på alternativknappen Rundtur, denne gang med "navn=turtype værdi=rundtur" som dit mål.
Lokalisering ved hjælp af linktekst
Denne lokationsstrategi gælder kun for hyperlinktekster. Vi tilgår linket ved at sætte "link=" foran målet efterfulgt af den synlige hyperlinktekst. Denne metode er meget læsbar og fungerer godt til navigationstest.
Target Format: link=link_tekst
I følgende eksempel bruger vi linket "REGISTER" på Mercury Tours hjemmeside.
Trin 1)
- Først skal du sørge for at du er logget ud af Mercury Ture.
- Naviger til Mercury Tours hjemmeside.
Trin 2)
- Brug Udviklerværktøjer til at undersøge linket "REGISTER". Linkteksten vises mellem det indledende og det afsluttende ankertag.
- I dette tilfælde er linkteksten "REGISTER". Kopiér linkteksten.
Trin 3) Kopier linkteksten og indsæt den i Selenium IDE Target boks. Præfiks det med "link =".
Trin 4) Klik på knappen Find. Selenium IDE vil fremhæve REGISTER-linket korrekt.
Trin 5) For at bekræfte yderligere skal du indtaste "clickAndWait" i kommandoboksen og udføre det. Selenium IDE klikker på linket REGISTRER og fører dig til registreringssiden vist nedenfor.
Lokalisering efter DOM (Document Object Model)
Dokumentobjektmodel (DOM)beskriver enkelt sagt, hvordan HTML-elementer er struktureret som et træ af noder. Selenium IDE kan navigere i dette træ for at få adgang til sideelementer. Når denne metode bruges, Target Feltet starter altid med “dom=dokument…”. Præfikset “dom=” udelades typisk fordi Selenium IDE fortolker automatisk enhver værdi, der starter med "dokument", som en DOM-sti.
Der er fire grundlæggende måder at finde et element via DOM'en i Selenium:
- getElementById
- getElementsByName
- dom:navn (gælder kun for elementer i en navngivet form)
- dom:indeks
Lokalisering efter DOM – getElementById
Lad os først undersøge getElementById-metoden i DOM'en i SeleniumDenne metode returnerer et enkelt element ved at matche dets ID-attribut.
Syntaks
document.getElementById("id of the element")
- Elementets id = værdien af ID-attributten for det element, der skal tilgås. Denne værdi skal altid omsluttes af et par anførselstegn.
Trin 1) Brug denne demoside https://demo.guru99.com/test/facebook.htmlNaviger til den, og brug Udviklerværktøjer til at kontrollere afkrydsningsfeltet "Hold mig logget ind". Noter dens ID.
Det ID, vi skal bruge, er “persist_box”.
Trin 2) Åbne Selenium IDE og i Target Indtast document.getElementById(“persist_box”) i feltet, og klik derefter på Søg. Selenium IDE finder afkrydsningsfeltet "Hold mig logget ind". Selvom det ikke kan fremhæve det indre af afkrydsningsfeltet, omgiver det elementet med en lysegrøn kant, som vist nedenfor.
Lokalisering efter DOM – getElementsByName
Metoden getElementById tilgår kun ét element ad gangen, nemlig elementet med det angivne ID. Metoden getElementsByName opfører sig anderledes. Den returnerer et array af elementer, der deler det angivne navn. Individuelle elementer tilgås ved hjælp af et numerisk indeks, der starter ved 0.
 |
getElementById Den returnerer kun ét element. Elementet bærer det ID, der er angivet i parenteserne i getElementById(). |
 |
getElementsByName Den returnerer en samling af elementer, hvis navne er identiske. Hvert element er indekseret af et tal, der starter fra 0, ligesom et array. Du vælger et specifikt element ved at placere dets indeks i de firkantede parenteser i syntaksen nedenfor. |
Syntaks
document.getElementsByName("name")[index]
- navn = navnet på elementet som defineret af dets 'navn'-attribut
- index = et heltal, der angiver hvilket element i getElementsByName's array der vil blive brugt.
Trin 1) Naviger til Mercury Gå til Tours hjemmeside og log ind med "tutorial" som brugernavn og adgangskode. Browseren vil indlæse Flight Finder-skærmen.
Trin 2) Brug Udviklerværktøjer til at undersøge de tre alternativknapper nederst på siden (Økonomiklasse, Businessklasse og Første klasse). Bemærk, at de alle deler det samme navn, "servClass".
Trin 3) Lad os først finde alternativknappen "Økonomiklasse". Af de tre alternativknapper vises dette element først, så dets indeks er 0. I Selenium IDE, skriv document.getElementsByName("servClass")[0] og klik på knappen Søg. Selenium IDE vil identificere alternativknappen for økonomiklasse korrekt.
Trin 4) Ændr indeksnummeret til 1, så din Target bliver document.getElementsByName(“servClass”)[1]. Klik på knappen Find, og Selenium IDE vil fremhæve alternativknappen "Business class" som vist nedenfor.
Lokalisering efter DOM – dom:navn
Som tidligere nævnt gælder denne metode kun, hvis det element, du tilgår, er indeholdt i en navngiven formular. Finderstien begynder ved formularen og går derefter ned til målelementet efter navn.
Syntaks
document.forms["name of the form"].elements["name of the element"]
- formularens navn = værdien af navneattributten for formulartagget, der indeholder det element, du ønsker at få adgang til.
- navnet på elementet = værdien af navneattributten for det element, du ønsker at få adgang til
Trin 1) Naviger til Mercury Tours hjemmeside https://demo.guru99.com/test/newtours/ og brug Udviklerværktøjer til at undersøge tekstfeltet Brugernavn. Bemærk, at det er indeholdt i en formular med navnet "hjem".
Trin 2) In Selenium IDE, skriv document.forms[“home”].elements[“brugernavn”] og klik på knappen Søg. Selenium IDE'en vil tilgå elementet.
Lokalisering efter DOM – dom:index
Denne metode gælder, selv når elementet ikke er inden for en navngivet formular, fordi den bruger formularens indeks i stedet for dens navn. Dette er nyttigt for ældre sider eller automatisk genererede formularer, hvor navngivning ikke er tilgængelig.
Syntaks
document.forms[index of the form].elements[index of the element]
- formularens indeks = formularens indeksnummer (startende ved 0) i forhold til hele siden
- Elementets indeks = indeksnummeret (startende ved 0) for elementet i forhold til den form, der indeholder det
Vi får adgang til tekstfeltet "Telefon" på Mercury Tilmeldingsside for ture. Formularen på denne side har hverken et navn eller en ID-attribut, så den er et godt eksempel.
Trin 1) Naviger til Mercury Tilmeldingssiden for rundvisninger, og undersøg tekstfeltet Telefon. Bemærk, at den omgivende formular hverken har ID- eller navneattributter.
Trin 2) Indtast document.forms[0].elements[3] i Selenium IDE Target boksen og klik på knappen Find. Selenium IDE vil tilgå tekstfeltet Telefon korrekt.
Trin 3) Alternativt kan du bruge elementets navn i stedet for dets indeks for at opnå det samme resultat. Indtast document.forms[0].elements[“telefon”] i Target boks. Tekstfeltet Telefon vil stadig være fremhævet.
Lokalisering af XPath
XPath er det forespørgselssprog, der bruges til at navigere i XML-noder (Extensible Markup Language). Fordi HTML kan betragtes som en implementering af XML, XPath kan også finde HTML-elementer. Det er en af de mest effektive lokaliseringsstrategier i Selenium.
- Fordel: Den kan tilgå næsten ethvert element, inklusive dem uden klasse-, navn- eller ID-attributter.
- Ulempe: Det er den mest komplekse lokaliseringsstrategi på grund af dens mange regler og syntaksvariationer.
Moderne browserudviklerværktøjer kan automatisk generere XPath-udtryk. I Chrome, Edge eller Firefoxskal du højreklikke på et element i panelet Elementer og vælge Kopiér > Kopiér XPath. I det følgende eksempel får vi adgang til et billede, der ikke kan findes ved hjælp af de metoder, der er beskrevet tidligere.
Trin 1) Naviger til Mercury Gå til Tours-startsiden, og brug Udviklerværktøjer til at inspicere det orange rektangel til højre for den gule "Links"-boks, som vist nedenfor.
Trin 2) Højreklik på elementets HTML-kode, og vælg derefter indstillingen "Kopier XPath".
Trin 3) In Selenium IDE, skriv et enkelt skråstreg "/" i Target boksen, og indsæt derefter den XPath, der blev kopieret i det forrige trin. Indgangen i Target boksen skal nu begynde med to skråstreger "//".
Trin 4) Klik på knappen Find. Selenium IDE vil fremhæve den orange boks, som vist nedenfor.
Hvorfor det er vigtigt at vælge den rigtige lokator
At vælge den rigtige lokaliseringsstrategi er en af de mest indflydelsesrige beslutninger i Selenium automatisering, fordi det direkte påvirker scriptstabilitet, udførelseshastighed og langsigtede vedligeholdelsesomkostninger. En dårligt valgt locator kan forårsage ustabile tests, falske fejl og hyppig omarbejdning, når applikationens brugergrænseflade ændres. Den foretrukne rækkefølge, der anbefales af erfarne automatiseringsingeniører, er ID først, derefter Navn, efterfulgt af CSS Selector, Linktekst og til sidst XPath.
ID-baserede locators er de hurtigste, fordi browserens opslag er optimeret til unikke identifikatorer. Navnebaserede locators er næsten lige så effektive, når navne er unikke. CSS Selectors og XPath giver fleksibilitet, men har en tendens til at være langsommere og mere skrøbelige, når udviklere omstrukturerer DOM'en. Linktekst er fremragende til navigationslinks, men tilbyder begrænset genbrug.
Stabil automatisering afhænger også af samarbejde med udviklere. Når testere anmoder om konsistente og meningsfulde ID- eller data-*-attributter under kodegennemgange, forbedres locator-holdbarheden betydeligt. Undgå at stole på automatisk genererede ID'er (såsom dem, der produceres af frameworks), da de kan ændre sig mellem builds. Ved at prioritere læsbare, intentionsdrevne locators kan teams holde testsuiter vedligeholdbare og reducere teknisk gæld, efterhånden som applikationen udvikler sig.
De bedste fremgangsmåder til at skrive pålidelige lokaliseringsfindere
Pålidelige lokaliseringssystemer er fundamentet for en vedligeholdelig Selenium testsuite. Følgende fremgangsmåder hjælper med at reducere scriptfejl, forbedre læsbarheden og gøre tests modstandsdygtige over for ændringer i brugergrænsefladen.
- Foretræk unikke ID'er: Tjek altid først efter en ID-attribut. ID'er er beregnet til at være unikke på en side og er det mest effektive valg.
- Brug semantisk navn og data-* attributter: Opfordr udviklere til at tilføje stabile testattributter såsom data-testid eller data-qa. Disse forbliver konsistente, selv når CSS-klasser ændres.
- Undgå absolut XPath: Absolutte stier som /html/body/div[2]/div[3]/span brydes let. Brug relative XPath-udtryk med attributter som //input[@name='userName'].
- Kombinér attributter for præcision: Når en enkelt attribut ikke er unik, skal du kombinere flere attributter (f.eks. //button[@type='submit' og @name='login']) for at målrette det korrekte element.
- Brug teksten klogt: Lokaliseringsværktøjer, der er afhængige af synlig tekst, kan muligvis ikke fungere på tværs af sproglokaliseringer. Brug kun tekstbaserede lokaliseringsværktøjer, når indholdet er stabilt og ensproget.
- Centraliser lokaliseringspunkter: Gem locators i en Page Object Model (POM)-klasse, så opdateringer kan foretages ét sted i stedet for på tværs af mange testscripts.
- Valider i udviklerværktøjer: Før du tilføjer en locator til et script, skal du teste den i browserkonsollen ved hjælp af $x("//xpath") for XPath eller document.querySelector for CSS for at bekræfte, at den returnerer præcis ét element.
- Undgå indeksbaserede lokaliseringspunkter, når det er muligt: Indekspositioner som [3] afhænger af elementernes rækkefølge. Selv mindre layoutændringer kan ændre indekset og ødelægge scriptet.
Ved at anvende disse fremgangsmåder konsekvent kan automationsingeniører skabe testpakker, der skaleres på tværs af teams og overlever hyppige brugergrænsefladeopdateringer med minimal vedligeholdelse.
