Locators i Selen IDE: CSS Selector - DOM - XPath - ID

Indholdsfortegnelse:

Anonim

Hvad er Locators?

Locator er en kommando, der fortæller Selen IDE, hvilke GUI-elementer (f.eks. Tekstboks, knapper, afkrydsningsfelter osv.), Som det skal fungere på. Identifikation af korrekte GUI-elementer er en forudsætning for at oprette et automatiseringsscript. Men nøjagtig identifikation af GUI-elementer er vanskeligere, end det lyder. Nogle gange ender du med at arbejde med forkerte GUI-elementer eller slet ingen elementer! Derfor giver Selen et antal lokaliteter, der præcist kan lokalisere et GUI-element

De forskellige typer CSS Locator i Selen IDE

Der er kommandoer, der ikke har brug for en lokalisering (såsom kommandoen "åben"). Imidlertid har de fleste af dem brug for element Locators i Selenium webdriver.

Valget af locator afhænger stort set af din applikation under test . I denne vejledning skifter vi mellem Facebook, nye ture.demoaut på basis af lokaliseringer, som disse applikationer understøtter. På samme måde i dit testprojekt vælger du en af ​​de ovennævnte elementlokatorer i Selenium webdriver baseret på din applikationsunderstøttelse.

Lokalisering efter id

Dette er den mest almindelige måde at finde elementer på, da id'er formodes at være unikke for hvert element.

Målformat: id = id for elementet

I dette eksempel bruger vi Facebook som vores testapp, fordi Mercury Tours ikke bruger ID-attributter.

Trin 1. Siden denne tutorial blev oprettet, har Facebook ændret deres Login Page Design. Brug denne demoside http://demo.guru99.com/test/facebook.html til test. Undersøg tekstfeltet "E-mail eller telefon" ved hjælp af Firebug, og noter dets id. I dette tilfælde er id'et "e-mail".

Trin 2. Start Selen IDE, og indtast "id = e-mail" i feltet Mål. Klik på Find-knappen og bemærk, at tekstfeltet "E-mail eller telefon" bliver fremhævet med gul og kantet med grønt, hvilket betyder, at Selen IDE var i stand til at lokalisere dette element korrekt.

Lokalisering efter navn

Lokaliseringselementer efter navn ligner meget lokalisering efter id, bortset fra at vi i stedet bruger præfikset "name =" .

Målformat: navn = elementets navn

I den følgende demonstration bruger vi nu Mercury Tours, fordi alle vigtige elementer har navne.

Trin 1. Naviger til http://demo.guru99.com/test/newtours/, og brug Firebug til at inspicere tekstfeltet "Brugernavn". Vær opmærksom på navnets attribut.

Her ser vi, at elementets navn er "brugernavn".

Trin 2. I Selen IDE skal du indtaste "navn = brugernavn" i feltet Mål og klikke på knappen Find. Selen IDE skal være i stand til at finde tekstfeltet Brugernavn ved at fremhæve det.

Lokalisering efter navn ved hjælp af filtre

Filtre kan bruges, når flere elementer har samme navn. Filtre er yderligere attributter, der bruges til at skelne mellem elementer med samme navn.

Målformat : navn = navn_af_elementfilter = værdi_af_filter

Lad os se et eksempel -

Trin 1 . Log på Mercury Tours ved hjælp af "tutorial" som brugernavn og adgangskode. Det skal føre dig til Flight Finder-siden vist nedenfor.

Trin 2. Brug Firebug til at bemærke, at alternativknapperne Round Trip og One Way har samme navn "tripType". De har dog forskellige VALUE attributter, så vi kan bruge hver af dem som vores filter.

Trin 3.

  • Vi skal først få adgang til One Way-radioknappen. Klik på den første linje i Editoren.
  • I kommandofeltet i Selen IDE skal du indtaste kommandoen "klik".
  • I feltet Target skal du indtaste "navn = tripType-værdi = oneway". Delen "værdi = oneway" er vores filter.

Trin 4 . Klik på Find-knappen, og bemærk, at Selen IDE er i stand til at fremhæve One Way-alternativknappen med grønt - hvilket betyder, at vi er i stand til at få adgang til elementet ved hjælp af dets VALUE-attribut.

Trin 5. Tryk på "X" -tasten på dit tastatur for at udføre denne klikkommando. Bemærk, at alternativknappen One Way blev valgt.

Du kan gøre nøjagtigt det samme med rundknappen, denne gang ved at bruge "name = tripType value = roundtrip" som dit mål.

Lokalisering efter linktekst

Denne type CSS-lokalisering i selen gælder kun for hyperlinktekster. Vi får adgang til linket ved at forud for vores mål med "link =" og derefter efterfulgt af hyperlinkteksten.

Målformat : link = link_text

I dette eksempel får vi adgang til "REGISTER" -linket, der findes på Mercury Tours hjemmeside.

Trin 1.

  • Sørg først for, at du er logget af Mercury Tours.
  • Gå til Mercury Tours hjemmeside.

Trin 2 .

  • Brug Firebug til at inspicere linket "REGISTER". Linkteksten findes mellem og tags.
  • I dette tilfælde er vores linktekst "REGISTER". Kopier linkteksten.

Trin 3 . Kopier linkteksten i Firebug, og indsæt den på Selenium IDE's målfelt. Præfiks det med "link =".

Trin 4. Klik på Find-knappen og bemærk, at Selen IDE var i stand til at fremhæve REGISTER-linket korrekt.

Trin 5. For at bekræfte yderligere skal du indtaste "clickAndWait" i boksen Kommando og udføre det. Selen IDE skal være i stand til at klikke på dette REGISTER-link med succes og føre dig til registreringssiden vist nedenfor.

Lokalisering ved hjælp af CSS Selector

CSS-vælgere i selen er strengemønstre, der bruges til at identificere et element baseret på en kombination af HTML-tag, id, klasse og attributter. Lokalisering ved hjælp af CSS-vælgere i selen er mere kompliceret end de tidligere metoder, men det er den mest almindelige lokaliseringsstrategi for avancerede selenbrugere, fordi det kan få adgang til selv de elementer, der ikke har noget ID eller navn.

CSS-vælgere i Selen har mange formater, men vi vil kun fokusere på de mest almindelige.

  • Tag og ID
  • Mærke og klasse
  • Tag og attribut
  • Mærke, klasse og attribut
  • Indre tekst

Når du bruger denne strategi, sætter vi altid præfikset for målfeltet med "css =" som vist i de følgende eksempler.

Lokalisering efter CSS Selector - Tag og ID

Igen bruger vi Facebooks e-mail-tekstfelt i dette eksempel. Som du kan huske, har det et id på "e-mail", og vi har allerede åbnet det i afsnittet "Find efter id". Denne gang bruger vi en Selenium CSS Selector med ID til at få adgang til det samme element.

Syntaks

Beskrivelse

css = tag # id
  • tag = HTML-tagget for det element, der er adgang til
  • # = hash-tegnet. Dette skal altid være til stede, når du bruger en Selenium CSS-vælger med ID
  • id = ID'et for det element, der er adgang til

Husk, at id'et altid forud for et hash-tegn (#).

Trin 1. Naviger til www.facebook.com. Brug Firebug til at undersøge tekstfeltet "E-mail eller telefon".

På dette tidspunkt skal du være opmærksom på, at HTML-tagget er "input", og dets id er "e-mail". Så vores syntaks vil være "css = input # email".

Trin 2. Indtast "css = input # email" i feltet Mål på Selen IDE, og klik på knappen Find. Selen IDE skal være i stand til at fremhæve dette element.

Lokalisering efter CSS-vælger - Tag og klasse

Lokalisering med CSS Selector i Selen ved hjælp af et HTML-tag og et klassenavn svarer til at bruge et tag og ID, men i dette tilfælde bruges en prik (.) I stedet for et hash-tegn.

Syntaks

Beskrivelse

css = tag. klasse
  • tag = HTML-tagget for det element, der er adgang til
  • . = priktegnet. Dette skal altid være til stede, når du bruger en CSS-vælger med klasse
  • klasse = klassen for det element, der er adgang til

Trin 1. Gå til demosiden http://demo.guru99.com/test/facebook.html, og brug Firebug til at inspicere tekstfeltet "E-mail eller telefon". Bemærk, at dets HTML-tag er "input", og at dets klasse er "inputtext."

Trin 2. I Selen IDE skal du indtaste "css = input.inputtext" i feltet Mål og klikke på Find. Selen IDE skal kunne genkende tekstfeltet E-mail eller telefon.

Bemærk, at når flere elementer har samme HTML-tag og navn, genkendes kun det første element i kildekoden . Brug Firebug til at inspicere tekstfeltet Adgangskode på Facebook og bemærke, at det har samme navn som tekstfeltet E-mail eller telefon.

Årsagen til, at kun tekstfeltet E-mail eller telefon blev fremhævet i den forrige illustration, er, at det kommer først i Facebooks sidekilde.

Lokalisering ved hjælp af CSS Selector - Tag og attribut

Denne strategi bruger HTML-tagget og en bestemt attribut for det element, der skal tilgås.

Syntaks

Beskrivelse

css = tag [attribut = værdi]
  • tag = HTML-tagget for det element, der er adgang til
  • [og] = firkantede parenteser, inden for hvilke en bestemt attribut og dens tilsvarende værdi placeres
  • attribut = den attribut, der skal bruges. Det tilrådes at bruge en attribut, der er unik for elementet, såsom et navn eller ID.
  • værdi = den tilsvarende værdi af den valgte attribut.

Trin 1. Naviger til Mercury Tours registreringsside (http://demo.guru99.com/test/newtours/register.php) og inspicer tekstfeltet "Efternavn". Vær opmærksom på dets HTML-tag ("input" i dette tilfælde) og dets navn ("lastName").

Trin 2. I Selen IDE skal du indtaste "css = input [name = lastName]" i feltet Mål og klikke på Find. Selen IDE skal kunne få adgang til feltet Efternavn med succes.

Når flere elementer har samme HTML-tag og attribut, genkendes kun den første . Denne adfærd svarer til lokalisering af elementer ved hjælp af CSS-vælgere med samme tag og klasse.

Lokalisering efter CSS Selector - tag, klasse og attribut

Syntaks Beskrivelse
css = tag.class [attribut = værdi]
  • tag = HTML-tagget for det element, der er adgang til
  • . = priktegnet. Dette skal altid være til stede, når du bruger en CSS-vælger med klasse
  • klasse = klassen for det element, der er adgang til
  • [og] = firkantede parenteser, inden for hvilke en bestemt attribut og dens tilsvarende værdi placeres
  • attribut = den attribut, der skal bruges. Det tilrådes at bruge en attribut, der er unik for elementet, såsom et navn eller ID.
  • værdi = den tilsvarende værdi af den valgte attribut.

Trin 1. Gå til demosiden http://demo.guru99.com/test/facebook.html, og brug Firebug til at inspicere indtastningsfelterne 'E-mail eller telefon' og 'Adgangskode'. Vær opmærksom på deres HTML-tag, klasse og attributter. I dette eksempel vælger vi deres 'tabindex' attributter.

Trin 2. Vi får først adgang til tekstfeltet 'E-mail eller telefon'. Således bruger vi en tabindex-værdi på 1. Indtast "css = input.inputtext [tabindex = 1]" i Selenium IDEs målfelt og klik på Find. Indtastningsfeltet 'E-mail eller telefon' skal fremhæves.

Trin 3. For at få adgang til indtastningsfeltet Adgangskode skal du blot erstatte værdien for attributten tabindex. Indtast "css = input.inputtext [tabindex = 2]" i feltet Mål, og klik på knappen Find. Selen IDE skal kunne identificere tekstboksen Adgangskode med succes.

Lokalisering ved hjælp af CSS Selector - indre tekst

Som du måske har bemærket, får HTML-etiketter sjældent id, navn eller klasseattributter. Så hvordan får vi adgang til dem? Svaret er gennem brugen af ​​deres indre tekster. Indre tekster er de faktiske strengemønstre, som HTML-etiketten viser på siden.

Syntaks

Beskrivelse

css = tag: indeholder ("indre tekst")
  • tag = HTML-tagget for det element, der er adgang til
  • indre tekst = elementets indre tekst

Trin 1. Naviger til Mercury Tours 'hjemmeside (http://demo.guru99.com/test/newtours/), og brug Firebug til at undersøge etiketten "Adgangskode". Vær opmærksom på dets HTML-tag (som i dette tilfælde er "font") og bemærk, at det ikke har nogen klasse-, id- eller navneegenskaber.

Trin 2. Skriv css = font: indeholder ("Adgangskode:") i Selenium IDEs målfelt, og klik på Find. Selen IDE skal kunne få adgang til adgangskodemærket som vist på billedet nedenfor.

Trin 3. Denne gang skal du erstatte den indre tekst med "Boston", så dit mål nu bliver "css = font: indeholder (" Boston ")". Klik på Find. Du skal bemærke, at etiketten "Boston til San Francisco" bliver fremhævet. Dette viser dig, at Selen IDE kan få adgang til en lang etiket, selvom du lige har angivet det første ord i dens indre tekst.

Lokalisering efter DOM (Document Object Model)

Document Object Model (DOM) er i enkle vendinger den måde hvorpå HTML-elementer er struktureret. Selen IDE er i stand til at bruge DOM til at få adgang til sideelementer. Hvis vi bruger denne metode, starter vores målfelt altid med "dom = dokument ..."; dog fjernes præfikset "dom =" normalt, fordi Selen IDE automatisk er i stand til at fortolke alt, hvad der starter med nøgleordet "dokument", så det alligevel er en sti inden for DOM i Selen.

Der er fire grundlæggende måder at finde et element gennem DOM i Selen:

  • getElementById
  • getElementsByName
  • dom: navn (gælder kun for elementer i en navngivet form)
  • dom: indeks

Lokalisering efter DOM - getElementById

Lad os fokusere på den første metode - ved hjælp af getElementById-metoden til DOM i selen. Syntaksen ville være:

Syntaks

Beskrivelse

document.getElementById ("elementets id")

elementets id = dette er værdien af ​​ID-attributten for det element, der skal tilgås. Denne værdi skal altid være omsluttet af et par parenteser ("").

Trin 1. Brug denne demoside http://demo.guru99.com/test/facebook.html Naviger til den, og brug Firebug til at inspicere afkrydsningsfeltet "Hold mig logget ind". Vær opmærksom på dens id.

Vi kan se, at det ID, vi skal bruge, er "persist_box".

Trin 2. Åbn Selen IDE, og indtast "document.getElementById (" persist_box ") i feltet Mål, og klik på Find. Selen IDE skal kunne finde afkrydsningsfeltet "Hold mig logget ind". Selvom det ikke kan fremhæve det indre af afkrydsningsfeltet, kan Selen IDE stadig omgive elementet med en lysegrøn kant som vist nedenfor.

Lokalisering efter DOM - getElementsByName

Metoden getElementById kan kun få adgang til et element ad gangen, og det er det element med det ID, du har angivet. Metoden getElementsByName er anderledes. Det samler en række elementer, der har det navn, du har angivet. Du får adgang til de enkelte elementer ved hjælp af et indeks, der starter ved 0.

getElementById

  • Det får kun et element til dig.
  • Dette element bærer det id, som du angav inden for parenteserne af getElementById ().

getElementsByName

  • Det får en samling af elementer, hvis navne er ens.
  • Hvert element indekseres med et tal, der starter fra 0, ligesom et array
  • Du angiver, hvilket element du ønsker at få adgang til ved at placere dets indeksnummer i firkantede parenteser i getElementsByName's syntaks nedenfor.

Syntaks

Beskrivelse

document.getElementsByName ("navn") [indeks]
  • navn = elementets navn som defineret af dets 'navn' attribut
  • index = et heltal, der angiver, hvilket element inden for getElementsByName's array vil blive brugt.

Trin 1. Naviger til Mercury Tours 'hjemmeside og log ind ved hjælp af "tutorial" som brugernavn og adgangskode. Firefox skal føre dig til Flight Finder-skærmen.

Trin 2. Brug Firebug til at inspicere de tre radioknapper nederst på siden (økonomiklasse, Business Class og First Class radioknapper). Bemærk, at de alle har samme navn, som er "servClass".

Trin 3. Lad os først åbne alternativknappen "Economy class". Af alle disse tre radioknapper kommer dette element først, så det har et indeks på 0. I Selen IDE skal du skrive "document.getElementsByName (" servClass ") [0]" og klikke på knappen Find. Selen IDE skal kunne identificere radioknappen Economy class korrekt.

Trin 4. Skift indeksnummer til 1, så dit mål nu bliver document.getElementsByName ("servClass") [1]. Klik på Find-knappen, og Selen IDE skal være i stand til at 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 får adgang til, er indeholdt i en navngivet form.

Syntaks

Beskrivelse

document.forms ["formularens navn"] .elements ["elementets navn"]
  • formens navn = værdien af ​​navnattributten for det formtag, der indeholder det element, du vil have adgang til
  • elementets navn = værdien af ​​navnattributten for det element, du ønsker at få adgang til

Trin 1. Naviger til Mercury Tours hjemmeside (http://demo.guru99.com/test/newtours/), og brug Firebug til at inspicere tekstfeltet Brugernavn. Bemærk, at det er indeholdt i en form, der hedder "hjem".

Trin 2. Skriv "document.forms [" home "]. Elementer [" brugernavn "]" i Selen IDE, og klik på knappen Find. Selen IDE skal kunne få adgang til elementet med succes.

Lokalisering efter DOM - dom: indeks

Denne metode gælder, selv når elementet ikke er inden for en navngivet form, fordi det bruger formularens indeks og ikke dets navn.

Syntaks

Beskrivelse

document.forms [formens indeks] .elements [elementets indeks]
  • indeks for formularen = indeksnummeret (startende ved 0) af formularen i forhold til hele siden
  • elementets indeks = elementets indeksnummer (startende ved 0) i forhold til hele formularen, der indeholder det

Vi får adgang til tekstfeltet "Telefon" på Mercury Tours registreringsside. Formularen på den side har intet navn og ID-attribut, så dette vil være et godt eksempel.

Trin 1. Naviger til siden til registrering af Mercury Tours, og inspicér tekstfeltet Telefon. Bemærk, at formularen, der indeholder den, ikke har nogen ID- og navneattributter.

Trin 2. Indtast "document.forms [0] .elements [3]" i Selenium IDE's målfelt, og klik på knappen Find. Selen IDE skal kunne få adgang til tekstfeltet Telefon korrekt.

Trin 3. Alternativt kan du bruge elementets navn i stedet for dets indeks og opnå det samme resultat. Indtast "document.forms [0] .elements [" phone "]" i Selenium IDE's målfelt. Tekstfeltet Telefon skal stadig fremhæves.

Lokalisering ved XPath

XPath er det sprog, der bruges ved lokalisering af XML-noder (Extensible Markup Language). Da HTML kan betragtes som en implementering af XML, kan vi også bruge XPath til at lokalisere HTML-elementer.

Fordel: Det kan få adgang til næsten ethvert element, også dem uden attributter for klasse, navn eller id.

Ulempe: Det er den mest komplicerede metode til at identificere elementer på grund af for mange forskellige regler og overvejelser.

Heldigvis kan Firebug automatisk generere XPath Selenium locators. I det følgende eksempel får vi adgang til et billede, der umuligt kan tilgås via de metoder, vi diskuterede tidligere.

Trin 1. Naviger til Mercury Tours hjemmeside og brug Firebug til at inspicere det orange rektangel til højre for det gule "Links" felt. Se billedet nedenfor.

Trin 2 . Højreklik på elementets HTML-kode, og vælg derefter indstillingen "Kopier XPath".

Trin 3. I Selen IDE skal du skrive et skråstreg fremad "/" i feltet Mål og derefter indsætte XPath, som vi kopierede i det forrige trin. Indtastningen i dit målfelt skal nu begynde med to skråstreg "//".

Trin 4 . Klik på knappen Find. Selen IDE skal være i stand til at fremhæve den orange boks som vist nedenfor.

Resumé

Syntaks til Locator-brug

Metode

Målsyntaks

Eksempel
Efter ID id = id_of_elementet id = e-mail
Ved navn navn = navn_af_elementet navn = brugernavn
Efter navn ved hjælp af filtre name = name_of_the_element filter = value_of_filter navn = tripType-værdi = oneway
Efter linktekst link = link_text link = REGISTER
Tag og ID css = tag # id css = input # e-mail
Mærke og klasse css = tag. klasse css = input.inputtext
Tag og attribut css = tag [attribut = værdi] css = input [navn = efternavn]
Tag, klasse og attribut css = tag. klasse [attribut = værdi] css = input.inputtext [tabindex = 1]