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".
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 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".
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.
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.
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 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").
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.
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".
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.
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.
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.
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.
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.
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] |