Selector CSS în Selenium

prin: Krishna Rungta Krishna Rungta
Hours Actualizat

Ce este un selector CSS?

Selectoare CSS în Selenium sunt modele de șir utilizate pentru a identifica un element pe baza unei combinații de etichetă HTML, id, clasă și atribute. Localizare prin selectoare CSS în Selenium este mai complicată decât metodele anterioare, dar este cea mai comună strategie de localizare a avansat Selenium utilizatorii deoarece poate accesa chiar și acele elemente care nu au ID sau nume.

Selectoare CSS în Selenium au multe formate, dar ne vom concentra doar pe cele mai comune. Diferitele tipuri de CSS Locator în Selenium IDE

  • Etichetă și ID
  • Etichetă și clasă
  • Etichetă și atribut
  • Etichetă, clasă și atribut
  • Text interior

Când folosim această strategie, prefixăm întotdeauna Target caseta cu „css=", așa cum va fi arătat în exemplele următoare.

tag și id – Selector CSS

Din nou, vom folosi caseta de text E-mail a Facebook în acest exemplu. După cum vă amintiți, are un ID de „e-mail” și l-am accesat deja în secțiunea „Localizare după ID”. De data aceasta, vom folosi un Selenium Selector CSS cu ID în accesarea aceluiași element.

Sintaxă

css=tag#id

  • tag = eticheta HTML a elementului accesat
  • # = semnul hash. Acest lucru ar trebui să fie întotdeauna prezent atunci când utilizați un Selenium Selector CSS cu ID
  • id = ID-ul elementului accesat

Rețineți că ID-ul este întotdeauna precedat de un semn hash (#).

Pas 1) Navigheaza catre www.facebook.com. Folosind Firebug, examinați caseta de text „E-mail sau telefon”.

În acest moment, rețineți că eticheta HTML este „input” și ID-ul său este „e-mail”. Deci sintaxa noastră va fi „css=input#email”.

Tag și id - Selector CSS

Pas 2) Introduceți „css=input#email” în Target cutie de Selenium IDE și faceți clic pe butonul Găsiți. Selenium IDE ar trebui să poată evidenția acel element.

Tag și id - Selector CSS

etichetă și clasă – Selector CSS

Selector CSS în Selenium utilizarea unei etichete HTML și a unui nume de clasă este similară cu utilizarea unei etichete și a unui ID, dar în acest caz, se folosește un punct (.) în loc de semnul hash.

Sintaxă

css=tag.class

  • tag = eticheta HTML a elementului accesat
  • . = semnul punctului. Acest lucru ar trebui să fie întotdeauna prezent atunci când utilizați un Selector CSS cu clasă
  • class = clasa elementului accesat

Pas 1) Accesați pagina demo https://demo.guru99.com/test/facebook.html și utilizați Firebug pentru a inspecta caseta de text „E-mail sau telefon”. Observați că eticheta sa HTML este „input” și clasa sa este „inputtext”.

Etichetă și clasă - Selector CSS

Pas 2) In Selenium IDE, introduceți „css=input.inputtext” în Target casetă și faceți clic pe Găsiți. Selenium IDE ar trebui să poată recunoaște caseta de text E-mail sau Telefon.

Etichetă și clasă - Selector CSS

Rețineți că atunci când mai multe elemente au aceeași etichetă și nume HTML, doar primul element din codul sursă va fi recunoscut. Folosind Firebug, inspectați caseta de text Parolă din Facebook și observați că are același nume cu caseta de text E-mail sau Telefon.

Etichetă și clasă - Selector CSS

Motivul pentru care doar caseta de text E-mail sau Telefon a fost evidențiată în ilustrația anterioară este că aceasta se află pe primul loc în sursa paginii Facebook.

Etichetă și clasă - Selector CSS

ARTICOLE SIMILARE

etichetă și atribut – Selector CSS

Această strategie folosește eticheta HTML și un atribut specific al elementului care trebuie accesat.

Sintaxă

css=tag[attribute=value]

  • tag = eticheta HTML a elementului accesat
  • [ și ] = paranteze pătrate în care vor fi plasate un anumit atribut și valoarea corespunzătoare
  • atribut = atributul care trebuie utilizat. Este recomandabil să utilizați un atribut care este unic pentru element, cum ar fi un nume sau un ID.
  • valoare = valoarea corespunzătoare a atributului ales.

Pas 1) Navigheaza catre Mercury Pagina de înregistrare a Tururilor https://demo.guru99.com/test/newtours/register.php și inspectați caseta de text „Nume”. Luați notă de eticheta sa HTML („input” în acest caz) și de numele acesteia („lastName”).

Etichetă și atribut - Selector CSS

Pas 2) In Selenium IDE, introduceți „css=input[nume=lastName]” în fișierul Target casetă și faceți clic pe Găsiți. Selenium IDE ar trebui să poată accesa cu succes caseta Nume.

Etichetă și atribut - Selector CSS

Când mai multe elemente au aceeași etichetă și atribut HTML, doar primul va fi recunoscut. Acest comportament este similar cu localizarea elementelor folosind selectoare CSS cu aceeași etichetă și clasă.

etichetă, clasă și atribut – Selector CSS

Sintaxă

css=tag.class[attribute=value]

  • tag = eticheta HTML a elementului accesat
  • . = semnul punctului. Acest lucru ar trebui să fie întotdeauna prezent atunci când utilizați un Selector CSS cu clasă
  • class = clasa elementului accesat
  • [ și ] = paranteze pătrate în care vor fi plasate un anumit atribut și valoarea corespunzătoare
  • atribut = atributul care trebuie utilizat. Este recomandabil să utilizați un atribut care este unic pentru element, cum ar fi un nume sau un ID.
  • valoare = valoarea corespunzătoare a atributului ales.

Pas 1) Accesați pagina demo https://demo.guru99.com/test/facebook.html și utilizați Firebug pentru a inspecta casetele de introducere „E-mail sau telefon” și „Parolă”. Luați notă de eticheta HTML, clasa și atributele lor. Pentru acest exemplu, vom selecta atributele lor „tabindex”.

Etichetă, clasă și atribut - Selector CSS

Pas 2) Vom accesa mai întâi caseta de text „E-mail sau Telefon”. Astfel, vom folosi o valoare tabindex de 1. Introduceți „css=input.inputtext[tabindex=1]” în Selenium IDE-urile Target casetă și faceți clic pe Găsiți. Caseta de introducere „E-mail sau telefon” ar trebui să fie evidențiată.

Etichetă, clasă și atribut - Selector CSS

Pas 3) Pentru a accesa caseta de introducere a parolei, pur și simplu înlocuiți valoarea atributului tabindex. Introduceți „css=input.inputtext[tabindex=2]” în Target casetă și faceți clic pe butonul Găsiți. Selenium IDE trebuie să fie capabil să identifice cu succes caseta de text Parolă.

Etichetă, clasă și atribut - Selector CSS

text interior – Selector CSS

După cum probabil ați observat, etichetele HTML primesc rareori atribute id, nume sau clasă. Deci, cum le accesăm? Răspunsul este prin utilizarea textelor lor interioare. Textele interioare sunt modelele de șir reale pe care eticheta HTML le arată pe pagină.

Sintaxă

css=tag:contains("inner text")

  • tag = eticheta HTML a elementului accesat
  • text interior = textul interior al elementului

Pas 1) Navigheaza catre Mercury Pagina de pornire a Tours https://demo.guru99.com/test/newtours/ și folosiți Firebug pentru a investiga eticheta „Parolă”. Luați notă de eticheta sa HTML (care este „font” în acest caz) și observați că nu are atribute de clasă, id sau nume.

Text interior - Selector CSS

Pas 2) Tip css=font:contains(„Parola:”) în Selenium IDE-urile Target casetă și faceți clic pe Găsiți. Selenium IDE ar trebui să poată accesa eticheta de parolă, așa cum se arată în imaginea de mai jos.

Text interior - Selector CSS

Pas 3) De data aceasta, înlocuiți textul interior cu „Boston”, astfel încât dvs Target va deveni acum „css=font:contains(„Boston”)”. Faceți clic pe Găsiți. Ar trebui să observați că eticheta „Boston to San Francisco” devine evidențiată. Asta vă arată că Selenium IDE poate accesa o etichetă lungă chiar dacă tocmai ați indicat primul cuvânt din textul său interior.

Text interior - Selector CSS

Rezumat

Sintaxă pentru localizarea prin utilizarea selectorului CSS

Metodă Target Sintaxă Exemplu
Etichetă și ID css=tag#id css=input#email
Etichetă și clasă css=tag.class css=input.inputtext
Etichetă și atribut css=tag[atribut=valoare] css=input[nume=lastName]
Etichetă, clasă și atribut css=tag.class[atribut=valoare] css=input.inputtext[tabindex=1]