Lokatorer i Selenium

Hva er lokatorer?

Locator er en kommando som forteller Selenium IDE hvilke GUI-elementer (si tekst Box, Knapper, Sjekk Boxes etc) dens behov for å operere. Identifikasjon av korrekte GUI-elementer er en forutsetning for å lage et automatiseringsskript. Men nøyaktig identifikasjon av GUI-elementer er vanskeligere enn det høres ut. Noen ganger ender du opp med å jobbe med feil GUI-elementer eller ingen elementer i det hele tatt! Derfor, Selenium gir et antall søkere for å nøyaktig lokalisere et GUI-element

Det er kommandoer som ikke trenger en lokalisator (som "åpne"-kommandoen). De fleste av dem trenger imidlertid elementsøkere i Selenium webdriver.

Valget av lokalisator avhenger i stor grad av søknaden din under test. I denne opplæringen vil vi veksle mellom Facebook, nye tours.demoaut på grunnlag av lokatorer som disse applikasjonene støtter. Likeså i din Testing prosjekt, vil du velge hvilken som helst av elementlokalisatorene ovenfor i Selenium webdriver, basert på applikasjonsstøtten din.

Lokalisering etter ID

Dette er den vanligste måten å lokalisere elementer siden ID-er skal være unike for hvert element.

Target Format: id=id for elementet

For dette eksempelet vil vi bruke Facebook som vår testapp pga Mercury Turer bruker ikke ID-attributter.

Trinn 1) Siden denne opplæringen ble opprettet, har Facebook endret design på påloggingssiden. Bruk denne demosiden https://demo.guru99.com/test/facebook.html for testing. Inspiser tekstboksen "E-post eller telefon" ved hjelp av Firebug og legg merke til ID-en. I dette tilfellet er IDen "e-post".

Trinn 2) Start Selenium IDE og skriv inn "id=email" i Target eske. Klikk på Finn-knappen og legg merke til at tekstboksen "E-post eller telefon" blir uthevet med gult og kantet med grønt, som betyr, Selenium IDE var i stand til å finne det elementet riktig.

Finner etter navn

Å lokalisere elementer etter navn er veldig likt å lokalisere etter ID, bortsett fra at vi bruker "navn =" prefiks i stedet.

Target Format: navn=navn på elementet

I den følgende demonstrasjonen skal vi nå bruke Mercury Turer fordi alle viktige elementer har navn.

Trinn 1) naviger til https://demo.guru99.com/test/newtours/ og bruk Firebug for å inspisere "Brukernavn"-tekstboksen. Legg merke til navnattributtet.

Her ser vi at elementets navn er "brukernavn".

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

Hvordan finne element etter navn ved hjelp av filtre

Filtre kan brukes når flere elementer har samme navn. Filtre er tilleggsattributter som brukes til å skille elementer med samme navn.

Target dannet: navn=navn_på_elementet filter=verdi_av_filter

La oss se et eksempel –

Trinn 1) Logg inn på Mercury Turer.

Logg inn på Mercury Turer med "tutorial" som brukernavn og passord. Den skal ta deg til Flight Finder-siden vist nedenfor.

Trinn 2) Bruk VALUE attributter ved å bruke firebug.

Ved å bruke Firebug, legg merke til at Round Trip og One Way-radioknappene har samme navn "tripType." De har imidlertid forskjellige VALUE-attributter, slik at vi kan bruke hver av dem som vårt filter.

Trinn 3) Klikk på den første linjen.

• Vi skal først få tilgang til One Way-radioknappen. Klikk på den første linjen i redigeringsprogrammet.
• I kommandoboksen til Selenium IDE, skriv inn kommandoen "klikk".
• på Target boksen, skriv inn "name=tripType value=oneway". "verdi=enveis"-delen er filteret vårt.

Trinn 4) Klikk på Finn-knappen.

Legg merke til det Selenium IDE er i stand til å markere One Way-radioknappen med grønt - noe som betyr at vi kan få tilgang til elementet ved å bruke VALUE-attributtet.

Trinn 5) Velg One Way alternativknapp.

Trykk på "X"-tasten på tastaturet for å utføre denne klikkkommandoen. Legg merke til at alternativknappen One Way ble valgt.

Du kan gjøre nøyaktig det samme med Round Trip-radioknappen, denne gangen, ved å bruke "name=tripType value=roundtrip" som mål.

Lokalisering etter lenketekst

Denne typen CSS-lokaliser i Selenium gjelder kun hyperkoblingstekster. Vi får tilgang til koblingen ved å prefiksere målet vårt med "link=" og deretter etterfulgt av hyperkoblingsteksten.

Target dannet: link=link_tekst

I dette eksemplet skal vi få tilgang til "REGISTER"-lenken som finnes på Mercury Turens hjemmeside.

Trinn 1)

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

Trinn 2)

• Bruk Firebug, inspiser "REGISTER"-lenken. Linkteksten finnes mellom og tags.
• I dette tilfellet er lenketeksten vår "REGISTER". Kopier lenketeksten.

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

Trinn 4) Klikk på Finn-knappen og legg merke til det Selenium IDE var i stand til å markere REGISTER-lenken riktig.

Trinn 5) For å bekrefte ytterligere, skriv inn "clickAndWait" i kommandoboksen og utfør den. Selenium IDE skal være i stand til å klikke på REGISTER-lenken og ta deg til registreringssiden vist nedenfor.

Lokalisering etter DOM (Document Object Model)

Ocuco Dokumentobjektmodell (DOM), enkelt sagt, er måten HTML-elementer er strukturert på. Selenium IDE er i stand til å bruke DOM for å få tilgang til sideelementer. Hvis vi bruker denne metoden, vil vår Target boksen vil alltid starte med "dom=dokument..."; men prefikset "dom =" fjernes vanligvis fordi Selenium IDE er i stand til automatisk å tolke alt som starter med nøkkelordet "dokument" til å være en bane i DOM-en Selenium uansett.

Det er fire grunnleggende måter å finne et element gjennom DOM i Selenium:

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

Lokalisering etter DOM – getElementById

La oss fokusere på den første metoden – ved å bruke getElementById-metoden til DOM i Selenium. Syntaksen vil være:

syntax

document.getElementById("id of the element")

• id for elementet = dette er verdien til ID-attributtet til elementet som skal åpnes. Denne verdien skal alltid være omsluttet av et par parenteser ("").

Trinn 1) Bruk denne demosiden https://demo.guru99.com/test/facebook.html Naviger til den og bruk Firebug for å inspisere avmerkingsboksen "Hold meg pålogget". Legg merke til ID-en.

Vi kan se at IDen vi bør bruke er "persist_box".

Trinn 2) Open Selenium IDE og i Target boksen, skriv inn "document.getElementById("persist_box")" og klikk Finn. Selenium IDE skal kunne finne avmerkingsboksen "Hold meg pålogget". Selv om det ikke kan fremheve det indre av avmerkingsboksen, Selenium IDE kan fortsatt omgi elementet med en lys grønn kant som vist nedenfor.

Finner etter DOM – getElementsByName

GetElementById-metoden kan bare få tilgang til ett element om gangen, og det er elementet med ID-en du spesifiserte. GetElementsByName-metoden er annerledes. Den samler en rekke elementer som har navnet du spesifiserte. Du får tilgang til de enkelte elementene ved å bruke en indeks som starter på 0.

	getElementById Den får bare ett element for deg. Dette elementet har ID-en du spesifiserte innenfor parentesen til getElementById().
	getElementsByName Den vil få en samling av elementer hvis navn er de samme. Hvert element er indeksert med et tall som starter fra 0, akkurat som en matrise Du spesifiserer hvilket element du ønsker å få tilgang til ved å sette dets indeksnummer i hakeparentesene i getElementsByName sin syntaks 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 Tours' hjemmeside og logg inn med "tutorial" som brukernavn og passord. Firefox skal ta deg til Flight Finder-skjermen.

Trinn 2) Bruk Firebug, inspiser de tre radioknappene nederst på siden (Economy class, Business class og First class radioknapper). Legg merke til at de alle har samme navn som er "servClass".

Trinn 3) La oss først få tilgang til alternativknappen "Økonomiklasse". Av alle disse tre alternativknappene kommer dette elementet først, så det har en indeks på 0. In Selenium IDE, skriv "document.getElementsByName("servClass")[0]" og klikk på Finn-knappen. Selenium IDE skal kunne identifisere alternativknappen for økonomiklasse på riktig måte.

Trinn 4) Endre indeksnummeret til 1 slik at din Target vil nå bli document.getElementsByName(“servClass”)[1]. Klikk på Finn-knappen, og Selenium IDE skal kunne markere alternativknappen "Business class", som vist nedenfor.

Finner etter DOM – dom:navn

Som nevnt tidligere, vil denne metoden bare gjelde hvis elementet du får tilgang til er inneholdt i et navngitt skjema.

syntax

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

• navn på skjemaet = verdien av navneattributtet til skjemakoden som inneholder elementet du vil ha 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 Firebug for å inspisere tekstboksen Brukernavn. Legg merke til at den er inneholdt i en form kalt "hjem".

Trinn 2) In Selenium IDE, skriv “document.forms[“home”].elements[“brukernavn”]” og klikk på Finn-knappen. Selenium IDE må kunne få tilgang til elementet.

Finner etter DOM – dom:index

Denne metoden gjelder selv når elementet ikke er i et navngitt skjema fordi det bruker skjemaets indeks og ikke navnet.

syntax

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

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

Vi får tilgang til "Telefon"-tekstboksen innenfor Mercury Registreringsside for turer. Skjemaet på den siden har ikke noe navn og ID-attributt, så dette vil være et godt eksempel.

Trinn 1) naviger til Mercury Registreringsside for turer og inspiser telefontekstboksen. Legg merke til at skjemaet som inneholder det ikke har noen ID- og navneattributter.

Trinn 2) Skriv inn "document.forms[0].elements[3]" i Selenium IDE-er Target og klikk på Finn-knappen. Selenium IDE skal kunne få riktig tilgang til telefontekstboksen.

Trinn 3) Alternativt kan du bruke elementets navn i stedet for indeksen og få samme resultat. Skriv inn "document.forms[0].elements["phone"]" i Selenium IDE-er Target eske. Telefontekstboksen skal fortsatt være uthevet.

Finner av XPath

XPath er språket som brukes når du lokaliserer XML-noder (Extensible Markup Language). Siden HTML kan tenkes på som en implementering av XML, kan vi også bruke XPath ved å finne HTML-elementer.

• Fordel: Den kan få tilgang til nesten alle elementer, også de uten klasse, navn eller id-attributter.
• Ulempe: Det er den mest kompliserte metoden for å identifisere elementer på grunn av for mange forskjellige regler og hensyn.

Heldigvis kan Firebug automatisk generere XPath Selenium lokalisatorer. I følgende eksempel vil vi få tilgang til et bilde som umulig kan nås gjennom metodene vi diskuterte tidligere.

Trinn 1) naviger til Mercury Tours hjemmeside og bruk Firebug for å inspisere det oransje rektangelet til høyre for den gule "Links"-boksen. Se bildet nedenfor.

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

Trinn 3) In Selenium IDE, skriv inn en skråstrek "/" i Target boksen og lim inn XPath som vi kopierte i forrige trinn. Oppføringen i din Target boksen skal nå begynne med to skråstreker "//".

Trinn 4) Klikk på Finn-knappen. Selenium IDE skal kunne markere den oransje boksen som vist nedenfor.