CSS-i valija sisse Selenium

Mis on CSS-i valija?

CSS-i valijad sisse Selenium on stringimustrid, mida kasutatakse elemendi tuvastamiseks HTML-märgendi, ID, klassi ja atribuutide kombinatsiooni alusel. Asukoha määramine CSS-i valijate abil Selenium on keerulisem kui eelmised meetodid, kuid see on arenenud seadmete kõige levinum asukoha määramise strateegia Selenium kasutajatele, sest see pääseb juurde isegi nendele elementidele, millel pole ID-d ega nime.

CSS-i valijad sisse Selenium on palju vorminguid, kuid keskendume ainult kõige tavalisematele. Erinevat tüüpi CSS-i lokaatorid Selenium IDE

  • Silt ja ID
  • Silt ja klass
  • Märgi ja atribuut
  • Silt, klass ja atribuut
  • Sisemine tekst

Selle strateegia kasutamisel paneme alati eesliide Target kasti "css=", nagu on näidatud järgmistes näidetes.

silt ja id – CSS-i valija

Jällegi kasutame selles näites Facebooki e-posti tekstikasti. Nagu mäletate, on selle ID "e-post" ja oleme sellele juba jaotises "ID järgi asukoha määramine" juurde pääsenud. Seekord kasutame a Selenium CSS-i valija ID-ga samale elemendile juurdepääsuks.

Süntaks

css=tag#id

  • tag = juurdepääsetava elemendi HTML-märgend
  • # = räsimärk. See peaks alati olemas olema, kui kasutate a Selenium CSS-i valija ID-ga
  • id = juurdepääsetava elemendi ID

Pidage meeles, et ID-le eelneb alati räsimärk (#).

Step 1) Liigu www.facebook.com. Firebugi abil uurige tekstikasti „E-post või telefon”.

Siinkohal pange tähele, et HTML-märgend on "sisend" ja selle ID on "e-post". Nii et meie süntaks on "css=input#email".

Silt ja ID – CSS-i valija

Step 2) Sisestage lahtrisse "css=input#email". Target kast Selenium IDE ja klõpsake nuppu Otsi. Selenium IDE peaks suutma selle elemendi esile tõsta.

Silt ja ID – CSS-i valija

silt ja klass – CSS-i valija

CSS-i valija sisse Selenium HTML-märgendi ja klassinime kasutamine sarnaneb sildi ja ID-ga, kuid sel juhul kasutatakse räsimärgi asemel punkti (.).

Süntaks

css=tag.class

  • tag = juurdepääsetava elemendi HTML-märgend
  • . = punktimärk. See peaks alati olemas olema, kui kasutate klassiga CSS-valijat
  • klass = juurdepääsetava elemendi klass

Step 1) Minge demo lehele http://demo.guru99.com/test/facebook.html ja kasutage Firebugi tekstikasti „E-post või telefon” kontrollimiseks. Pange tähele, et selle HTML-märgend on "input" ja selle klass on "inputtext".

Silt ja klass – CSS-i valija

Step 2) In Selenium IDE, sisestage lahtrisse "css=input.inputtext". Target kasti ja klõpsake nuppu Otsi. Selenium IDE peaks suutma ära tunda tekstikasti E-post või Telefon.

Silt ja klass – CSS-i valija

Pange tähele, et kui mitmel elemendil on sama HTML-märgend ja nimi, tuvastatakse lähtekoodis ainult esimene element. Kontrollige Firebugi abil Facebookis parooli tekstikasti ja märkige, et sellel on sama nimi, mis tekstikastil E-post või Telefon.

Silt ja klass – CSS-i valija

Põhjus, miks eelmisel illustratsioonil tõsteti esile ainult tekstikast E-post või Telefon, on see, et see on Facebooki lehe allikas esimesel kohal.

Silt ja klass – CSS-i valija

silt ja atribuut – CSS Selector

See strateegia kasutab HTML-märgendit ja juurdepääsetava elemendi konkreetset atribuuti.

Süntaks

css=tag[attribute=value]

  • tag = juurdepääsetava elemendi HTML-märgend
  • [ ja ] = nurksulud, mille sisse paigutatakse konkreetne atribuut ja sellele vastav väärtus
  • atribuut = kasutatav atribuut. Soovitatav on kasutada elemendile ainulaadset atribuuti, nagu nimi või ID.
  • väärtus = valitud atribuudi vastav väärtus.

Step 1) Liigu Mercury Toursi registreerimisleht http://demo.guru99.com/test/newtours/register.php ja kontrollige tekstikasti "Perekonnanimi". Võtke teadmiseks selle HTML-märgend (antud juhul "sisend") ja nimi ("perenimi").

Silt ja atribuut – CSS Selector

Step 2) In Selenium IDE, sisestage lahtrisse "css=input[name=perenimi]". Target kasti ja klõpsake nuppu Otsi. Selenium IDE peaks pääsema edukalt juurdepääsu kastile Perekonnanimi.

Silt ja atribuut – CSS Selector

Kui mitmel elemendil on sama HTML-märgend ja atribuut, tuvastatakse ainult esimene. See käitumine sarnaneb elementide asukoha määramisega sama sildi ja klassiga CSS-selektorite abil.

silt, klass ja atribuut – CSS-i valija

Süntaks

css=tag.class[attribute=value]

  • tag = juurdepääsetava elemendi HTML-märgend
  • . = punktimärk. See peaks alati olemas olema, kui kasutate klassiga CSS-valijat
  • klass = juurdepääsetava elemendi klass
  • [ ja ] = nurksulud, mille sisse paigutatakse konkreetne atribuut ja sellele vastav väärtus
  • atribuut = kasutatav atribuut. Soovitatav on kasutada elemendile ainulaadset atribuuti, nagu nimi või ID.
  • väärtus = valitud atribuudi vastav väärtus.

Step 1) Minge demo lehele http://demo.guru99.com/test/facebook.html ja kasutage Firebugi sisestuskastide „E-post või telefon” ja „Parool” kontrollimiseks. Võtke teadmiseks nende HTML-i silt, klass ja atribuudid. Selle näite jaoks valime nende atribuudid "tabindex".

Silt, klass ja atribuut – CSS Selector

Step 2) Avame esmalt tekstikasti „E-post või telefon”. Seega kasutame tabindexi väärtust 1. Sisestage "css=input.inputtext[tabindex=1]" Selenium IDE-d Target kasti ja klõpsake nuppu Otsi. Sisestuskast „E-post või telefon” tuleks esile tõsta.

Silt, klass ja atribuut – CSS Selector

Step 3) Parooli sisestuskasti avamiseks asendage lihtsalt atribuudi tabindex väärtus. Sisestage "css=input.inputtext[tabindex=2]". Target ja klõpsake nuppu Otsi. Selenium IDE peab suutma tekstikasti Parool edukalt tuvastada.

Silt, klass ja atribuut – CSS Selector

sisemine tekst – CSS Selector

Nagu olete ehk märganud, antakse HTML-siltidele harva ID, nime või klassi atribuute. Niisiis, kuidas me neile ligi pääseme? Vastus on nende sisemiste tekstide kasutamise kaudu. Sisetekstid on tegelikud stringimustrid, mida HTML-silt lehel näitab.

Süntaks

css=tag:contains("inner text")

  • tag = juurdepääsetava elemendi HTML-märgend
  • sisetekst = elemendi sisetekst

Step 1) Liigu Mercury Toursi koduleht http://demo.guru99.com/test/newtours/ ja kasutage Firebugi sildi „Parool” uurimiseks. Võtke teadmiseks selle HTML-märgend (mis on antud juhul "font") ja pange tähele, et sellel pole klassi-, ID- ega nimeatribuute.

Sisetekst – CSS Selector

Step 2) KASUTUSALA css=font:contains("Parool:") sisse Selenium IDE-d Target kasti ja klõpsake nuppu Otsi. Selenium IDE peaks pääsema juurde paroolisildile, nagu on näidatud alloleval pildil.

Sisetekst – CSS Selector

Step 3) Seekord asendage sisemine tekst tekstiga "Boston", et teie Target muutub nüüd "css=font:contains("Boston"). Klõpsake nuppu Otsi. Peaksite märkama, et silt "Boston to San Francisco" tõstetakse esile. See näitab teile seda Selenium IDE pääseb juurde pikale sildile isegi siis, kui märkisite just selle siseteksti esimese sõna.

Sisetekst – CSS Selector

kokkuvõte

Süntaks CSS-i valija abil asukoha määramiseks

Meetod Target Süntaks Näide
Silt ja ID css=tag#id css=sisend#e-post
Silt ja klass css=tag.klass css=input.inputtext
Silt ja atribuut css=silt[atribuut=väärtus] css=sisend[nimi=perenimi]
Silt, klass ja atribuut css=tag.classattribute=value] css=input.inputtext[tabindex=1]