Locatorer i Selenium

Hvad er Locatorer?

Locator er en kommando, der fortæller Selenium IDE hvilke GUI-elementer (sig Text Box, Knapper, Tjek Boxes osv.) dets behov for at operere. Identifikation af korrekte GUI-elementer er en forudsætning for at skabe et automatiseringsscript. Men nøjagtig identifikation af GUI-elementer er sværere, end det lyder. Nogle gange ender du med at arbejde med forkerte GUI-elementer eller slet ingen elementer! Derfor, Selenium leverer et antal Locatorer til præcist at lokalisere et GUI-element

Der er kommandoer, der ikke behøver en lokalisator (såsom "åbn"-kommandoen). De fleste af dem har dog brug for element Locators i Selenium webdriver.

Valget af locator afhænger i høj grad af din applikation under test. I denne tutorial vil vi skifte mellem Facebook, nye tours.demoaut på grundlag af locatorer, som disse applikationer understøtter. Ligeledes i din Test projekt, skal du vælge en hvilken som helst af de ovennævnte elementlokaliser i Selenium webdriver, baseret på din applikationssupport.

Lokalisering efter ID

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

Target Format: id=id for elementet

Til dette eksempel vil vi bruge Facebook som vores test-app pga Mercury Ture bruger ikke ID-attributter.

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

Trin 2) Launch Selenium IDE og indtast "id=email" i Target boks. Klik på Find-knappen og bemærk, at tekstboksen "E-mail eller telefon" bliver fremhævet med gul og omkranset med grøn, hvilket betyder, Selenium IDE var i stand til at lokalisere dette element korrekt.

Finder efter navn

Lokalisering af elementer efter navn minder meget om lokalisering efter ID, bortset fra at vi bruger "navn =" præfiks i stedet for.

Target Format: navn=navn på elementet

I den følgende demonstration vil vi nu bruge Mercury Ture, fordi alle væsentlige elementer har navne.

Trin 1) Naviger til http://demo.guru99.com/test/newtours/ og brug Firebug til at inspicere tekstboksen "Brugernavn". Bemærk dens navneegenskab.

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

Trin 2) In Selenium IDE, indtast "navn=brugernavn" i Target boksen og klik på knappen Find. Selenium IDE bør være i stand til at finde tekstboksen Brugernavn ved at fremhæve den.

Sådan finder du element 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 elementer med samme navn.

Target dannet: navn=navn_på_elementet filter=værdi_af_filter

Lad os se et eksempel -

Trin 1) Log på Mercury Ture.

Log på Mercury Ture med "tutorial" som brugernavn og adgangskode. Det skulle tage dig til Flight Finder-siden vist nedenfor.

Trin 2) Brug af firebug brug VALUE attributter.

Brug Firebug til at bemærke, at radioknapperne 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) Klik på den første linje.

• Vi skal først få adgang til One Way-radioknappen. Klik på den første linje i editoren.
• I kommandoboksen til Selenium IDE, indtast kommandoen "klik".
• I Target indtast "name=tripType value=oneway". "Værdi=envejs"-delen er vores filter.

Trin 4) Klik på knappen Find.

Læg mærke til det Selenium IDE er i stand til at fremhæve One Way-radioknappen med grøn - hvilket betyder, at vi er i stand til at få adgang til elementet med succes ved at bruge dets VALUE-attribut.

Trin 5) Vælg One Way alternativknap.

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 præcis det samme med radioknappen Rundtur, denne gang, ved at bruge "navn=rejsetypeværdi=tur-retur" som dit mål.

Lokalisering ved hjælp af linktekst

Denne type CSS-locator i Selenium gælder kun hyperlinktekster. Vi får adgang til linket ved at sætte "link=" foran vores mål og derefter efterfulgt af hyperlinkteksten.

Target dannet: link=link_tekst

I dette eksempel skal vi få adgang til linket "REGISTER" fundet på Mercury Tours hjemmeside.

Trin 1)

• Først skal du sikre dig, at du er logget af Mercury Ture.
• Gå til Mercury Tours hjemmeside.

Trin 2)

• Brug Firebug til at inspicere "REGISTER"-linket. 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'er Target boks. Præfiks det med "link =".

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

Trin 5) For at bekræfte yderligere skal du indtaste "clickAndWait" i kommandoboksen og udføre det. Selenium IDE skulle være i stand til at klikke på det REGISTER-link og føre dig til registreringssiden vist nedenfor.

Lokalisering efter DOM (Document Object Model)

Dokumentobjektmodel (DOM), i enkle vendinger, er den måde, HTML-elementer er struktureret på. Selenium IDE er i stand til at bruge DOM til at få adgang til sideelementer. Hvis vi bruger denne metode, vil vores Target boksen vil altid starte med "dom=dokument..."; men præfikset "dom =" fjernes normalt pga Selenium IDE er i stand til automatisk at fortolke alt, der starter med søgeordet "dokument", til at være en sti inden for DOM i Selenium alligevel.

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

• 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 at bruge getElementById-metoden for DOM i Selenium. Syntaksen ville være:

Syntaks

document.getElementById("id of the element")

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

Trin 1) Brug denne demoside http://demo.guru99.com/test/facebook.html Naviger til det, og brug Firebug til at inspicere afkrydsningsfeltet "Hold mig logget på". Bemærk dens ID.

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

Trin 2) Åbne Selenium IDE og i Target indtast "document.getElementById("persist_box")" og klik på Find. Selenium IDE skulle være i stand til at finde afkrydsningsfeltet "Hold mig logget på". Selvom det ikke kan fremhæve det indre af afkrydsningsfeltet, Selenium IDE kan stadig omgive elementet med en lys grøn kant som vist nedenfor.

Lokalisering efter DOM – getElementsByName

GetElementById-metoden kan kun få adgang til ét element ad gangen, og det er elementet med det id, du har angivet. GetElementsByName-metoden er anderledes. Den 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 Den får kun ét element til dig. Dette element bærer det ID, som du har angivet inden for parentesen af ​​getElementById().
	getElementsByName Det vil få en samling af elementer, hvis navne alle er ens. Hvert element er indekseret med et tal, der starter fra 0 ligesom en matrix Du angiver hvilket element du ønsker at få adgang til ved at sætte dets indeksnummer i firkantede parenteser i getElementsByNames syntaks 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 Tours' hjemmeside og login med "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 (Economy class, Business class og First class radioknapper). Bemærk, at de alle har det samme navn, som er "servClass".

Trin 3) Lad os først få adgang til radioknappen "Økonomiklasse". Af alle disse tre radioknapper kommer dette element først, så det har et indeks på 0. In Selenium IDE, skriv "document.getElementsByName("servClass")[0]", og klik på knappen Find. Selenium IDE bør være i stand til at identificere økonomiklasse-radioknappen korrekt.

Trin 4) Skift indeksnummeret til 1, så din Target bliver nu document.getElementsByName(“servClass”)[1]. Klik på knappen Find, og Selenium IDE bør være i stand til at fremhæve "Business class" alternativknappen, som vist nedenfor.

Lokalisering efter DOM – dom:navn

Som nævnt tidligere, vil denne metode kun gælde, hvis det element, du har adgang til, er indeholdt i en navngivet formular.

Syntaks

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

• formens navn = værdien af ​​navneattributten for formtagget, der indeholder det element, du vil have 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 http://demo.guru99.com/test/newtours/ og brug Firebug til at inspicere tekstboksen Brugernavn. Bemærk, at det er indeholdt i en form kaldet "hjem".

Trin 2) In Selenium IDE, skriv “document.forms[“home”].elements[“brugernavn”]” og klik på knappen Find. Selenium IDE skal kunne få adgang til elementet med succes.

Lokalisering efter DOM – dom:index

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

Syntaks

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

• indeks for formularen = indeksnummeret (startende ved 0) af formularen i forhold til hele siden
• elementets indeks = indeksnummeret (startende ved 0) af elementet i forhold til hele formen, der indeholder det

Vi får adgang til tekstboksen "Telefon" indeni Mercury Tilmeldingsside for ture. Formularen på den side har ikke noget navn og ID-attribut, så dette vil være et godt eksempel.

Trin 1) Naviger til Mercury Tours registreringsside og inspicer telefontekstboksen. Bemærk, at formularen, der indeholder den, ikke har nogen id- og navneattributter.

Trin 2) Indtast "document.forms[0].elements[3]" i Selenium IDE'er Target boksen og klik på knappen Find. Selenium IDE skulle kunne få korrekt adgang til telefontekstboksen.

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'er Target boks. Tekstfeltet Telefon skal stadig være fremhævet.

Lokalisering af XPath

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

• Fordel: Den kan få adgang til næsten ethvert element, selv dem uden klasse, navn eller id-attributter.
• 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 lokatorer. I det følgende eksempel vil vi få 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 den gule "Links"-boks. Se billedet nedenfor.

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

Trin 3) In Selenium IDE, skriv en skråstreg "/" fremad i Target indsæt derefter den XPath, som vi kopierede i det forrige trin. Indgangen i din Target boksen skal nu begynde med to skråstreger "//".

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