Locators in Selenium IDE: CSS Selector - DOM - XPath - ID

Innholdsfortegnelse:

Anonim

Hva er Locators?

Locator er en kommando som forteller Selen IDE hvilke GUI-elementer (for eksempel tekstboks, knapper, avkrysningsruter osv.) Det er behov for å operere på. Identifikasjon av riktige GUI-elementer er en forutsetning for å lage et automatiseringsskript. Men nøyaktig identifisering 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 gir Selen et antall Locators for å finne et GUI-element nøyaktig

De forskjellige typene CSS Locator i Selen IDE

Det er kommandoer som ikke trenger en lokalisering (for eksempel kommandoen "åpen"). Imidlertid trenger de fleste av dem elementlokatorer i Selenium webdriver.

Valget av locator avhenger i stor grad av applikasjonen din under test . I denne opplæringen vil vi veksle mellom Facebook, nye turer. Demoaut på grunnlag av lokatorer som disse applikasjonene støtter. På samme måte i testprosjektet ditt, vil du velge noen av de ovennevnte elementlokatorene i Selenium webdriver, basert på applikasjonsstøtten din.

Finner etter ID

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

Målformat: id = id for elementet

For dette eksemplet vil vi bruke Facebook som vår testapp fordi Mercury Tours ikke bruker ID-attributter.

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

Trinn 2. Start Selen IDE og skriv inn "id = email" i målboksen. Klikk på Finn-knappen og legg merke til at tekstfeltet "E-post eller telefon" blir uthevet med gult og kantet med grønt, noe som betyr at Selen IDE klarte å finne det elementet riktig.

Finner etter navn

Lokaliseringselementer etter navn ligner veldig på lokalisering etter ID, bortsett fra at vi bruker prefikset "name =" i stedet.

Målformat: navn = elementets navn

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

Trinn 1. Naviger til http://demo.guru99.com/test/newtours/ og bruk Firebug for å inspisere tekstboksen "Brukernavn". Legg merke til navnets attributt.

Her ser vi at elementets navn er "brukernavn".

Trinn 2. I Selen IDE skriver du inn "name = userName" i målboksen og klikker på Finn-knappen. Selen IDE skal kunne finne tekstboksen Brukernavn ved å markere den.

Finne etter navn ved hjelp av filtre

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

Target Format : name = name_of_the_element filter = value_of_filter

La oss se et eksempel -

Trinn 1 . Logg deg på Mercury Tours ved å bruke "tutorial" som brukernavn og passord. Det tar deg til Flight Finder-siden vist nedenfor.

Trinn 2. Bruk Firebug og legg merke til at alternativknappene Round Trip og One Way har samme navn "tripType." Imidlertid har de forskjellige VALUE attributter, slik at vi kan bruke hver av dem som vårt filter.

Trinn 3.

  • Vi kommer til å få tilgang til One Way-radioknappen først. Klikk på den første linjen i Editor.
  • I kommandofeltet til Selen IDE skriver du inn kommandoen "klikk".
  • I målboksen skriver du inn "name = tripType value = oneway". Delen "value = oneway" er filteret vårt.

Trinn 4 . Klikk på Finn-knappen og legg merke til at Selen IDE er i stand til å markere One Way-alternativknappen med grønt - noe som betyr at vi har tilgang til elementet med hell ved hjelp av VALUE-attributtet.

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

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

Finne etter lenketekst

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

Target Format : link = LINK_TEXT

I dette eksemplet får vi tilgang til "REGISTER" -linken som finnes på Mercury Tours hjemmeside.

Trinn 1.

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

Trinn 2 .

  • Ved hjelp av Firebug, inspiser "REGISTER" -linken. Koblingsteksten finnes mellom og koder.
  • I dette tilfellet er koblingsteksten vår "REGISTER". Kopier lenketeksten.

Trinn 3 . Kopier lenketeksten i Firebug og lim den inn i Selenium IDEs målboks. Prefiks det med "link =".

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

Trinn 5. For å bekrefte ytterligere, skriv "clickAndWait" i kommandofeltet og kjør det. Selen IDE skal kunne klikke på denne REGISTER-lenken og føre deg til registreringssiden vist nedenfor.

Finner etter CSS Selector

CSS-velgere i selen er strengemønstre som brukes til å identifisere et element basert på en kombinasjon av HTML-tag, id, klasse og attributter. Lokalisering av CSS Selectors i Selen er mer komplisert enn de tidligere metodene, men det er den vanligste lokaliseringsstrategien til avanserte Selenium-brukere, fordi den har tilgang til selv de elementene som ikke har ID eller navn.

CSS Selectors i Selen har mange formater, men vi vil bare fokusere på de vanligste.

  • Merke og ID
  • Merke og klasse
  • Merk og attributt
  • Merk, klasse og attributt
  • Indre tekst

Når du bruker denne strategien, prefikserer vi alltid målboksen med "css =" som vist i de følgende eksemplene.

Finne etter CSS Selector - Tag og ID

Igjen vil vi bruke Facebooks tekstboks på e-post i dette eksemplet. Som du husker har den ID-en "e-post", og vi har allerede fått tilgang til den i delen "Finne etter ID". Denne gangen vil vi bruke en Selenium CSS Selector med ID for å få tilgang til det samme elementet.

Syntaks

Beskrivelse

css = tag # id
  • tag = HTML-koden til elementet du får tilgang til
  • # = hasjetegnet. Dette bør alltid være tilstede når du bruker en Selenium CSS-velger med ID
  • id = IDen til elementet du får tilgang til

Husk at ID-en alltid kommer foran et hash-tegn (#).

Trinn 1. Naviger til www.facebook.com. Bruk Firebug til å undersøke tekstfeltet "E-post eller telefon".

Vær oppmerksom på at HTML-koden er "input" og ID-en er "e-post". Så syntaksen vår vil være "css = input # email".

Trinn 2. Skriv inn "css = input # email" i målboksen på Selen IDE og klikk Finn-knappen. Selen IDE skal kunne fremheve det elementet.

Finne etter CSS Selector - Tag og Class

Å finne etter CSS Selector i Selen ved hjelp av en HTML-tagg og et klassenavn ligner på å bruke en tagg og ID, men i dette tilfellet brukes en prikk (.) I stedet for et hash-tegn.

Syntaks

Beskrivelse

css = tag. klasse
  • tag = HTML-koden til elementet du får tilgang til
  • . = punkttegnet. Dette skal alltid være til stede når du bruker en CSS-velger med klasse
  • klasse = klassen til elementet som nås

Trinn 1. Gå til demosiden http://demo.guru99.com/test/facebook.html og bruk Firebug til å inspisere tekstfeltet "E-post eller telefon". Legg merke til at HTML-koden er "input" og klassen er "inputtext."

Trinn 2. I Selen IDE skriver du inn "css = input.inputtext" i målboksen og klikker Finn. Selen IDE skal kunne gjenkjenne tekstboksen E-post eller telefon.

Vær oppmerksom på at når flere elementer har den samme HTML-koden og navnet, vil bare det første elementet i kildekoden bli gjenkjent . Ved hjelp av Firebug, inspiser passordet tekstboksen på Facebook og legg merke til at den har samme navn som tekstboksen E-post eller telefon.

Årsaken til at bare tekstboksen E-post eller telefon ble markert i forrige illustrasjon er at den kommer først i Facebooks sidekilde.

Finne etter CSS Selector - Tag and Attribute

Denne strategien bruker HTML-koden og en spesifikk attributt for elementet som skal åpnes.

Syntaks

Beskrivelse

css = tag [attributt = verdi]
  • tag = HTML-koden til elementet du får tilgang til
  • [og] = firkantede parenteser der et spesifikt attributt og dets tilsvarende verdi plasseres
  • attributt = attributtet som skal brukes. Det anbefales å bruke et attributt som er unikt for elementet, for eksempel et navn eller ID.
  • verdi = den tilsvarende verdien til det valgte attributtet.

Trinn 1. Naviger til registreringssiden for Mercury Tours (http://demo.guru99.com/test/newtours/register.php) og inspiser tekstfeltet "Etternavn". Legg merke til HTML-koden ("input" i dette tilfellet) og navnet ("lastName").

Trinn 2. I Selen IDE skriver du inn "css = input [name = lastName]" i målboksen og klikker Finn. Selen IDE skal kunne få tilgang til etternavn-boksen.

Når flere elementer har samme HTML-kode og attributt, blir bare den første gjenkjent . Denne oppførselen ligner på å finne elementer ved hjelp av CSS-velgere med samme tag og klasse.

Finne etter CSS Selector - tag, klasse og attributt

Syntaks Beskrivelse
css = tag.class [attributt = verdi]
  • tag = HTML-koden til elementet du får tilgang til
  • . = punkttegnet. Dette skal alltid være til stede når du bruker en CSS-velger med klasse
  • klasse = klassen til elementet som nås
  • [og] = firkantede parenteser der et spesifikt attributt og dets tilsvarende verdi plasseres
  • attributt = attributtet som skal brukes. Det anbefales å bruke et attributt som er unikt for elementet, for eksempel et navn eller ID.
  • verdi = den tilsvarende verdien til det valgte attributtet.

Trinn 1. Gå til demosiden http://demo.guru99.com/test/facebook.html og bruk Firebug til å inspisere inntaksboksen 'E-post eller telefon' og 'Passord'. Legg merke til HTML-koden, klassen og attributtene. For dette eksemplet velger vi deres 'tabindex' attributter.

Trinn 2. Vi får først tilgang til tekstfeltet "E-post eller telefon". Dermed vil vi bruke en tabindeksverdi på 1. Skriv inn "css = input.inputtext [tabindex = 1]" i Selenium IDEs Mål-boks og klikk Finn. Inntastingsboksen 'E-post eller telefon' skal være uthevet.

Trinn 3. For å få tilgang til inntastingsboksen for passord, er det bare å erstatte verdien på tabindex-attributtet. Skriv inn "css = input.inputtext [tabindex = 2]" i målboksen og klikk på Finn-knappen. Selen IDE må kunne identifisere passordet tekstboksen.

Finne etter CSS Selector - indre tekst

Som du kanskje har lagt merke til, får HTML-etiketter sjelden id-, navn- eller klasseattributter. Så hvordan får vi tilgang til dem? Svaret er gjennom bruk av deres indre tekster. Indre tekster er de faktiske strengemønstrene som HTML-etiketten viser på siden.

Syntaks

Beskrivelse

css = tag: inneholder ("indre tekst")
  • tag = HTML-koden til elementet du får tilgang til
  • indre tekst = elementets indre tekst

Trinn 1. Naviger til Mercury Tours hjemmeside (http://demo.guru99.com/test/newtours/) og bruk Firebug for å undersøke "Passord" -etiketten. Legg merke til HTML-koden (som i dette tilfellet er "font") og legg merke til at den ikke har noen klasse-, id- eller navnegenskaper.

Trinn 2. Skriv css = font: inneholder ("Passord:") i Selenium IDEs målboks og klikk Finn. Selen IDE skal kunne få tilgang til passordetiketten som vist på bildet nedenfor.

Trinn 3. Denne gangen erstatter du den indre teksten med "Boston" slik at målet ditt nå blir "css = font: inneholder (" Boston ")". Klikk Finn. Du bør merke at etiketten "Boston til San Francisco" blir uthevet. Dette viser deg at Selen IDE har tilgang til en lang etikett, selv om du nettopp har angitt det første ordet i den indre teksten.

Finne etter DOM (Document Object Model)

Document Object Model (DOM), i enkle termer, er måten HTML-elementer er strukturert på. Selen IDE er i stand til å bruke DOM til å få tilgang til sideelementer. Hvis vi bruker denne metoden, vil målboksen alltid begynne med "dom = dokument ..."; imidlertid blir prefikset "dom =" vanligvis fjernet fordi Selen IDE automatisk er i stand til å tolke alt som starter med nøkkelordet "dokument" for å være en bane i DOM i Selen uansett.

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

  • getElementById
  • getElementsByName
  • dom: name (gjelder bare elementer i et navngitt skjema)
  • dom: indeks

Finne etter DOM - getElementById

La oss fokusere på den første metoden - ved hjelp av getElementById-metoden til DOM i selen. Syntaksen vil være:

Syntaks

Beskrivelse

document.getElementById ("elementets id")

elementets id = dette er verdien av ID-attributtet til elementet som skal åpnes. Denne verdien skal alltid inngå i et par parenteser ("").

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

Vi kan se at ID-en vi skal bruke er "persist_box".

Trinn 2. Åpne Selen IDE og skriv inn "document.getElementById (" persist_box ") i målboksen" og klikk Finn. Selen IDE skal kunne finne avmerkingsboksen "Hold meg logget på". Selv om det ikke kan markere det indre av avmerkingsboksen, kan Selen IDE fortsatt omringe elementet med en lysegrønn kant som vist nedenfor.

Finne etter DOM - getElementsByName

GetElementById-metoden har tilgang til bare ett element om gangen, og det er elementet med ID-en som 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 hjelp av en indeks som starter ved 0.

getElementById

  • Det får bare ett element for deg.
  • Det elementet bærer ID-en som du spesifiserte i parentesene til getElementById ().

getElementsByName

  • Det vil få en samling av elementer som har samme navn.
  • Hvert element indekseres med et tall som starter fra 0, akkurat som en matrise
  • Du spesifiserer hvilket element du vil ha tilgang ved å sette indeksnummeret i firkantede parenteser i getElementsByNames syntaks nedenfor.

Syntaks

Beskrivelse

document.getElementsByName ("navn") [indeks]
  • name = navnet på elementet som definert av navnet 'attributt'
  • index = et heltall som indikerer hvilket element i getElementsByName-matrisen som skal brukes.

Trinn 1. Naviger til Mercury Tours hjemmeside og logg inn med "tutorial" som brukernavn og passord. Firefox bør ta deg til Flight Finder-skjermen.

Trinn 2. Inspiser de tre alternativknappene nederst på siden ved hjelp av Firebug (økonomiklasse, Business class og First class radioknapper). Legg merke til at de alle har samme navn som er "servClass".

Trinn 3. La oss først gå til alternativknappen "Economy class". Av alle disse tre alternativknappene kommer dette elementet først, så det har en indeks på 0. Skriv inn "document.getElementsByName (" servClass ") [0]" i Selen IDE og klikk på Finn-knappen. Selen IDE skal kunne identifisere alternativknappen Economy class riktig.

Trinn 4. Endre indeksnummeret til 1 slik at målet ditt nå blir document.getElementsByName ("servClass") [1]. Klikk på Finn-knappen, og Selen IDE skal kunne markere alternativknappen "Business class", som vist nedenfor.

Finne 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.

Syntaks

Beskrivelse

document.forms ["navnet på skjemaet"] .elements ["elementets navn"]
  • skjemaets navn = verdien av navnet attributtet til skjemaet som inneholder elementet du vil ha tilgang til
  • elementets navn = verdien av navnet attributtet til elementet du ønsker tilgang til

Trinn 1. Naviger til Mercury Tours hjemmeside (http://demo.guru99.com/test/newtours/) og bruk Firebug til å inspisere tekstboksen Brukernavn. Legg merke til at den er inneholdt i et skjema som heter "hjem".

Trinn 2. Skriv inn "document.forms [" home "]. Elements [" userName "]" i Selen IDE, og klikk på Finn-knappen. Selen IDE må kunne få tilgang til elementet.

Finner etter DOM - dom: indeks

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

Syntaks

Beskrivelse

document.forms [index of the form] .elements [index of the element]
  • indeks for skjemaet = indeksnummeret (starter ved 0) av skjemaet i forhold til hele siden
  • indeks av elementet = indeksnummeret (starter ved 0) av elementet i forhold til hele formen som inneholder det

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

Trinn 1. Gå til registreringssiden for Merkur-turer og inspiser tekstboksen Telefon. Legg merke til at skjemaet som inneholder den ikke har ID- og navnegenskaper.

Trinn 2. Skriv inn "document.forms [0] .elements [3]" i Selenium IDEs målboks og klikk Finn-knappen. Selen IDE skal kunne få tilgang til tekstboksen Telefon riktig.

Trinn 3. Alternativt kan du bruke elementets navn i stedet for indeksen og oppnå det samme resultatet. Skriv inn "document.forms [0] .elements [" phone "]" i Selenium IDEs målboks. Tekstboksen Telefon skal fremdeles bli uthevet.

Finner ved XPath

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

Fordel: Den har tilgang til nesten ethvert element, til og med 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 locators. I det følgende eksemplet 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. I Selen IDE skriver du inn en skråstrek fremover "/" i Mål-boksen, og lim deretter inn XPath som vi kopierte i forrige trinn. Oppføringen i målboksen din skal nå begynne med to skråstreker "//".

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

Sammendrag

Syntaks for Locator-bruk

Metode

Målsyntaks

Eksempel
Etter ID id = id_of_elementet id = e-post
Ved navn navn = navn_av_elementet navn = brukernavn
Etter navn ved hjelp av filtre name = name_of_element filter = value_of_filter navn = tripType-verdi = motorvei
Av lenketekst link = link_text lenke = REGISTRER
Merke og ID css = tag # id css = input # e-post
Merkelapp og klasse css = tag. klasse css = input.inputtext
Merk og attributt css = tag [attributt = verdi] css = input [navn = etternavn]
Merke, klasse og attributt css = tag. klasse [attributt = verdi] css = input.inputtext [tabindex = 1]