CSS-i valija sisse Selenium

Autor: Krishna Rungta Krishna Rungta
Hours Ajakohastatud

⚡ Nutikas kokkuvõte

CSS-i valija sisse Selenium on võimas lokaliseerimisstrateegia, mis tuvastab elemente HTML-siltide, ID-de, klasside, atribuutide ja sisemiste tekstimustrite abil. See ressurss selgitab iga CSS-i valija tüüpi samm-sammult näidetega. Selenium SDI.

  • 🆔 Silt ja ID: Kombineeri HTML-märgend eesliitega #, et sihtida täpselt elemente, millel on unikaalne ID-atribuut.
  • 🎯 Silt ja klass: Kasutage punkti (.) süntaksit CSS-klassi jagavate elementide leidmiseks, mis on kasulik korduvate kasutajaliidese komponentide puhul.
  • 🧩 Silt ja atribuut: Rakenda nurksulge [attribute=value] elementide identifitseerimiseks nime, tüübi või mis tahes kohandatud atribuudipaari järgi.
  • 🪜 Silt, klass ja atribuut: Kombineeri mitu tingimust, et eristada elemente, millel on nii klassinimed kui ka atribuudiväärtused.
  • 🔤 Sisemise teksti vaste: ID-de, nimede või klassideta siltide ja elementide leidmiseks kasutage mustrit :contains(“text”).
  • ✅ Parim harjutus: Eelista stabiilseid ID-sid sügavalt pesastatud selektorite asemel, et säilitada Selenium automatiseerimisskriptid on kasutajaliidese muudatuste suhtes vastupidavad.
Loe rohkem

CSS-i valija sisse Selenium

Mis on CSS-i valija? Selenium?

A CSS-i valija sisse Selenium on stringimuster, mis tuvastab veebielemendi HTML-sildi, ID, klassi ja atribuutide kombinatsiooni abil. CSS-selektorid on veidi keerukamad kui ID või nime järgi otsimine, kuid kogenud kasutajate seas on need kõige populaarsemad strateegiad. Selenium kasutajad, sest nad pääsevad ligi elementidele, millel puudub üldse ID või Name atribuut.

CSS-i valijad sisse Selenium esinevad mitmel kujul, kuid see juhend keskendub viiele kõige levinumale mustrile, mida kasutatakse Selenium SDI:

  • Silt ja ID
  • Silt ja klass
  • Silt ja atribuut
  • Silt, klass ja atribuut
  • Sisemine tekst

Selle strateegia kasutamisel Selenium IDE, lisage alati eesliide Target kast sõnaga „css="nagu on näidatud igas allpool toodud näites.

Miks kasutada CSS-i selektoreid Selenium?

CSS-selektorid on paljude jaoks eelistatud lokaliseerimisstrateegia Selenium automatiseerimisinsenerid, sest nad tasakaalustavad kiiruse, paindlikkuse ja loetavuse. Kaasaegsed veebirakendused kasutavad sageli dünaamiliselt genereeritud ID-sid või eemaldavad nimeatribuudid täielikult, jättes CSS-selektorid ainsaks usaldusväärseks viisiks lehe konkreetse elemendi sihtimiseks.

CSS-selektorite kasutamise peamised eelised on järgmised:

  • Performance: CSS-selektoreid töötleb brauseri enda mootor, seega täidavad need kiiremini kui samaväärsed XPath-avaldised, eriti vanemates brauserites, näiteks Internet Exploreris.
  • Paindlikkus: Need ühendavad sildi, klassi, atribuudi ja osalise vaste loogika, võimaldades testijatel sihtida elemente, millel puudub stabiilne ID.
  • Loetavus: Süntaks peegeldab seda, kuidas arendajad juba CSS-i reegleid kirjutavad, mis lühendab nii kvaliteedikontrolli inseneride kui ka esiotsa meeskondade õppimiskõverat.
  • Brauseriteülene stabiilsus: CSS-selektorid käituvad Chrome'is ühtlaselt, Firefox, Edge'i ja Safarit, vähendades ebaühtlaseid testitõrkeid.

Silt ja ID – CSS-i valija

Selles näites kasutatakse Facebooki sisselogimislehel tekstikasti „Email”. Elemendi ID on „e-mail„ja sellele oli juba juurdepääs jaotises „Asukoha määramine ID järgi“. Nüüd on sama element suunatud a abil Selenium CSS-valija ID atribuudiga.

Süntaks

css=tag#id

  • tag = juurdepääsetava elemendi HTML-märgend
  • # = räsimärk, mis peab alati olema, kui kasutate Selenium CSS-i valija ID-ga
  • id = juurdepääsetava elemendi ID

Pidage meeles, et ID-le eelneb alati räsimärk (#).

Step 1) Liigu www.facebook.com. Kontrollige oma brauseri DevToolsi (või mõne vanema tööriista, näiteks Firebugi) abil tekstikasti „E-post või telefon”.

Pane tähele, et HTML-märgend on „sisend" ja selle ID on "e-mail„. Täielik CSS-i valija saab seega „css=sisend#e-post".

Silt ja ID - CSS-i valija Selenium

Step 2) Sisenema "css=sisend#e-post" sisse Target kast Selenium IDE ja klõpsake nuppu Otsi. Selenium IDE tõstab lehel esile sobiva elemendi.

Selenium IDE esiletõstmine e-posti väljal sildi ja ID kaudu

Silt ja klass – CSS-i valija

CSS-valija Selenium mis kasutab HTML-silti ja klassi nime, järgib sama ideed mis silt ja ID, aga räsi asendab punkt (.).

Süntaks

css=tag.class

  • tag = juurdepääsetava elemendi HTML-märgend
  • . = punktimärk, mis peab alati olema olemas CSS-i valija kasutamisel klassiga
  • klass = juurdepääsetava elemendi klass

Step 1) Ava demoleht https://demo.guru99.com/test/facebook.html ja kontrollige tekstikasti „E-post või telefon”. Pange tähele, et HTML-märgend on „sisend" ja selle klass on "sisestatud tekst".

Silt ja klass - CSS-i valija Selenium

Step 2) In Selenium IDE-sse sisestage „css=input.inputtext"Kohta Target kasti ja klõpsake nuppu Otsi. Selenium IDE tunneb ära tekstikasti E-post või Telefon.

Selenium IDE elemendi asukoha määramine sildi ja klassi järgi

Pane tähele, et kui mitu elementi jagavad sama HTML-silti ja klassi, tuvastatakse ainult esimene sobiv element lähtekoodis. Kontrollige samal lehel olevat tekstikasti „Parool” ja pange tähele, et see jagab sama klassi tekstikastiga „E-post” või „Telefon”.

Mitu elementi, millel on sama silt ja klass

Eelmisel illustratsioonil oli esile tõstetud ainult tekstiväli „E-post” või „Telefon”, kuna see kuvatakse lehe lähtekoodis esimesena.

Lehe allika järjekorra määramine Selenium vastama

Silt ja atribuut – CSS-i valija

See strateegia ühendab HTML-sildi kindla atribuudiga, mis kuulub elemendile, millele soovite juurde pääseda.

Süntaks

css=tag[attribute=value]

  • tag = juurdepääsetava elemendi HTML-märgend
  • [ ja ] = nurksulud, mis ümbritsevad atribuuti ja selle vastavat väärtust
  • attribute = kasutatav atribuut. Valige elemendi jaoks unikaalne atribuut, näiteks nimi või ID.
  • väärtus = valitud atribuudi vastav väärtus.

Step 1) Liikuge Mercury Ekskursioonide registreerimisleht https://demo.guru99.com/test/newtours/register.php ja kontrollige tekstikasti „Perekonnanimi“. Pange tähele selle HTML-silti („input“) ja nime atribuuti („lastName“).

Silt ja atribuut - CSS-i valija Selenium

Step 2) In Selenium IDE-sse sisestage „css=sisend[nimi=perenimi]"Kohta Target kasti ja klõpsake nuppu Otsi. Selenium IDE leiab edukalt perekonnanime välja.

Selenium IDE leiab perekonnanime atribuudi abil

Kui mitu elementi jagavad sama HTML-silti ja atribuuti, tuvastatakse ainult esimene. Käitumine on identne sama sildi ja klassiga elementide leidmisega.

SEOTUD ARTIKLID

Silt, klass ja atribuut – CSS-i valija

Süntaks

css=tag.class[attribute=value]

  • tag = juurdepääsetava elemendi HTML-märgend
  • . = punktimärk, mis peab alati olema olemas CSS-i valija kasutamisel klassiga
  • klass = juurdepääsetava elemendi klass
  • [ ja ] = nurksulud, mis ümbritsevad konkreetset atribuuti ja selle vastavat väärtust
  • attribute = kasutatav atribuut. Valige elemendi jaoks unikaalne atribuut, näiteks nimi või ID.
  • väärtus = valitud atribuudi vastav väärtus.

Step 1) Ava demoleht https://demo.guru99.com/test/facebook.html ja kontrollige sisestuskaste „E-post või telefon“ ja „Parool“. Pange tähele nende HTML-märgendit, klassi ja atribuute. Selles näites kasutatakse „tabindex"atribuut".

Silt, klass ja atribuut – CSS Selector

Step 2) Ava esmalt tekstiväli „E-post või telefon”, kasutades tabindexi väärtust 1. Sisesta „css=input.inputtext[tabindex=1]”Sisse Selenium IDE-d Target ja klõpsake nuppu „Otsi“. E-posti või telefoni väli on esile tõstetud.

Selenium IDE leiab e-posti sildi, klassi või atribuudi järgi

Step 3) Parooli sisestamise väljale sihtimiseks asenda lihtsalt tabindexi väärtus. Sisestage „css=input.inputtext[tabindex=2]"Kohta Target kasti ja klõpsake nuppu Otsi. Selenium IDE leiab edukalt parooli tekstikasti.

Selenium IDE leiab parooli sildi, klassi või atribuudi järgi

Sisemine tekst – CSS-i valija

HTML-i siltidele antakse harva atribuute id, name või class. Kuidas neile siis ligi pääseda? SeleniumVastus peitub nende sisemises tekstis. Sisemised tekstid on tegelikud stringimustrid, mida HTML-i silt lehel kuvab.

Süntaks

css=tag:contains("inner text")

  • tag = juurdepääsetava elemendi HTML-märgend
  • sisemine tekst = elemendi nähtav tekstisisu

Step 1) Liikuge Mercury Ekskursioonide koduleht https://demo.guru99.com/test/newtours/ ja kontrollige silti „Password“ (parool). Pange tähele selle HTML-silti (antud juhul „font“) ja veenduge, et elemendil puuduvad atribuudid class (klass), id (id) või name (nimi).

Sisemine tekst - CSS-i valija kontroll

Step 2) KASUTUSALA css=font:contains("Parool:") sisse Selenium IDE-d Target kasti ja klõpsake nuppu Otsi. Selenium IDE leiab paroolisildi, nagu allpool näidatud.

Selenium IDE leiab paroolisildi sisemise teksti järgi

Step 3) Seekord asenda sisemine tekst sõnaga „Boston“, nii et Target saab "css=font:sisaldab("Boston")„. Klõpsake nuppu „Otsi”. Silt „Bostonist San Franciscosse” on esile tõstetud, mis näitab, et Selenium IDE suudab leida pika sildi isegi siis, kui selle sisemisest tekstist on esitatud ainult esimene sõna.

Selenium IDE osaline sisemise teksti vaste

CSS-i valija vs XPath Selenium

Veebielementide tuvastamiseks kasutatakse nii CSS-i selektoreid kui ka XPathi. Selenium, kuid neil on erinevad tugevused. Allolev tabel võrdleb kahte lokaliseerimisstrateegiat põhimõõtmetes:

Kriteeriumid CSS-i valija XPath
Kiirus Kiirem, töötab brauseri oma mootoril Aeglasem, eriti vanemates brauserites
Eestvedamine Ainult edasi (vanemast lapsele) Edasi ja tagasi (lapsest vanemale)
Süntaks Lühem ja sarnane CSS-i reeglitega Pikemad, hierarhilised teeavaldised
Teksti sobitamine Piiratud pseudoklassiga :contains() Tugevad text() ja contains() funktsioonid
Parim on Staatilised paigutused ja kaasaegsed veebirakendused Kompleksne DOM-i läbimine ja tekstipõhised lokaatorid

CSS-selektorite kirjutamise parimad tavad Selenium

Usaldusväärsete CSS-selektorite kirjutamine hõlmab enamat kui lihtsalt süntaksi tundmist. Järgmised tavad aitavad testijatel luua stabiilseid ja hooldatavaid Selenium skriptid, mis jäävad kasutajaliidese muudatustesse alles:

  1. Eelista unikaalseid omadusi: Vali alati atribuudid id, data-test-id või name, mis on automatiseerimiseks selgesõnaliselt lisatud. Need jäävad stabiilseks isegi siis, kui visuaalne paigutus muutub.
  2. Väldi liiga pesastatud selektoreid: Pikad ketid, näiteks div > div > ul > li > a katki minna, kui arendajad märgistust ümber faktoriseerivad. Hoia selektorid võimalikult lühikesed.
  3. Kasutage osalisi vasteid targalt: Mustrid nagu [class*="btn-primary"] taluvad väikeseid klassinime muudatusi, kuid need võivad sobida ka soovimatute elementidega.
  4. Vältige indeksipõhiseid lokaatoreid: Valijad nagu nth-child(3) on habras, sest õe- ja vennaelemendi lisamine nihutab iga positsiooni.
  5. Valijate valideerimine DevToolsis: Enne jooksmist a Selenium skripti jaoks kleepige valija Chrome DevToolsi konsooli, kasutades document.querySelector() et kinnitada, et see tagastab täpselt ühe elemendi.
  6. Atribuutide kombineerimine unikaalsuse saavutamiseks: Kui klassi jagavad paljud elemendid, lisage atribuudifilter, näiteks input.form-control[name="email"] sihtmärgi üheselt mõistetavaks tegemiseks.
  7. Dokumenteerimine ja taaskasutamine: Tsentraliseeri selektorid Page Object klassi sees nii, et üks uuendus parandaks iga testi, mis viitab samale elemendile.

Nende juhiste järgimine vähendab ebastabiilsust, parandab testide sooritamise kiirust ja muudab Selenium sviite on aja jooksul lihtsam hooldada.

Kokkuvõte: CSS-i valija süntaksi kiirjuhend

Allolev tabel koondab kõik Selenium Selles juhendis käsitletud CSS-i valiku muster:

Meetod Target Süntaks Näide
Silt ja ID css=tag#id css=sisend#e-post
Silt ja klass css=tag.klass css=input.inputtext
Silt ja atribuut css=silt[atribuut=väärtus] css=sisend[nimi=perenimi]
Silt, klass ja atribuut css=tag.class[attribute=value] css=input.inputtext[tabindex=1]
Sisemine tekst css=tag:sisaldab(“tekst”) css=font:contains("Parool:")

KKK

Jah. CSS-selektorid töötavad üldiselt kiiremini kui XPath, kuna brauserid töötlevad CSS-reegleid natiivselt. Erinevus on kõige märgatavam Internet Exploreri vanemates versioonides, samas kui tänapäevased brauserid, nagu Chrome ja Firefox lõhet vähendada.

Jah. CSS-selektorid on kirjutatud ... jaoks Selenium IDE töötab otse Selenium WebDriver läbi By.cssSelector()Ainus erinevus on see, et WebDriver ei vaja eesliidet „css=”, kuna lokaatori tüübi määrab meetod ise.

Ei. Firebugi tootmine lõpetati 2017. aastal pärast selle ühendamist ettevõttega Firefox Arendaja tööriistad. Tänapäeval kasutavad testijad Chrome'i sisseehitatud DevToolsi, Firefoxvõi Edge'i abil elementide kontrollimiseks ja CSS-selektorite valideerimiseks enne nende lisamist Selenium skripte.

Jah. Tehisintellektil põhinevad tööriistad, näiteks Testim, Mabl ja ChatGPT saavad DOM-i analüüsides soovitada CSS-selektoreid. Need vähendavad hooldustööd, kohandades selektoreid, kui arendajad klasse ümber nimetavad või lehte ümber struktureerivad.

Tehisintellektil põhinevad isetervendavad mootorid analüüsivad ümbritsevat DOM-i ja taastuvad automaatselt vigastest lokaatoritest. Kui CSS-selektor ebaõnnestub, tuvastab mootor atribuutide sarnasuse, tekstisisu ja ajalooliste mustrite abil lähima sobiva elemendi, taastades testi stabiilsuse.

Kasutage osalise vaste mustreid, näiteks [id^="user_"] eesliidete puhul [id$="_btn"] järelliidete puhul või [id*="cart"] alamstringide jaoks. Need mustrid vastavad dünaamiliselt genereeritud ID-dele ilma täpse väärtuseta.

CSS-i selektorid ei saa liikuda ülespoole lapseelemendist selle ülemelemendini ja pakuvad piiratud teksti sobitamise tuge. Selliste stsenaariumide korral on XPath endiselt parem valik. CSS-is puuduvad ka sisseehitatud funktsioonid sugulusloogika jaoks peale külgnevate ja üldiste sugulus-õdede-vendade.

Ava brauseri DevTools, lülita vahekaardile Console ja käivita see. document.querySelectorAll("your-selector")Tagastatud NodeList näitab kõiki sobivaid elemente. Usaldusväärne Selenium unikaalse sihtimise korral peaks lokaator tagastama täpselt ühe elemendi.

Võta see postitus kokku järgmiselt: