Selector CSS în Selenium

prin: Krishna Rungta Krishna Rungta
Hours Actualizat

⚡ Rezumat inteligent

Selector CSS în Selenium este o strategie puternică de localizare care identifică elementele folosind etichete HTML, ID-uri, clase, atribute și modele de text intern. Această resursă explică fiecare tip de selector CSS cu exemple pas cu pas pentru Selenium SDI.

  • 🆔 Etichetă și ID: Combinați o etichetă HTML cu prefixul # pentru a viza cu precizie elementele care au un atribut ID unic.
  • 🎯 Etichetă și clasă: Folosește sintaxa punct (.) pentru a localiza elementele care partajează o clasă CSS, utilă pentru componentele UI repetate.
  • 🧩 Etichetă și atribut: Aplicați paranteze [attribute=value] pentru a identifica elementele prin nume, tip sau orice pereche de atribute personalizate.
  • 🪜 Etichetă, clasă și atribut: Suprapuneți mai multe condiții pentru a dezambiguiza elementele care au în comun atât nume de clasă, cât și valori ale atributelor.
  • 🔤 Potrivire text intern: Folosește modelul :contains("text") pentru a localiza etichetele și elementele cărora le lipsesc ID-uri, nume sau clase.
  • ✅ Cea mai buna practica: Preferați ID-uri stabile în locul selectorilor imbricați profund pentru a păstra Selenium Scripturi de automatizare rezistente la modificările interfeței utilizator.
Citește mai mult

Selector CSS în Selenium

Ce este un selector CSS în Selenium?

A Selector CSS în Selenium este un model de șir de caractere care identifică un element web printr-o combinație de etichete HTML, ID, clasă și atribute. Selectorii CSS sunt puțin mai avansați decât localizarea după ID sau Nume, dar sunt cea mai populară strategie printre utilizatorii experimentați. Selenium utilizatori deoarece pot accesa elemente care nu au deloc atributul ID sau Name.

Selectoare CSS în Selenium vin în multe forme, dar acest ghid se concentrează pe cinci dintre cele mai comune modele utilizate în Selenium SDI:

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

Când se folosește această strategie în Selenium IDE, întotdeauna prefixul Target cutie cu „css=„”, așa cum se demonstrează în fiecare exemplu de mai jos.

De ce să folosiți selectorii CSS în Selenium?

Selectorii CSS sunt strategia de localizare preferată pentru mulți Selenium ingineri de automatizare, deoarece oferă un echilibru între viteză, flexibilitate și lizibilitate. Aplicațiile web moderne utilizează adesea ID-uri generate dinamic sau elimină complet atributele de nume, lăsând selectorii CSS ca singura modalitate fiabilă de a viza un anumit element de pe pagină.

Principalele avantaje ale utilizării selectorilor CSS includ:

  • Performanță: Selectorii CSS sunt procesați de motorul nativ al browserului, deci se execută mai rapid decât expresiile XPath echivalente, în special în browserele mai vechi, cum ar fi Internet Explorer.
  • Flexibilitate: Acestea combină logica de etichete, clase, atribute și potriviri parțiale, permițând testerilor să vizeze elementele cărora le lipsește un ID stabil.
  • lizibilitate: Sintaxa reflectă modul în care dezvoltatorii scriu deja reguli CSS, ceea ce scurtează curba de învățare atât pentru inginerii de asigurare a calității, cât și pentru echipele front-end.
  • Stabilitate pe mai multe browsere: Selectorii CSS se comportă uniform în Chrome, Firefox, Edge și Safari, reducând eșecurile instabile ale testelor.

Etichetă și ID – Selector CSS

Acest exemplu folosește caseta text Email de pe pagina de conectare Facebook. Elementul are ID-ul „e-mail„și a fost deja accesat în secțiunea „Localizare după ID”. Acum același element este vizat folosind un Selenium Selector CSS cu atributul ID.

Sintaxă

css=tag#id

  • tag = eticheta HTML a elementului accesat
  • # = semnul diez, care trebuie să fie întotdeauna prezent atunci când se utilizează 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.comFolosind DevTools-ul browserului dvs. (sau un instrument vechi, cum ar fi Firebug), verificați caseta de text „E-mail sau telefon”.

Observați că eticheta HTML este „intrare„ și ID-ul său este „e-mail„. Prin urmare, selectorul CSS complet devine „css=input#email".

Etichetă și ID - Selector CSS în Selenium

Pas 2) Introduce "css=input#email" în Target cutie de Selenium IDE și faceți clic pe butonul Găsiți. Selenium IDE evidențiază elementul corespunzător pe pagină.

Selenium IDE evidențierea câmpului Email prin etichetă și ID

Etichetă și clasă – Selector CSS

Un selector CSS în Selenium care folosește o etichetă HTML și un nume de clasă urmează aceeași idee ca eticheta și ID-ul, dar un punct (.) înlocuiește semnul diez.

Sintaxă

css=tag.class

  • tag = eticheta HTML a elementului accesat
  • . = semnul punct, care trebuie să fie întotdeauna prezent atunci când se utilizează un Selector CSS cu clasa
  • class = clasa elementului accesat

Pas 1) Deschide pagina demo https://demo.guru99.com/test/facebook.html și verificați caseta de text „E-mail sau telefon”. Rețineți că eticheta HTML este „intrare„ și clasa sa este „text de intrare".

Etichetă și clasă - Selector CSS în Selenium

Pas 2) In Selenium IDE, introduceți „css=input.inputtext" in Target casetă și faceți clic pe Găsiți. Selenium IDE recunoaște caseta text Email sau Phone.

Selenium Localizarea elementului IDE după etichetă și clasă

Rețineți că atunci când mai multe elemente au aceeași etichetă și clasă HTML, este recunoscut doar primul element corespondent din codul sursă. Inspectați caseta text Parolă de pe aceeași pagină și observați că are aceeași clasă ca și caseta text E-mail sau Telefon.

Mai multe elemente care au aceeași etichetă și clasă

În ilustrația anterioară a fost evidențiată doar caseta text E-mail sau Telefon, deoarece apare prima în sursa paginii.

Determinarea ordinii surselor paginii Selenium Meci

Etichetă și atribut – Selector CSS

Această strategie combină o etichetă HTML cu un atribut specific aparținând elementului pe care doriți să îl accesați.

Sintaxă

css=tag[attribute=value]

  • tag = eticheta HTML a elementului accesat
  • [și] = paranteze pătrate care încadrează atributul și valoarea sa corespunzătoare
  • attribute = atributul de utilizat. Alegeți unul care este unic pentru element, cum ar fi name sau id.
  • valoare = valoarea corespunzătoare a atributului ales.

Pas 1) Navigați către Mercury Pagina de înregistrare a tururilor https://demo.guru99.com/test/newtours/register.php și inspectați caseta de text „Nume”. Observați eticheta HTML („input”) și atributul name („lastName”).

Etichetă și atribut - Selector CSS în Selenium

Pas 2) In Selenium IDE, introduceți „css=input[nume=lastName]" in Target casetă și faceți clic pe Găsiți. Selenium IDE localizează cu succes câmpul Nume.

Selenium IDE localizează numele de familie prin atribut

Când mai multe elemente au în comun aceeași etichetă și atribut HTML, doar primul este recunoscut. Comportamentul este identic cu localizarea elementelor cu aceeași etichetă și clasă.

ARTICOLE SIMILARE

Etichetă, clasă și atribut – Selector CSS

Sintaxă

css=tag.class[attribute=value]

  • tag = eticheta HTML a elementului accesat
  • . = semnul punct, care trebuie să fie întotdeauna prezent atunci când se utilizează un Selector CSS cu clasa
  • class = clasa elementului accesat
  • [și] = paranteze pătrate care încadrează un atribut specific și valoarea sa corespunzătoare
  • attribute = atributul de utilizat. Alegeți unul care este unic pentru element, cum ar fi name sau id.
  • valoare = valoarea corespunzătoare a atributului ales.

Pas 1) Deschide pagina demo https://demo.guru99.com/test/facebook.html și verificați casetele de introducere „E-mail sau telefon” și „Parolă”. Notați eticheta HTML, clasa și atributele acestora. Acest exemplu folosește „tabindex„atribut”.

Etichetă, clasă și atribut - Selector CSS

Pas 2) Accesați mai întâi caseta de text „E-mail sau telefon” utilizând o valoare tabindex de 1. Introduceți „css=input.inputtext[tabindex=1]”În Selenium IDE-urile Target și faceți clic pe Găsire. Câmpul E-mail sau Telefon este evidențiat.

Selenium Localizarea e-mailurilor în IDE după etichetă, clasă, atribut

Pas 3) Pentru a viza caseta de introducere a parolei, pur și simplu înlocuiți valoarea tabindex. Introduceți „css=input.inputtext[tabindex=2]" in Target casetă și faceți clic pe Găsiți. Selenium IDE localizează cu succes caseta text Parolă.

Selenium Localizarea parolei în IDE după etichetă, clasă, atribut

Text interior – Selector CSS

Etichetele HTML rareori primesc atribute de tip id, name sau class. Deci, cum le accesați în SeleniumRăspunsul este prin textul lor interior. Textele interne sunt modelele de șiruri de caractere pe care eticheta HTML le afișează pe pagină.

Sintaxă

css=tag:contains("inner text")

  • tag = eticheta HTML a elementului accesat
  • text interior = conținutul text vizibil al elementului

Pas 1) Navigați către Mercury Pagina principală a excursiilor https://demo.guru99.com/test/newtours/ și inspectați eticheta „Parolă”. Observați eticheta sa HTML („font” în acest caz) și observați că elementul nu are atribute de tip class, id sau name.

Text interior - Inspecție 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 localizează eticheta Parolă așa cum se arată mai jos.

Selenium IDE găsește eticheta parolei după textul intern

Pas 3) De data aceasta, înlocuiți textul interior cu „Boston”, astfel încât Target devine „css=font:conține(„Boston”)„. Faceți clic pe Găsire. Eticheta „Boston către San Francisco” este evidențiată, demonstrând că Selenium IDE poate localiza o etichetă lungă chiar și atunci când este furnizat doar primul cuvânt din textul său intern.

Selenium Potrivire parțială a textului intern IDE

Selector CSS vs. XPath în Selenium

Atât selectorii CSS, cât și XPath sunt utilizați pentru a identifica elementele web din Selenium, însă au puncte forte diferite. Tabelul de mai jos compară cele două strategii de localizare pe baza unor dimensiuni cheie:

Criterii Selector CSS XPath
Viteză Mai rapid, rulează pe motorul nativ al browserului Mai lent, mai ales în browserele mai vechi
Direcţie Numai înainte (de la părinte la copil) Înainte și înapoi (de la copil la părinte)
Sintaxă Mai scurt și similar cu regulile CSS Expresii de cale mai lungi, ierarhice
Potrivirea textului Limitat la pseudo-clasa :contains() Funcții puternice text() și contains()
Cel mai bun pentru Machete statice și aplicații web moderne Traversare DOM complexă și localizatori bazați pe text

Cele mai bune practici pentru scrierea selectorilor CSS în Selenium

Scrierea selectorilor CSS fiabili depășește simpla cunoaștere a sintaxei. Următoarele practici îi ajută pe testeri să creeze selectori CSS stabili și ușor de întreținut. Selenium scripturi care supraviețuiesc modificărilor interfeței utilizator:

  1. Preferă atribute unice: Alegeți întotdeauna atributele id, data-test-id sau name care sunt adăugate explicit pentru automatizare. Acestea rămân stabile chiar și atunci când aspectul vizual se modifică.
  2. Evitați selectorii imbricați excesiv: Lanțuri lungi, cum ar fi div > div > ul > li > a se pot strica ușor atunci când dezvoltatorii refactorizează markup-ul. Păstrați selectorii cât mai scurți posibil.
  3. Folosește potrivirile parțiale cu înțelepciune: Modele precum [class*="btn-primary"] tolerează modificări minore ale numelor de clase, dar se pot potrivi și cu elemente neintenționate.
  4. Evitați localizatorii bazați pe index: Selectori precum nth-child(3) sunt fragile deoarece adăugarea unui element frate schimbă fiecare poziție.
  5. Validați selectorii în DevTools: Înainte de a alerga a Selenium script, lipiți selectorul în consola Chrome DevTools folosind document.querySelector() pentru a confirma că returnează exact un element.
  6. Combină atributele pentru unicitate: Când o clasă este partajată de mai multe elemente, adăugați un filtru de atribute, cum ar fi input.form-control[name="email"] pentru a dezambiguiza ținta.
  7. Documentați și reutilizați: Centralizează selectorii în cadrul unei clase de obiecte de pagină, astfel încât o singură actualizare să corecteze fiecare test care face referire la același element.

Respectarea acestor instrucțiuni reduce instabilitatea, îmbunătățește viteza de execuție a testelor și face ca Selenium suite mai ușor de întreținut în timp.

Rezumat: Referință rapidă pentru sintaxa selectorului CSS

Tabelul de mai jos consolidează fiecare Selenium Modelul CSS Selector prezentat în acest ghid:

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]
Text interior css=etichetă:conține(„text”) css=font:contains(„Parola:”)

Întrebări frecvente

Da. Selectorii CSS se execută, în general, mai rapid decât XPath, deoarece browserele procesează regulile CSS nativ. Diferența este cel mai vizibilă în versiunile mai vechi de Internet Explorer, în timp ce browserele moderne precum Chrome și Firefox a reduce decalajul.

Da. Selectori CSS scriși pentru Selenium IDE lucrează direct în Selenium WebDriver prin By.cssSelector()Singura diferență este că WebDriver nu necesită prefixul „css=”, deoarece tipul locatorului este specificat de metoda însăși.

Nu. Firebug a fost întrerupt în 2017, după ce a fost integrat în Firefox Instrumente pentru dezvoltatori. Astăzi, testerii folosesc instrumentele pentru dezvoltatori încorporate în Chrome, Firefox, sau Edge pentru a inspecta elementele și a valida selectorii CSS înainte de a le adăuga la Selenium scripturi.

Da. Instrumente bazate pe inteligență artificială, cum ar fi TestimMabl și ChatGPT pot sugera selectori CSS analizând DOM-ul. Acestea reduc efortul de întreținere prin adaptarea selectorilor atunci când dezvoltatorii redenumesc clasele sau restructurează pagina.

Motoarele de auto-reparare bazate pe inteligență artificială analizează DOM-ul din jur și recuperează automat locatoarele defecte. Când un selector CSS eșuează, motorul identifică elementul cel mai apropiat folosind similaritatea atributelor, conținutul textului și modelele istorice, restabilind stabilitatea testului.

Folosește modele cu potrivire parțială, cum ar fi [id^="user_"] pentru prefixe, [id$="_btn"] pentru sufixe sau [id*="cart"] pentru subșiruri. Aceste modele se potrivesc cu ID-urile generate dinamic fără a necesita o valoare exactă.

Selectorii CSS nu pot parcurge în sus de la un element copil la elementul părinte și oferă suport limitat pentru potrivirea textului. Pentru aceste scenarii, XPath rămâne alegerea mai bună. De asemenea, CSS nu are funcții încorporate pentru logica de frați/surori dincolo de frații/surori adiacenți și generali.

Deschideți DevTools din browser, comutați la fila Console și rulați document.querySelectorAll("your-selector")NodeList-ul returnat arată fiecare element potrivit. O funcție fiabilă Selenium Locatorul ar trebui să returneze exact un element pentru direcționare unică.

Rezumați această postare cu: