CSS-velger i Selenium

Hva er en CSS-velger?

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

CSS-velgere i Selenium har mange formater, men vi vil kun fokusere på de vanligste. De forskjellige typene CSS Locator i Selenium IDE

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

Når vi bruker denne strategien, prefikser vi alltid til Target boksen med "css=" som vil bli vist i de følgende eksemplene.

tag og id – CSS-velger

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

syntax

css=tag#id

• tag = HTML-koden til elementet som brukes
• # = hash-tegnet. Dette bør alltid være tilstede ved bruk av en Selenium CSS-velger med ID
• id = IDen til elementet som brukes

Husk at ID-en alltid innledes med et hash-tegn (#).

Trinn 1) naviger til www.facebook.com. Bruk Firebug, undersøk tekstboksen "E-post eller telefon".

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

Trinn 2) Skriv inn "css=input#email" i Target eske med Selenium IDE og klikk på Finn-knappen. Selenium IDE skal kunne fremheve det elementet.

tag og klasse – CSS-velger

CSS-velger i Selenium bruk av en HTML-tag og et klassenavn ligner på å bruke en kode og ID, men i dette tilfellet brukes en prikk (.) i stedet for et hash-tegn.

syntax

css=tag.class

• tag = HTML-koden til elementet som brukes
• . = prikketegnet. Dette bør alltid være tilstede når du bruker en CSS-velger med klasse
• klasse = klassen til elementet som åpnes

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

Trinn 2) In Selenium IDE, skriv inn "css=input.inputtext" i Target boksen og klikk Finn. Selenium IDE skal kunne gjenkjenne tekstboksen for e-post eller telefon.

Vær oppmerksom på at når flere elementer har samme HTML-tag og navn, vil bare det første elementet i kildekoden bli gjenkjent. Bruk Firebug, inspiser passord-tekstboksen i Facebook og legg merke til at den har samme navn som e-post- eller telefontekstboksen.

Grunnen til at bare E-post- eller Telefon-tekstboksen ble uthevet i forrige illustrasjon, er at den kommer først i Facebooks sidekilde.

kode og attributt – CSS-velger

Denne strategien bruker HTML-taggen og et spesifikt attributt for elementet som skal åpnes.

syntax

css=tag[attribute=value]

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

Trinn 1) naviger til Mercury Turenes registreringsside https://demo.guru99.com/test/newtours/register.php og inspiser tekstboksen "Etternavn". Legg merke til HTML-koden («input» i dette tilfellet) og navnet («lastName»).

Trinn 2) In Selenium IDE, skriv inn "css=input[navn=etternavn]" i Target boksen og klikk Finn. Selenium IDE skal kunne få tilgang til Etternavn-boksen.

Når flere elementer har samme HTML-tag og attributt, vil bare det første bli gjenkjent. Denne oppførselen ligner på å finne elementer ved å bruke CSS-velgere med samme tag og klasse.

kode, klasse og attributt – CSS-velger

syntax

css=tag.class[attribute=value]

• tag = HTML-koden til elementet som brukes
• . = prikketegnet. Dette bør alltid være tilstede når du bruker en CSS-velger med klasse
• klasse = klassen til elementet som åpnes
• [ og ] = firkantede parenteser som et spesifikt attributt og dens tilsvarende verdi vil plasseres innenfor
• attributt = attributtet som skal brukes. Det anbefales å bruke et attributt som er unikt for elementet, for eksempel navn eller ID.
• verdi = den tilsvarende verdien til det valgte attributtet.

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

Trinn 2) Vi får tilgang til tekstboksen "E-post eller telefon" først. Derfor vil vi bruke en tabindex-verdi på 1. Skriv inn “css=input.inputtext[tabindex=1]” i Selenium IDE-er Target boksen og klikk Finn. Inndataboksen 'E-post eller telefon' skal være uthevet.

Trinn 3) For å få tilgang til passordinntastingsboksen, erstatt bare verdien av tabindex-attributtet. Skriv inn "css=input.inputtext[tabindex=2]" i Target boksen og klikk på Finn-knappen. Selenium IDE må være i stand til å identifisere passordtekstboksen.

indre tekst – CSS-velger

Som du kanskje har lagt merke til, blir HTML-etiketter sjelden gitt 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 strengmønstrene som HTML-etiketten viser på siden.

syntax

css=tag:contains("inner text")

• tag = HTML-koden til elementet som brukes
• indre tekst = den indre teksten til elementet

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

Trinn 2) typen css=font:contains(“Passord:”) inn Selenium IDE-er Target boksen og klikk Finn. Selenium IDE skal ha tilgang til passordetiketten som vist på bildet nedenfor.

Trinn 3) Denne gangen erstatter du den indre teksten med "Boston" slik at din Target vil nå bli "css=font:contains("Boston")". Klikk Finn. Du bør legge merke til at "Boston til San Francisco"-etiketten blir uthevet. Dette viser deg det Selenium IDE kan få tilgang til en lang etikett selv om du nettopp har angitt det første ordet i dens indre tekst.

Sammendrag

Syntaks for lokalisering etter CSS-velgerbruk

Metode	Target syntax	Eksempel
Tag og ID	css=tag#id	css=input#e-post
Tag og klasse	css=tag.klasse	css=input.inputtekst
Tag og attributt	css=tag[attribute=verdi]	css=input[navn=etternavn]
Tag, klasse og attributt	css=tag.class[attribute=verdi]	css=input.inputtext[tabindex=1]