CSS birač u Selenium

By: Krishna Rungta Krishna Rungta
Hours Ažurirano

⚡ Pametni sažetak

CSS birač u Selenium je moćna strategija lokatora koja identificira elemente pomoću HTML oznaka, ID-ova, klasa, atributa i obrazaca unutarnjeg teksta. Ovaj resurs objašnjava svaku vrstu CSS selektora s detaljnim primjerima za Selenium SDI.

  • 🆔 Oznaka i ID: Kombinirajte HTML oznaku s prefiksom # kako biste ciljali elemente koji imaju precizno jedinstveni atribut ID-a.
  • 🎯 Oznaka i klasa: Koristite sintaksu točke (.) za lociranje elemenata koji dijele CSS klasu, što je korisno za ponovljene UI komponente.
  • 🧩 Oznaka i atribut: Primijenite zagrade [attribute=value] za identifikaciju elemenata putem imena, tipa ili bilo kojeg prilagođenog para atributa.
  • 🪜 Oznaka, klasa i atribut: Složite više uvjeta kako biste razdvojili elemente koji dijele i imena klasa i vrijednosti atributa.
  • 🔤 Podudaranje unutarnjeg teksta: Koristite obrazac :contains(“text”) za lociranje oznaka i elemenata kojima nedostaju ID-ovi, imena ili klase.
  • ✅ Najbolja vježba: Dajte prednost stabilnim ID-ovima u odnosu na duboko ugniježđene selektore kako biste zadržali Selenium skripte za automatizaciju otporne na promjene korisničkog sučelja.
Pročitaj više

CSS birač u Selenium

Što je CSS selektor u Selenium?

A CSS birač u Selenium je uzorak niza znakova koji identificira web element kombinacijom HTML oznake, ID-a, klase i atributa. CSS selektori su nešto napredniji od lociranja po ID-u ili nazivu, ali su najpopularnija strategija među iskusnim Selenium korisnike jer mogu doći do elemenata koji uopće nemaju atribut ID ili Name.

CSS selektori u Selenium dolaze u mnogim oblicima, ali ovaj vodič se usredotočuje na pet najčešćih uzoraka koji se koriste u Selenium SDI:

  • Oznaka i ID
  • Oznaka i klasa
  • Oznaka i atribut
  • Oznaka, klasa i atribut
  • Unutarnji tekst

Prilikom korištenja ove strategije u Selenium IDE, uvijek dodajte prefiks Target kutija s "css="kao što je prikazano u svakom primjeru u nastavku.

Zašto koristiti CSS selektore u Selenium?

CSS selektori su preferirana strategija lokatora za mnoge Selenium inženjeri automatizacije jer pronalaze ravnotežu između brzine, fleksibilnosti i čitljivosti. Moderne web aplikacije često koriste dinamički generirane ID-ove ili u potpunosti uklanjaju atribute imena, ostavljajući CSS selektore kao jedini pouzdan način ciljanja određenog elementa na stranici.

Glavne prednosti korištenja CSS selektora uključuju:

  • Performance: CSS selektore obrađuje izvorni mehanizam preglednika, pa se izvršavaju brže od ekvivalentnih XPath izraza, posebno u starijim preglednicima poput Internet Explorera.
  • Fleksibilnost: Kombiniraju logiku oznaka, klasa, atributa i djelomičnog podudaranja, omogućujući testerima da ciljaju elemente kojima nedostaje stabilan ID.
  • Čitljivost: Sintaksa odražava način na koji programeri već pišu CSS pravila, što skraćuje krivulju učenja i za QA inženjere i za front-end timove.
  • Stabilnost u različitim preglednicima: CSS selektori se ponašaju dosljedno u Chromeu, Firefox, Edge i Safari, smanjujući nestabilne neuspjehe testiranja.

Oznaka i ID – CSS selektor

Ovaj primjer koristi tekstualni okvir E-pošta na stranici za prijavu na Facebook. Element ima ID "e-mail„, a već mu je pristupljeno u odjeljku „Lociranje pomoću ID-a“. Sada se isti element cilja pomoću Selenium CSS selektor s atributom ID.

Sintaksa

css=tag#id

  • oznaka = HTML oznaka elementa kojem se pristupa
  • # = znak hash, koji uvijek mora biti prisutan pri korištenju Selenium CSS birač s ID-om
  • id = ID elementa kojem se pristupa

Imajte na umu da ID-u uvijek prethodi znak hash (#).

Korak 1) Dođite na www.facebook.comPomoću DevToolsa u pregledniku (ili nekog starijeg alata kao što je Firebug) provjerite tekstualni okvir „E-pošta ili telefon“.

Primijetite da je HTML oznaka "ulazni" i njegov ID je "e-mail„. Potpuni CSS selektor stoga postaje „css=unos#e-pošta".

Oznaka i ID - CSS selektor u Selenium

Korak 2) Unesi "css=unos#e-pošta" u Target kutija od Selenium IDE i kliknite gumb Pronađi. Selenium IDE ističe odgovarajući element na stranici.

Selenium IDE označava polje E-pošta putem oznake i ID-a

Oznaka i klasa – CSS selektor

CSS selektor u Selenium koji koristi HTML oznaku i naziv klase slijedi istu ideju kao oznaka i ID, ali točka (.) zamjenjuje znak ljestvice.

Sintaksa

css=tag.class

  • oznaka = HTML oznaka elementa kojem se pristupa
  • . = znak točke, koji uvijek mora biti prisutan pri korištenju CSS selektora s klasom
  • klasa = klasa elementa kojem se pristupa

Korak 1) Otvorite demo stranicu https://demo.guru99.com/test/facebook.html i provjerite tekstualni okvir „E-pošta ili telefon“. Imajte na umu da je HTML oznaka „ulazni" i njegova klasa je "unos teksta".

Oznaka i klasa - CSS selektor u Selenium

Korak 2) In Selenium IDE, unesite "css=input.inputtext"U Target okvir i kliknite Pronađi. Selenium IDE prepoznaje tekstualni okvir E-pošta ili Telefon.

Selenium IDE lociranje elementa po oznaci i klasi

Imajte na umu da kada više elemenata dijeli istu HTML oznaku i klasu, prepoznaje se samo prvi odgovarajući element u izvornom kodu. Pregledajte tekstualni okvir Lozinka na istoj stranici i primijetite da dijeli istu klasu kao tekstualni okvir E-pošta ili Telefon.

Više elemenata koji dijele istu oznaku i klasu

Na prethodnoj ilustraciji istaknut je samo tekstualni okvir E-pošta ili Telefon jer se prvi pojavljuje u izvornom kodu stranice.

Određivanje redoslijeda izvornog koda stranice Selenium utakmica

Oznaka i atribut – CSS selektor

Ova strategija kombinira HTML oznaku sa specifičnim atributom koji pripada elementu kojem želite pristupiti.

Sintaksa

css=tag[attribute=value]

  • oznaka = HTML oznaka elementa kojem se pristupa
  • [ i ] = uglate zagrade koje obuhvaćaju atribut i njegovu odgovarajuću vrijednost
  • atribut = atribut koji će se koristiti. Odaberite onaj koji je jedinstven za element, kao što je naziv ili ID.
  • vrijednost = odgovarajuća vrijednost odabranog atributa.

Korak 1) Dođite na Mercury Stranica za registraciju tura https://demo.guru99.com/test/newtours/register.php i pregledajte tekstualni okvir „Prezime“. Zabilježite njegovu HTML oznaku („input“) i atribut imena („lastName“).

Oznaka i atribut - CSS selektor u Selenium

Korak 2) In Selenium IDE, unesite "css=unos[ime=prezime]"U Target okvir i kliknite Pronađi. Selenium IDE uspješno pronalazi polje Prezime.

Selenium IDE locira prezime putem atributa

Kada više elemenata dijeli istu HTML oznaku i atribut, prepoznaje se samo prvi. Ponašanje je identično lociranju elemenata s istom oznakom i klasom.

Ne propustite:

Oznaka, klasa i atribut – CSS selektor

Sintaksa

css=tag.class[attribute=value]

  • oznaka = HTML oznaka elementa kojem se pristupa
  • . = znak točke, koji uvijek mora biti prisutan pri korištenju CSS selektora s klasom
  • klasa = klasa elementa kojem se pristupa
  • [ i ] = uglate zagrade koje obuhvaćaju određeni atribut i njegovu odgovarajuću vrijednost
  • atribut = atribut koji će se koristiti. Odaberite onaj koji je jedinstven za element, kao što je naziv ili ID.
  • vrijednost = odgovarajuća vrijednost odabranog atributa.

Korak 1) Otvorite demo stranicu https://demo.guru99.com/test/facebook.html i pregledajte polja za unos „E-pošta ili telefon“ i „Lozinka“. Zabilježite njihovu HTML oznaku, klasu i atribute. Ovaj primjer koristi „tabindexatribut ”.

Oznaka, klasa i atribut - CSS birač

Korak 2) Prvo pristupite tekstualnom okviru "E-pošta ili telefon" koristeći vrijednost tabindexa od 1. Unesite "css=input.inputtext[tabindex=1]”U Selenium Ide Target okvir i kliknite Traži. Polje E-pošta ili Telefon je označeno.

Selenium IDE lociranje e-pošte po oznaci, klasi, atributu

Korak 3) Za ciljanje polja za unos lozinke, jednostavno zamijenite vrijednost tabindexa. Unesite "css=input.inputtext[tabindex=2]"U Target okvir i kliknite Pronađi. Selenium IDE uspješno pronalazi tekstualni okvir Lozinka.

Selenium IDE lociranje lozinke po oznaci, klasi, atributu

Unutarnji tekst – CSS selektor

HTML oznakama se rijetko dodjeljuju atributi id, name ili class. Pa kako im pristupiti u SeleniumOdgovor se nalazi u njihovom unutarnjem tekstu. Unutarnji tekstovi su stvarni uzorci nizova koje HTML oznaka prikazuje na stranici.

Sintaksa

css=tag:contains("inner text")

  • oznaka = HTML oznaka elementa kojem se pristupa
  • unutarnji tekst = vidljivi tekstualni sadržaj elementa

Korak 1) Dođite na Mercury Početna stranica Tours https://demo.guru99.com/test/newtours/ i pregledajte oznaku „Lozinka“. Zabilježite njezinu HTML oznaku (u ovom slučaju „font“) i uočite da element nema atribute klase, ID-a ili imena.

Unutarnji tekst - pregled CSS selektora

Korak 2) Tip css=font:contains(“Lozinka:”) u Selenium Ide Target okvir i kliknite Pronađi. Selenium IDE locira oznaku Lozinka kao što je prikazano dolje.

Selenium IDE locira oznaku lozinke prema unutarnjem tekstu

Korak 3) Ovaj put zamijenite unutarnji tekst s "Boston" tako da Target postaje "css=font:sadrži(“Boston”)". Kliknite Pronađi. Oznaka "Boston do San Francisca" je istaknuta, što pokazuje da Selenium IDE može pronaći dugu oznaku čak i kada je navedena samo prva riječ njenog unutarnjeg teksta.

Selenium Djelomično podudaranje unutarnjeg teksta u IDE-u

CSS selektor u odnosu na XPath u Selenium

I CSS selektori i XPath se koriste za identifikaciju web elemenata u Selenium, no imaju različite snage. Tablica u nastavku uspoređuje dvije strategije lokatora na ključnim dimenzijama:

Kriteriji CSS birač XPath
Brzina Brže, radi na izvornom engineu preglednika Sporije, posebno u starijim preglednicima
Smjer Samo prosljeđivanje (od roditelja do djeteta) Naprijed i natrag (od djeteta do roditelja)
Sintaksa Kraće i slično CSS pravilima Dulji, hijerarhijski izrazi puta
Usklađivanje teksta Ograničeno na pseudoklasu :contains() Strong text() i contains() funkcije
Najbolje za Statički izgledi i moderne web aplikacije Složeno DOM prolaženje i lokatori temeljeni na tekstu

Najbolje prakse za pisanje CSS selektora u Selenium

Pisanje pouzdanih CSS selektora nadilazi poznavanje sintakse. Sljedeće prakse pomažu testerima u stvaranju stabilnih, održivih Selenium skripte koje preživljavaju promjene korisničkog sučelja:

  1. Preferirajte jedinstvene atribute: Uvijek odaberite atribute id, data-test-id ili name koji su eksplicitno dodani za automatizaciju. Oni ostaju stabilni čak i kada se vizualni izgled promijeni.
  2. Izbjegavajte previše ugniježđene selektore: Dugi lanci kao što su div > div > ul > li > a lako se prekidaju kada programeri refaktoriraju označavanje. Selektore neka budu što kraći.
  3. Mudro koristite djelomična podudaranja: Uzorci kao što su [class*="btn-primary"] toleriraju male promjene imena klase, ali mogu se podudarati i s nenamjernim elementima.
  4. Izbjegavajte lokatore temeljene na indeksu: Selektori poput nth-child(3) su krhki jer dodavanje srodnog elementa pomiče svaku poziciju.
  5. Validirajte selektore u DevToolsima: Prije pokretanja a Selenium skriptu, zalijepite selektor u Chrome DevTools konzolu pomoću document.querySelector() kako bi se potvrdilo da vraća točno jedan element.
  6. Kombinirajte atribute za jedinstvenost: Kada klasu dijeli mnogo elemenata, dodajte filter atributa kao što je input.form-control[name="email"] kako bi se razjasnila dvosmislenost cilja.
  7. Dokumentiraj i ponovno upotrijebi: Centralizirajte selektore unutar klase Page Object tako da jedno ažuriranje ispravlja svaki test koji referencira isti element.

Slijeđenje ovih smjernica smanjuje nestabilnost, poboljšava brzinu izvršavanja testova i čini Selenium apartmani se lakše održavaju tijekom vremena.

Sažetak: Kratki pregled sintakse CSS selektora

Donja tablica objedinjuje sve Selenium Uzorak CSS selektora obrađen u ovom vodiču:

način Target Sintaksa Primjer
Oznaka i ID css=oznaka#id css=unos#e-pošta
Oznaka i klasa css=oznaka.klasa css=input.inputtext
Oznaka i atribut css=oznaka[atribut=vrijednost] css=unos[ime=prezime]
Oznaka, klasa i atribut css=tag.class[atribut=vrijednost] css=input.inputtext[tabindex=1]
Unutarnji tekst css=oznaka:sadrži(“tekst”) css=font:contains(“Lozinka:”)

Pitanja i odgovori

Da. CSS selektori se općenito izvršavaju brže od XPath-a jer preglednici izvorno obrađuju CSS pravila. Razlika je najuočljivija u starijim verzijama Internet Explorera, dok moderni preglednici poput Chromea i Firefox smanjiti jaz.

Da. CSS selektori napisani za Selenium IDE radi izravno u Selenium WebDriver putem By.cssSelector()Jedina je razlika što WebDriver ne zahtijeva prefiks "css=", budući da je tip lokatora određen samom metodom.

Ne. Firebug je ukinut 2017. nakon što je spojen u Firefox Alati za razvojne programere. Danas testeri koriste ugrađene alate za razvojne programere u Chromeu, Firefoxili Edge za pregled elemenata i validaciju CSS selektora prije njihovog dodavanja u Selenium skripte.

Da. Alati pokretani umjetnom inteligencijom poput Mabl-a i ChatGPT-a mogu predložiti CSS selektore analizom DOM-a. Smanjuju napore održavanja prilagođavanjem selektora kada programeri preimenuju klase ili restrukturiraju stranicu.

Samoobnavljajući mehanizmi pokretani umjetnom inteligencijom analiziraju okolni DOM i automatski se oporavljaju od oštećenih lokatora. Kada CSS selektor ne uspije, mehanizam identificira najbliži odgovarajući element koristeći sličnost atributa, tekstualni sadržaj i povijesne obrasce, vraćajući stabilnost testa.

Koristite uzorke djelomičnog podudaranja kao što su [id^="user_"] za prefikse, [id$="_btn"] za sufikse ili [id*="cart"] za podnizove. Ovi obrasci odgovaraju dinamički generiranim ID-ovima bez potrebe za točnom vrijednošću.

CSS selektori ne mogu prelaziti prema gore od podređenog elementa do njegovog roditelja i nude ograničenu podršku za podudaranje teksta. Za ove scenarije, XPath ostaje bolji izbor. CSS-u također nedostaju ugrađene funkcije za logiku srodnih elemenata osim susjednih i općih srodnih elemenata.

Otvorite DevTools u pregledniku, prebacite se na karticu Konzola i pokrenite document.querySelectorAll("your-selector")Vraćena lista čvorova prikazuje svaki odgovarajući element. Pouzdan Selenium lokator bi trebao vratiti točno jedan element za jedinstveno ciljanje.

Sažmite ovu objavu uz: