CSS-valitsin sisään Selenium

Mikä on CSS-valitsin?

CSS-valitsimet sisään Selenium ovat merkkijonokavoja, joita käytetään elementin tunnistamiseen HTML-tunnisteen, id:n, luokan ja attribuuttien yhdistelmän perusteella. Paikannus CSS-valitsimien avulla Selenium on monimutkaisempi kuin aiemmat menetelmät, mutta se on yleisin edistyneen paikannusstrategia Selenium käyttäjille, koska se voi käyttää jopa niitä elementtejä, joilla ei ole tunnusta tai nimeä.

CSS-valitsimet sisään Selenium on monia muotoja, mutta keskitymme vain yleisimpiin. Erityyppiset CSS-paikantimet Selenium IDE

• Tunniste ja tunnus
• Tag ja luokka
• Tunniste ja attribuutti
• Tunniste, luokka ja attribuutti
• Sisäinen teksti

Kun käytät tätä strategiaa, käytämme aina etuliitettä Target ruutuun "css=", kuten seuraavissa esimerkeissä näytetään.

tunniste ja tunnus – CSS-valitsin

Tässä esimerkissä käytämme jälleen Facebookin Sähköposti-tekstiruutua. Kuten muistat, sen tunnus on "sähköposti", ja olemme jo käyttäneet sitä "Paikannus tunnuksella" -osiossa. Tällä kertaa käytämme a Selenium CSS-valitsin tunnuksella päästäksesi samaan elementtiin.

Syntaksi

css=tag#id

• tag = käytettävän elementin HTML-tunniste
• # = hash-merkki. Tämän pitäisi olla aina läsnä, kun käytät a Selenium CSS-valitsin tunnuksella
• id = käytettävän elementin tunnus

Muista, että ID:tä edeltää aina hash-merkki (#).

Vaihe 1) Navigoida johonkin www.facebook.com. Tarkista Firebugilla Sähköposti tai puhelin -tekstiruutu.

Huomioi tässä vaiheessa, että HTML-tunniste on "input" ja sen tunnus on "email". Joten syntaksimme on "css=input#email".

Vaihe 2) Kirjoita "css=input#email" kohtaan Target laatikko Selenium IDE ja napsauta Etsi-painiketta. Selenium IDE:n pitäisi pystyä korostamaan tämä elementti.

tunniste ja luokka – CSS Selector

CSS-valitsin sisään Selenium HTML-tunnisteen ja luokan nimen käyttäminen on samanlaista kuin tagin ja tunnuksen käyttäminen, mutta tässä tapauksessa käytetään pistettä (.) hash-merkin sijaan.

Syntaksi

css=tag.class

• tag = käytettävän elementin HTML-tunniste
• . = pistemerkki. Tämän pitäisi olla aina läsnä, kun käytetään CSS-valitsinta luokan kanssa
• class = käytettävän elementin luokka

Vaihe 1) Siirry demosivulle http://demo.guru99.com/test/facebook.html ja tarkista "Sähköposti tai puhelin" -tekstikenttä Firebugilla. Huomaa, että sen HTML-tunniste on "input" ja sen luokka on "inputtext".

Vaihe 2) In Selenium IDE, kirjoita "css=input.inputtext" kohtaan Target -ruutua ja napsauta Etsi. Selenium IDE:n pitäisi pystyä tunnistamaan Sähköposti- tai Puhelin-tekstiruutu.

Huomaa, että kun useilla elementeillä on sama HTML-tunniste ja nimi, vain lähdekoodin ensimmäinen elementti tunnistetaan. Tarkista Firebugin avulla Facebookin Salasana-tekstikenttä ja huomaa, että sillä on sama nimi kuin Sähköposti- tai Puhelin-tekstiruudulla.

Syy siihen, miksi vain Sähköposti- tai Puhelin-tekstiruutu korostettiin edellisessä kuvassa, on se, että se tulee ensimmäiseksi Facebookin sivun lähteessä.

tunniste ja attribuutti – CSS Selector

Tämä strategia käyttää HTML-tunnistetta ja käytettävän elementin tiettyä attribuuttia.

Syntaksi

css=tag[attribute=value]

• tag = käytettävän elementin HTML-tunniste
• [ ja ] = hakasulkeet, joihin tietty attribuutti ja sitä vastaava arvo sijoitetaan
• attribuutti = käytettävä attribuutti. On suositeltavaa käyttää attribuuttia, joka on yksilöllinen elementille, kuten nimi tai tunnus.
• arvo = valitun määritteen vastaava arvo.

Vaihe 1) Navigoida johonkin Mercury Toursin ilmoittautumissivu http://demo.guru99.com/test/newtours/register.php ja tarkista "Sukunimi" -tekstiruutu. Huomioi sen HTML-tunniste (tässä tapauksessa "input") ja sen nimi ("sukunimi").

Vaihe 2) In Selenium IDE, kirjoita "css=input[name=sukunimi]". Target -ruutua ja napsauta Etsi. Selenium IDE:n pitäisi pystyä käyttämään Sukunimi-ruutua onnistuneesti.

Kun useilla elementeillä on sama HTML-tunniste ja attribuutti, vain ensimmäinen tunnistetaan. Tämä käyttäytyminen on samanlainen kuin elementtien paikantaminen käyttämällä CSS-valitsimia, joilla on sama tunniste ja luokka.

tunniste, luokka ja attribuutti – CSS-valitsin

Syntaksi

css=tag.class[attribute=value]

• tag = käytettävän elementin HTML-tunniste
• . = pistemerkki. Tämän pitäisi olla aina läsnä, kun käytetään CSS-valitsinta luokan kanssa
• class = käytettävän elementin luokka
• [ ja ] = hakasulkeet, joihin tietty attribuutti ja sitä vastaava arvo sijoitetaan
• attribuutti = käytettävä attribuutti. On suositeltavaa käyttää attribuuttia, joka on yksilöllinen elementille, kuten nimi tai tunnus.
• arvo = valitun määritteen vastaava arvo.

Vaihe 1) Siirry demosivulle http://demo.guru99.com/test/facebook.html ja tarkista "Sähköposti tai puhelin"- ja "Salasana"-syöttöruudut Firebugilla. Ota huomioon niiden HTML-tunniste, luokka ja attribuutit. Tässä esimerkissä valitsemme niiden 'tabindex'-attribuutit.

Vaihe 2) Avaamme ensin "Sähköposti tai puhelin" -tekstikentän. Siksi käytämme tabindex-arvoa 1. Kirjoita "css=input.inputtext[tabindex=1]" Selenium IDE: t Target -ruutua ja napsauta Etsi. Sähköposti tai puhelin -syöttökentän tulee olla korostettuna.

Vaihe 3) Pääset salasanan syöttöruutuun yksinkertaisesti korvaamalla tabindex-attribuutin arvon. Kirjoita "css=input.inputtext[tabindex=2]" -kenttään Target -ruutuun ja napsauta Etsi-painiketta. Selenium IDE:n on kyettävä tunnistamaan Salasana-tekstiruutu onnistuneesti.

sisäteksti – CSS Selector

Kuten olet ehkä huomannut, HTML-tunnisteille annetaan harvoin tunnus-, nimi- tai luokkaattribuutteja. Joten miten pääsemme niihin käsiksi? Vastaus on heidän sisäisten tekstiensä avulla. Sisätekstit ovat todellisia merkkijonomalleja, jotka HTML-tunniste näyttää sivulla.

Syntaksi

css=tag:contains("inner text")

• tag = käytettävän elementin HTML-tunniste
• sisäteksti = elementin sisäteksti

Vaihe 1) Navigoida johonkin Mercury Toursin kotisivut http://demo.guru99.com/test/newtours/ ja käytä Firebugia “Salasana”-tunnisteen tutkimiseen. Huomaa sen HTML-tunniste (joka on tässä tapauksessa "fontti") ja huomaa, että sillä ei ole luokka-, id- tai nimiattribuutteja.

Vaihe 2) Tyyppi css=font:contains("Salasana:") tulee Selenium IDE: t Target -ruutua ja napsauta Etsi. Selenium IDE:n pitäisi pystyä käyttämään salasanatarraa alla olevan kuvan mukaisesti.

Vaihe 3) Tällä kertaa korvaa sisäteksti sanalla "Boston", jotta Target tulee nyt "css=font:contains("Boston"). Napsauta Etsi. Huomaa, että "Boston to San Francisco" -merkki korostuu. Tämä osoittaa sinulle sen Selenium IDE voi käyttää pitkää tarraa, vaikka olisit juuri ilmoittanut sen sisäisen tekstin ensimmäisen sanan.

Yhteenveto

Syntaksi paikannukseen CSS-valitsimen käytön avulla

Menetelmä	Target Syntaksi	esimerkki
Tunniste ja tunnus	css=tag#id	css=syöttö#sähköposti
Tunniste ja luokka	css=tag.luokka	css=input.inputtext
Tunniste ja attribuutti	css=tunniste[attribuutti=arvo]	css=input[nimi=sukunimi]
Tunniste, luokka ja attribuutti	css=tunniste.luokka[attribuutti=arvo]	css=input.inputtext[tabindex=1]