Selector CSS în Selenium
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”.
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.
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”.
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.
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.
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 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”).
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.
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”.
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ă.
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ă.
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.
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.
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.
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] |