Lokatorer i Selenium

Hva er lokaliseringsverktøy i Selenium?

En lokator er en kommando som dirigerer Selenium IDE eller Selenium WebDriver til riktig GUI-element, for eksempel en tekstboks, knapp, lenke eller avmerkingsboks, der en handling må utføres. Å identifisere riktig GUI-element er en forutsetning for å bygge et pålitelig automatiseringsskript. Nøyaktig identifisering er imidlertid mer utfordrende enn det høres ut. Noen ganger kan du ende opp med å samhandle med feil element, eller uten noe element i det hele tatt. For å løse dette, Selenium tilbyr en rekke lokaliseringsstrategier som tillater presis målretting av GUI-elementer.

Selv om noen kommandoer, som for eksempel «åpne»-kommandoen, ikke krever en posisjoneringsfunksjon, er de fleste av Selenium Kommandoer avhenger av elementlokaliseringsverktøy. Valget av lokator avhenger i stor grad av applikasjonen under test (AUT). I denne veiledningen vil vi veksle mellom Facebook og Mercury Demonettstedet for Tours (newtours.demoaut), basert på hvilke lokatorer hver applikasjon støtter. På samme måte, i ditt eget testing prosjektet, vil du velge en elementsøker i Selenium WebDriver basert på strukturen til applikasjonen din.

Lokalisering etter ID

Dette er den vanligste metoden for å finne elementer fordi ID-er er ment å være unike for hvert element på en side. Når et ID-attributt finnes, bør det være ditt førstevalg for raske, stabile og lesbare testskript.

Target Format: id=id for elementet

I dette eksemplet bruker vi en Facebook-demoside fordi Mercury Tours bruker ikke ID-attributter for hovedskjemafeltene.

Trinn 1) Bruk denne demosiden https://demo.guru99.com/test/facebook.html for testing. Undersøk tekstboksen «E-post eller telefon» ved hjelp av nettleserens innebygde utviklerverktøy (trykk F12 i Chrome, Edge eller Firefox) og noter ID-en. I dette tilfellet er ID-en «e-post».

Trinn 2) Start Selenium IDE og skriv inn "id=email" i Target boksen. Klikk på Søk-knappen, og legg merke til at tekstboksen «E-post eller telefon» er uthevet i gult med en grønn kant, noe som indikerer at Selenium IDE har funnet elementet riktig.

Finner etter navn

Å finne elementer etter navn er likt å finne etter ID, bortsett fra at vi bruker "navn =" prefiks i stedet. Denne tilnærmingen er nyttig når elementer mangler en ID, men har et definert navneattributt.

Target Format: navn=navn på elementet

For den følgende demonstrasjonen skal vi bruke Mercury Omvisninger fordi alle viktige formelementer på nettstedet har et navneattributt.

Trinn 1) naviger til https://demo.guru99.com/test/newtours/ og bruk nettleserens utviklerverktøy til å inspisere tekstboksen «Brukernavn». Legg merke til navneattributtet.

Her er elementets navn «brukernavn».

Trinn 2) In Selenium IDE, skriv inn "navn=brukernavn" i Target og klikk på Finn-knappen. Selenium IDE bør finne tekstboksen Brukernavn ved å markere den.

Hvordan finne element etter navn ved hjelp av filtre

Filtre er nyttige når flere elementer deler samme navneattributt. Filtre er tilleggsattributter som brukes til å skille mellom elementer som deler samme navn. Uten filtre, Selenium ville som standard kun bruke det første samsvarende elementet.

Target Format: navn=navn_på_elementet filter=verdi_av_filter

La oss gå gjennom et eksempel.

Trinn 1) Logg inn på Mercury Turer.

Logg inn på Mercury Turer som bruker «veiledning» som både brukernavn og passord. Siden Flysøk skal vises, som vist nedenfor.

Trinn 2) Bruk utviklerverktøy til å inspisere VALUE-attributtene.

Legg merke til at alternativknappene for tur/retur og enveisreise deler samme navn, «tripType». De har imidlertid forskjellige VALUE-attributter, så vi kan bruke hver verdi som et filter.

Trinn 3) Klikk på den første raden i redigeringsprogrammet.

• Vi skal først åpne Enveis-radioknappen. Klikk på den første linjen i Selenium IDE-editor.
• I kommandoboksen skriver du inn kommandoen «klikk».
• på Target I boksen skriver du inn «navn=reisetype verdi=enveis». Delen «verdi=enveis» fungerer som filter.

Trinn 4) Klikk på Finn-knappen.

Legg merke til det Selenium IDE uthever alternativknappen Enveis i grønt, som bekrefter at elementet har blitt åpnet via VALUE-attributtet.

Trinn 5) Velg Enveiskjørt-radioknappen.

Trykk på «X»-tasten på tastaturet for å utføre klikkkommandoen. Radioknappen Enveis er nå valgt.

Du kan utføre den samme handlingen på alternativknappen Rundtur, denne gangen med «navn=turtype verdi=runttur» som mål.

Lokalisering etter lenketekst

Denne lokaliseringsstrategien gjelder kun for hyperkoblingstekster. Vi får tilgang til lenken ved å sette prefikset «link=" etterfulgt av den synlige hyperkoblingsteksten foran målet. Denne metoden er lettlest og fungerer bra for navigasjonstesting.

Target Format: link=link_tekst

I det følgende eksemplet skal vi bruke «REGISTRER»-lenken som finnes på Mercury Turens hjemmeside.

Trinn 1)

• Først må du sørge for at du er logget ut av Mercury Turer.
• Naviger til Mercury Turens hjemmeside.

Trinn 2)

• Bruk utviklerverktøyene til å inspisere «REGISTRER»-lenken. Lenketeksten vises mellom den første og den avsluttende ankertaggen.
• I dette tilfellet er lenketeksten «REGISTRER». Kopier lenketeksten.

Trinn 3) Kopier lenketeksten og lim den inn i Selenium IDE Target eske. Prefiks det med "link =".

Trinn 4) Klikk på Finn-knappen. Selenium IDE vil utheve REGISTER-lenken riktig.

Trinn 5) For å bekrefte ytterligere, skriv inn "clickAndWait" i kommandoboksen og utfør den. Selenium IDE vil klikke på REGISTRER-lenken og ta deg til registreringssiden som vises nedenfor.

Lokalisering etter DOM (Document Object Model)

Ocuco Dokumentobjektmodell (DOM)beskriver enkelt sagt hvordan HTML-elementer er strukturert som et tre av noder. Selenium IDE kan navigere i dette treet for å få tilgang til sideelementer. Når du bruker denne metoden, Target Boksen begynner alltid med «dom=dokument…». Prefikset «dom=» utelates vanligvis fordi Selenium IDE tolker automatisk enhver verdi som begynner med «dokument» som en DOM-sti.

Det finnes fire grunnleggende måter å finne et element gjennom DOM-en på. Selenium:

• getElementById
• getElementsByName
• dom:navn (gjelder bare for elementer i en navngitt form)
• dom:indeks

Lokalisering etter DOM – getElementById

La oss først utforske getElementById-metoden til DOM-en i SeleniumDenne metoden returnerer et enkelt element ved å matche ID-attributtet.

syntax

document.getElementById("id of the element")

• Elementets id = verdien til ID-attributtet til elementet som skal åpnes. Denne verdien må alltid omsluttes av et par anførselstegn.

Trinn 1) Bruk denne demosiden https://demo.guru99.com/test/facebook.htmlNaviger til den og bruk utviklerverktøyene til å sjekke avmerkingsboksen «Hold meg pålogget». Noter ID-en.

ID-en vi skal bruke er «persist_box».

Trinn 2) Open Selenium IDE og i Target I boksen skriver du inn document.getElementById(“persist_box”), og klikker deretter på Søk. Selenium IDE vil finne avmerkingsboksen «Hold meg pålogget». Selv om den ikke kan markere innsiden av avmerkingsboksen, omgir den elementet med en lys grønn kant, som vist nedenfor.

Finner etter DOM – getElementsByName

getElementById-metoden åpner bare ett element om gangen, nemlig elementet med den angitte ID-en. getElementsByName-metoden oppfører seg annerledes. Den returnerer en matrise med elementer som deler det angitte navnet. Individuelle elementer åpnes ved hjelp av en numerisk indeks som starter på 0.

	getElementById Den returnerer bare ett element. Elementet har ID-en som er spesifisert i parentesene til getElementById().
	getElementsByName Den returnerer en samling av elementer med identiske navn. Hvert element er indeksert av et tall som starter fra 0, som en matrise. Du velger et bestemt element ved å plassere indeksen i hakeparentesene i syntaksen nedenfor.

syntax

document.getElementsByName("name")[index]

• navn = navnet på elementet som definert av dets 'navn'-attributt
• index = et heltall som indikerer hvilket element i getElementsByNames array som skal brukes.

Trinn 1) Naviger til Mercury Turenes hjemmeside og logg inn med «tutorial» som brukernavn og passord. Nettleseren vil laste inn Flight Finder-skjermen.

Trinn 2) Bruk utviklerverktøyene til å se på de tre alternativknappene nederst på siden (økonomiklasse, forretningsklasse og første klasse). Legg merke til at de alle deler samme navn, «servClass».

Trinn 3) La oss først åpne alternativknappen «Økonomiklasse». Av de tre alternativknappene vises dette elementet først, så indeksen er 0. I Selenium IDE, skriv inn document.getElementsByName(“servClass”)[0] og klikk på Søk-knappen. Selenium IDE vil identifisere alternativknappen for økonomiklasse riktig.

Trinn 4) Endre indeksnummeret til 1, slik at Target blir document.getElementsByName(“servClass”)[1]. Klikk på Søk-knappen, og Selenium IDE vil utheve alternativknappen «Business class» som vist nedenfor.

Finner etter DOM – dom:navn

Som nevnt tidligere, gjelder denne metoden bare hvis elementet du åpner finnes i et navngitt skjema. Lokaliseringsbanen begynner ved skjemaet og driller deretter ned til målelementet etter navn.

syntax

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

• navn på skjemaet = verdien av navneattributtet til skjemataggen som inneholder elementet du ønsker å få tilgang til
• navnet på elementet = verdien av navneattributtet til elementet du ønsker tilgang til

Trinn 1) naviger til Mercury Turens hjemmeside https://demo.guru99.com/test/newtours/ og bruk utviklerverktøy til å inspisere tekstboksen Brukernavn. Legg merke til at den finnes i et skjema som heter «hjem».

Trinn 2) In Selenium IDE, skriv inn document.forms[“home”].elements[“userName”] og klikk på Søk-knappen. Selenium IDE vil få tilgang til elementet.

Finner etter DOM – dom:index

Denne metoden gjelder selv når elementet ikke er innenfor et navngitt skjema, fordi den bruker skjemaets indeks i stedet for navnet. Dette er nyttig for eldre sider eller automatisk genererte skjemaer der navngiving ikke er tilgjengelig.

syntax

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

• skjemaets indeks = skjemaets indeksnummer (starter på 0) i forhold til hele siden
• indeksen til elementet = indeksnummeret (starter på 0) til elementet i forhold til formen som inneholder det

Vi får tilgang til tekstboksen «Telefon» på Mercury Registreringsside for turer. Skjemaet på denne siden har verken et navn eller et ID-attributt, så det er et godt eksempel.

Trinn 1) Naviger til Mercury Registreringssiden for turer og sjekk tekstboksen Telefon. Legg merke til at det omkringliggende skjemaet verken har ID- eller navneattributter.

Trinn 2) Skriv inn document.forms[0].elements[3] i Selenium IDE Target og klikk på Finn-knappen. Selenium IDE vil få tilgang til tekstboksen Telefon på riktig måte.

Trinn 3) Alternativt kan du bruke elementets navn i stedet for indeksen for samme resultat. Skriv inn document.forms[0].elements[“telefon”] i Target boksen. Tekstboksen Telefon vil fortsatt være uthevet.

Finner av XPath

XPath er spørrespråket som brukes til å navigere i XML-noder (Extensible Markup Language). Fordi HTML kan betraktes som en implementering av XML, XPath kan også finne HTML-elementer. Det er en av de kraftigste lokaliseringsstrategiene i Selenium.

• Fordel: Den har tilgang til nesten alle elementer, inkludert de uten klasse-, navn- eller ID-attributter.
• Ulempe: Det er den mest komplekse lokaliseringsstrategien på grunn av dens mange regler og syntaksvariasjoner.

Moderne nettleserutviklerverktøy kan generere XPath-uttrykk automatisk. I Chrome, Edge eller FirefoxHøyreklikk på et element i Element-panelet og velg Kopier > Kopier XPath. I følgende eksempel skal vi få tilgang til et bilde som ikke kan finnes ved hjelp av metodene som er omtalt tidligere.

Trinn 1) Naviger til Mercury Gå til hjemmesiden for Tours og bruk utviklerverktøy til å inspisere det oransje rektangelet til høyre for den gule «Lenker»-boksen, som vist nedenfor.

Trinn 2) Høyreklikk på elementets HTML-kode, og velg deretter alternativet «Kopier XPath».

Trinn 3) In Selenium IDE, skriv inn en enkel skråstrek «/» i Target boksen, og lim deretter inn XPath-koden som ble kopiert i forrige trinn. Innføringen i Target boksen skal nå begynne med to skråstreker "//".

Trinn 4) Klikk på Finn-knappen. Selenium IDE vil utheve den oransje boksen, som vist nedenfor.

Hvorfor det er viktig å velge riktig lokator

Å velge riktig lokaliseringsstrategi er en av de mest innflytelsesrike beslutningene i Selenium automatisering fordi det direkte påvirker skriptstabilitet, utførelseshastighet og langsiktige vedlikeholdskostnader. En dårlig valgt lokator kan forårsake ustabile tester, falske feil og hyppig omarbeiding når applikasjonens brukergrensesnitt endres. Rekkefølgen som anbefales av erfarne automatiseringsingeniører er ID først, deretter Navn, etterfulgt av CSS-velger, Lenketekst og til slutt XPath.

ID-baserte søknader er de raskeste fordi nettleserens oppslag er optimalisert for unike identifikatorer. Navnebaserte søknader er nesten like effektive når navn er unike. CSS-selektorer og XPath gir fleksibilitet, men har en tendens til å være tregere og mer skjøre når utviklere omstrukturerer DOM-en. Lenketekst er utmerket for navigasjonslenker, men tilbyr begrenset gjenbruk.

Stabil automatisering er også avhengig av samarbeid med utviklere. Når testere ber om konsistente og meningsfulle ID-er eller data-*-attributter under kodegjennomganger, forbedres holdbarheten til locatorer betydelig. Unngå å stole på automatisk genererte ID-er (som de som produseres av rammeverk) fordi de kan endres mellom bygg. Ved å prioritere lesbare, intensjonsdrevne locatorer kan team holde testsuiter vedlikeholdbare og redusere teknisk gjeld etter hvert som applikasjonen utvikler seg.

Beste praksis for å skrive pålitelige lokaliseringsverktøy

Pålitelige lokaliseringsinstrumenter er grunnlaget for en vedlikeholdbar Selenium testpakke. Følgende fremgangsmåter bidrar til å redusere skriptfeil, forbedre lesbarheten og gjøre tester motstandsdyktige mot endringer i brukergrensesnittet.

1. Foretrekk unike ID-er: Sjekk alltid etter et ID-attributt først. ID-er er ment å være unike innenfor en side og er det mest effektive valget.
2. Bruk semantisk navn og data-* attributter: Oppfordre utviklere til å legge til stabile testattributter som data-testid eller data-qa. Disse forblir konsistente selv når CSS-klasser endres.
3. Unngå absolutt XPath: Absolutte stier som /html/body/div[2]/div[3]/span brytes lett. Bruk relative XPath-uttrykk med attributter som //input[@name='userName'].
4. Kombiner attributter for presisjon: Når et enkelt attributt ikke er unikt, kombinerer du flere attributter (for eksempel //button[@type='submit' og @name='login']) for å målrette mot riktig element.
5. Bruk teksten klokt: Lokaliseringsverktøy som er avhengige av synlig tekst kan brytes på tvers av språklokaliseringer. Bruk tekstbaserte lokaliseringsverktøy bare når innholdet er stabilt og enspråklig.
6. Sentraliser lokatorer: Lagre lokatorer i en POM-klasse (Page Object Model), slik at oppdateringer kan gjøres på ett sted i stedet for på tvers av mange testskript.
7. Valider i utviklerverktøy: Før du legger til en locator i et skript, test den i nettleserkonsollen ved å bruke $x(“//xpath”) for XPath eller document.querySelector for CSS for å bekrefte at den returnerer nøyaktig ett element.
8. Unngå indeksbaserte lokatorer når det er mulig: Indeksposisjoner som [3] avhenger av elementrekkefølgen. Selv små endringer i layouten kan forskyve indeksen og ødelegge skriptet.

Ved å bruke disse fremgangsmåtene konsekvent, lager automatiseringsingeniører testpakker som skaleres på tvers av team og overlever hyppige UI-oppdateringer med minimalt vedlikehold.

Spørsmål og svar