CSS-vælger i Selenium

Hvad er en CSS-vælger?

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

CSS-vælgere i Selenium har mange formater, men vi vil kun fokusere på de mest almindelige. De forskellige typer af CSS Locator i Selenium IDE

• Tag og ID
• Tag og klasse
• Tag og attribut
• Tag, klasse og attribut
• Indre tekst

Når vi bruger denne strategi, præfikser vi altid Target boks med "css=", som det vil blive vist i de følgende eksempler.

tag og id – CSS-vælger

Igen vil vi bruge Facebooks e-mail-tekstboks i dette eksempel. Som du kan huske, har den et ID på "e-mail", og vi har allerede fået adgang til det i afsnittet "Placering efter ID". Denne gang vil vi bruge en Selenium CSS-vælger med ID for at få adgang til det samme element.

Syntaks

css=tag#id

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

Husk, at ID'et altid indledes med et hash-tegn (#).

Trin 1) Naviger til www.facebook.com. Brug Firebug til at undersøge tekstboksen "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 Target kasse med Selenium IDE og klik på knappen Find. Selenium IDE burde være i stand til at fremhæve dette element.

tag og klasse – CSS-vælger

CSS-vælger i Selenium at bruge 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

css=tag.class

• tag = HTML-tagget for det element, der tilgås
• . = prikketegnet. Dette bør altid være til stede, når du bruger en CSS-vælger med klasse
• klasse = klassen for det element, der tilgås

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

Trin 2) In Selenium IDE, indtast "css=input.inputtext" i Target boksen og klik på Find. Selenium IDE skal kunne genkende tekstboksen E-mail eller Telefon.

Bemærk, at når flere elementer har det samme HTML-tag og navn, vil kun det første element i kildekoden blive genkendt. Brug Firebug til at inspicere Adgangskode-tekstboksen i Facebook og bemærk, at den har samme navn som E-mail- eller Telefontekstboksen.

Grunden til, at kun e-mail- eller telefontekstboksen blev fremhævet i den forrige illustration, er, at den kommer først i Facebooks sidekilde.

tag og attribut – CSS-vælger

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

Syntaks

css=tag[attribute=value]

• tag = HTML-tagget for det element, der tilgås
• [ og ] = firkantede parenteser, inden for hvilke en specifik attribut og dens tilsvarende værdi vil blive placeret
• attribut = den attribut, der skal bruges. Det er tilrådeligt at bruge en egenskab, 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' tilmeldingsside http://demo.guru99.com/test/newtours/register.php og inspicer tekstboksen "Efternavn". Læg mærke til dets HTML-tag ("input" i dette tilfælde) og dets navn ("efternavn").

Trin 2) In Selenium IDE, indtast "css=input[navn=efternavn]" i Target boksen og klik på Find. Selenium IDE skulle være i stand til at få adgang til boksen Efternavn.

Når flere elementer har det samme HTML-tag og attribut, vil kun det første blive genkendt. Denne adfærd svarer til at lokalisere elementer ved hjælp af CSS-vælgere med samme tag og klasse.

tag, klasse og attribut – CSS-vælger

Syntaks

css=tag.class[attribute=value]

• tag = HTML-tagget for det element, der tilgås
• . = prikketegnet. Dette bør altid være til stede, når du bruger en CSS-vælger med klasse
• klasse = klassen for det element, der tilgås
• [ og ] = firkantede parenteser, inden for hvilke en specifik attribut og dens tilsvarende værdi vil blive placeret
• attribut = den attribut, der skal bruges. Det er tilrådeligt at bruge en egenskab, 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'. Bemærk deres HTML-tag, klasse og attributter. I dette eksempel vil vi vælge deres 'tabindex'-attributter.

Trin 2) Vi får først adgang til tekstboksen 'E-mail eller telefon'. Derfor vil vi bruge en tabindex-værdi på 1. Indtast "css=input.inputtext[tabindex=1]" i Selenium IDE'er Target boksen og klik på Find. Indtastningsfeltet 'E-mail eller telefon' skal være fremhævet.

Trin 3) For at få adgang til adgangskodeindtastningsfeltet skal du blot erstatte værdien af ​​tabindex-attributten. Indtast "css=input.inputtext[tabindex=2]" i Target boksen og klik på knappen Find. Selenium IDE skal være i stand til at identificere kodeordstekstboksen.

indre tekst – CSS-vælger

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 strengmønstre, som HTML-etiketten viser på siden.

Syntaks

css=tag:contains("inner text")

• tag = HTML-tagget for det element, der tilgås
• 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 "Password"-etiketten. Læg mærke til dets HTML-tag (som er "font" i dette tilfælde), og bemærk, at det ikke har nogen klasse-, id- eller navneattributter.

Trin 2) Type css=font:contains(“Adgangskode:”) ind Selenium IDE'er Target boksen og klik på Find. Selenium IDE bør være i stand til at få adgang til adgangskodeetiketten som vist på billedet nedenfor.

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

Resumé

Syntaks til lokalisering ved brug af CSS-vælger

Metode	Target Syntaks	Eksempel
Tag og ID	css=tag#id	css=input#e-mail
Tag og klasse	css=tag.klasse	css=input.inputtekst
Tag og attribut	css=tag[attribut=værdi]	css=input[navn=efternavn]
Tag, klasse og attribut	css=tag.klasse[attribut=værdi]	css=input.inputtekst[tabindex=1]