CSS-vælger i Selenium

Af: Krishna Rungta Krishna Rungta
Hours Opdateret

⚡ Smart opsummering

CSS-vælger i Selenium er en effektiv lokaliseringsstrategi, der identificerer elementer ved hjælp af HTML-tags, ID'er, klasser, attributter og indre tekstmønstre. Denne ressource forklarer alle CSS-selektortyper med trinvise eksempler på Selenium SDI.

  • 🆔 Mærke og ID: Kombinér et HTML-tag med præfikset # for præcist at målrette elementer, der har en unik ID-attribut.
  • 🎯 Mærke og klasse: Brug punktum (.)-syntaksen til at finde elementer, der deler en CSS-klasse, hvilket er nyttigt til gentagne UI-komponenter.
  • 🧩 Tag og attribut: Anvend [attribut=værdi]-parenteser til at identificere elementer via navn, type eller et hvilket som helst brugerdefineret attributpar.
  • 🪜 Tag, klasse og attribut: Stable flere betingelser for at tydeliggøre elementer, der deler både klassenavne og attributværdier.
  • 🔤 Indre tekstmatch: Brug mønsteret :contains("text") til at finde etiketter og elementer, der mangler ID'er, navne eller klasser.
  • ✅ Bedste praksis: Foretræk stabile ID'er frem for dybt indlejrede selektorer for at bevare Selenium automatiseringsscripts, der er modstandsdygtige over for ændringer i brugergrænsefladen.
Læs mere

CSS-vælger i Selenium

Hvad er en CSS-selektor i Selenium?

A CSS-vælger i Selenium er et strengmønster, der identificerer et webelement gennem en kombination af HTML-tag, id, klasse og attributter. CSS-selektorer er lidt mere avancerede end at finde efter ID eller navn, men de er den mest populære strategi blandt erfarne Selenium brugere, fordi de kan nå elementer, der slet ikke har nogen ID- eller navneattribut.

CSS-vælgere i Selenium findes i mange former, men denne guide fokuserer på de fem mest almindelige mønstre, der bruges i Selenium SDI:

  • Tag og ID
  • Tag og klasse
  • Tag og attribut
  • Tag, klasse og attribut
  • Indre tekst

Når man bruger denne strategi i Selenium IDE, altid præfiks for Target boks med "css=" som vist i hvert eksempel nedenfor.

Hvorfor bruge CSS-selektorer i Selenium?

CSS-selektorer er den foretrukne lokationsstrategi for mange Selenium automatiseringsingeniører, fordi de balancerer hastighed, fleksibilitet og læsbarhed. Moderne webapplikationer bruger ofte dynamisk genererede ID'er eller fjerner navneattributter helt, hvilket efterlader CSS-selektorer som den eneste pålidelige måde at målrette mod et specifikt element på siden.

De vigtigste fordele ved at bruge CSS-selektorer inkluderer:

  • Ydelse: CSS-selektorer behandles af browserens native motor, så de udføres hurtigere end tilsvarende XPath-udtryk, især i ældre browsere som f.eks. Internet Explorer.
  • Fleksibilitet: De kombinerer tag, klasse, attribut og delvis match-logik, hvilket giver testere mulighed for at målrette elementer, der mangler et stabilt ID.
  • Læsbarhed: Syntaksen afspejler den måde, udviklere allerede skriver CSS-regler på, hvilket forkorter læringskurven for både QA-ingeniører og front-end-teams.
  • Stabilitet på tværs af browsere: CSS-vælgere fungerer ensartet på tværs af Chrome, Firefox, Edge og Safari, hvilket reducerer ustabile testfejl.

Tag og ID – CSS-vælger

Dette eksempel bruger tekstfeltet E-mail på Facebooks loginside. Elementet har ID'et "e-mail", og det blev allerede tilgået i afsnittet "Lokering via ID". Nu målrettes det samme element ved hjælp af en Selenium CSS-vælger med ID-attributten.

Syntaks

css=tag#id

  • tag = HTML-tagget for det element, der tilgås
  • # = hashtegnet, som altid skal være til stede, når man bruger en Selenium CSS-vælger med ID
  • id = ID'et for det element, der tilgås

Husk, at ID'et altid indledes med et hash-tegn (#).

Trin 1) Naviger til www.facebook.comBrug din browsers DevTools (eller et ældre værktøj som f.eks. Firebug) til at undersøge tekstfeltet "E-mail eller telefon".

Bemærk at HTML-tagget er "indgang" og dens ID er "e-mail". Den komplette CSS-vælger bliver derfor til "css=input#e-mail".

Tag og id - CSS-vælger i Selenium

Trin 2) Gå ind "css=input#e-mail" ind i Target kasse med Selenium IDE og klik på knappen Find. Selenium IDE fremhæver det matchende element på siden.

Selenium IDE fremhæver e-mailfelt via tag og ID

Tag og klasse – CSS-vælger

En CSS-vælger i Selenium der bruger et HTML-tag og et klassenavn følger den samme idé som tag og ID, men et punktum (.) erstatter hashtegnet.

Syntaks

css=tag.class

  • tag = HTML-tagget for det element, der tilgås
  • . = punktumtegnet, som altid skal være til stede, når en CSS-selektor med klasse bruges
  • klasse = klassen for det element, der tilgås

Trin 1) Åbn demosiden https://demo.guru99.com/test/facebook.html og undersøg tekstfeltet "E-mail eller telefon". Bemærk, at HTML-tagget er "indgang" og dens klasse er "inputtekst".

Tag og klasse - CSS-vælger i Selenium

Trin 2) In Selenium IDE, indtast “css=input.inputtekst"I Target boksen og klik på Find. Selenium IDE genkender tekstfeltet E-mail eller Telefon.

Selenium IDE-lokalisering af element efter tag og klasse

Bemærk, at når flere elementer deler det samme HTML-tag og den samme klasse, genkendes kun det første matchende element i kildekoden. Undersøg tekstfeltet Adgangskode på samme side, og bemærk, at det deler samme klasse som tekstfeltet E-mail eller Telefon.

Flere elementer deler samme tag og klasse

Kun tekstfeltet E-mail eller Telefon var fremhævet i den forrige illustration, fordi det vises først i sidekilden.

Bestemmelse af rækkefølgen af ​​sidernes kilde Selenium match

Tag og attribut – CSS-vælger

Denne strategi kombinerer et HTML-tag med en specifik attribut, der tilhører det element, du vil have adgang til.

Syntaks

css=tag[attribute=value]

  • tag = HTML-tagget for det element, der tilgås
  • [ og ] = firkantede parenteser, der omslutter attributten og dens tilsvarende værdi
  • attribut = den attribut, der skal bruges. Vælg en, der er unik for elementet, f.eks. navn eller id.
  • værdi = den tilsvarende værdi af den valgte attribut.

Trin 1) Naviger til Mercury Tilmeldingsside for ture https://demo.guru99.com/test/newtours/register.php og undersøg tekstfeltet "Efternavn". Bemærk HTML-tagget ("input") og navneattributten ("lastName").

Tag og attribut - CSS-vælger i Selenium

Trin 2) In Selenium IDE, indtast “css=input[navn=efternavn]"I Target boksen og klik på Find. Selenium IDE har fundet feltet Efternavn.

Selenium IDE lokaliserer efternavn via attribut

Når flere elementer deler det samme HTML-tag og den samme attribut, genkendes kun det første. Opførslen er identisk med at finde elementer med samme tag og klasse.

RELATEREDE ARTIKLER

Tag, klasse og attribut – CSS-vælger

Syntaks

css=tag.class[attribute=value]

  • tag = HTML-tagget for det element, der tilgås
  • . = punktumtegnet, som altid skal være til stede, når en CSS-selektor med klasse bruges
  • klasse = klassen for det element, der tilgås
  • [ og ] = firkantede parenteser, der omslutter en specifik attribut og dens tilsvarende værdi
  • attribut = den attribut, der skal bruges. Vælg en, der er unik for elementet, f.eks. navn eller id.
  • værdi = den tilsvarende værdi af den valgte attribut.

Trin 1) Åbn demosiden https://demo.guru99.com/test/facebook.html og undersøg inputfelterne "E-mail eller telefon" og "Adgangskode". Bemærk deres HTML-tag, klasse og attributter. Dette eksempel bruger "faneindeks"attributten."

Tag, klasse og attribut - CSS-vælger

Trin 2) Få adgang til tekstfeltet "E-mail eller telefon" først ved at bruge en tabindex-værdi på 1. Indtast "css=input.inputtekst[tabindex=1]" ind i Selenium IDE'er Target feltet og klik på Søg. Feltet E-mail eller Telefon er fremhævet.

Selenium IDE lokaliserer e-mail efter tag, klasse, attribut

Trin 3) For at målrette indtastningsfeltet Adgangskode skal du blot erstatte tabindex-værdien. Indtast “css=input.inputtekst[tabindex=2]"I Target boksen og klik på Find. Selenium IDE har fundet tekstfeltet Adgangskode.

Selenium IDE-lokalisering af adgangskode efter tag, klasse, attribut

Indre tekst – CSS-vælger

HTML-etiketter får sjældent id-, navn- eller klasseattributter. Så hvordan får du adgang til dem i SeleniumSvaret ligger gennem deres indre tekst. Indre tekster er de faktiske strengmønstre, som HTML-etiketten viser på siden.

Syntaks

css=tag:contains("inner text")

  • tag = HTML-tagget for det element, der tilgås
  • indre tekst = elementets synlige tekstindhold

Trin 1) Naviger til Mercury Tours hjemmeside https://demo.guru99.com/test/newtours/ og undersøg etiketten "Adgangskode". Bemærk dens HTML-tag ("font" i dette tilfælde), og observer, at elementet ikke har nogen klasse-, id- eller navneattributter.

Indre tekst - CSS Selector inspektion

Trin 2) Type css=font:contains(“Adgangskode:”) ind Selenium IDE'er Target boksen og klik på Find. Selenium IDE finder adgangskodemærkatet som vist nedenfor.

Selenium IDE lokaliserer adgangskodemærkat via indre tekst

Trin 3) Denne gang skal du erstatte den indre tekst med "Boston", så Target bliver “css=font:indeholder(“Boston”)". Klik på Find. Etiketten "Boston til San Francisco" er fremhævet, hvilket viser, at Selenium IDE kan finde en lang etiket, selv når kun det første ord i dens indre tekst angives.

Selenium IDE delvis indre tekstmatch

CSS-selektor vs. XPath i Selenium

Både CSS Selectors og XPath bruges til at identificere webelementer i Selenium, men de har forskellige styrker. Tabellen nedenfor sammenligner de to lokaliseringsstrategier på nøgledimensioner:

Kriterier CSS-vælger XPath
Speed Hurtigere, kører på browserens native motor Langsommere, især i ældre browsere
Lederskab Kun videresendelse (forælder til underordnet) Frem og tilbage (barn til forælder)
Syntaks Kortere og ligner CSS-regler Længere, hierarkiske stiudtryk
Tekstmatchning Begrænset til :contains() pseudoklasse Stærke text()- og contains()-funktioner
Bedste for Statiske layouts og moderne webapps Kompleks DOM-traversering og tekstbaserede lokaliseringsværktøjer

De bedste fremgangsmåder til at skrive CSS-selektorer i Selenium

At skrive pålidelige CSS-selektorer går ud over at kende syntaksen. Følgende fremgangsmåder hjælper testere med at skabe stabile, vedligeholdelige Selenium scripts, der overlever ændringer i brugergrænsefladen:

  1. Foretrækker unikke egenskaber: Vælg altid id-, data-test-id- eller name-attributter, der eksplicit tilføjes til automatisering. Disse forbliver stabile, selv når det visuelle layout ændres.
  2. Undgå overindlejrede selektorer: Lange kæder som f.eks. div > div > ul > li > a går let i stykker, når udviklere omstrukturerer markup'en. Hold selektorerne så korte som muligt.
  3. Brug delvise matches klogt: Mønstre som f.eks. [class*="btn-primary"] tolererer små ændringer af klassenavne, men de kan også matche utilsigtede elementer.
  4. Undgå indeksbaserede lokatorer: Udvælgere som nth-child(3) er skrøbelige, fordi tilføjelse af et søskendeelement flytter alle positioner.
  5. Valider selektorer i DevTools: Før du løber en Selenium script, indsæt vælgeren i Chrome DevTools-konsollen ved hjælp af document.querySelector() for at bekræfte, at den returnerer præcis ét element.
  6. Kombinér attributter for unikhed: Når en klasse deles af mange elementer, skal du tilføje et attributfilter, f.eks. input.form-control[name="email"] at tydeliggøre målet.
  7. Dokumentér og genbrug: Centraliser selektorer i en Page Object-klasse, så en enkelt opdatering retter hver test, der refererer til det samme element.

At følge disse retningslinjer reducerer ujævnheder, forbedrer testudførelseshastigheden og gør Selenium suiter nemmere at vedligeholde over tid.

Resumé: Hurtig reference til CSS-selektorsyntaks

Tabellen nedenfor konsoliderer alle Selenium CSS Selector-mønster dækket i denne vejledning:

Metode Target Syntaks Eksempel
Tag og ID css=tag#id css=input#e-mail
Tag og klasse css=tag.klasse css=input.inputtekst
Tag og attribut css=tag[attribut=værdi] css=input[navn=efternavn]
Tag, klasse og attribut css=tag.klasse[attribut=værdi] css=input.inputtekst[tabindex=1]
Indre tekst css=tag:indeholder(“tekst”) css=font:contains(“Adgangskode:”)

Ofte Stillede Spørgsmål

Ja. CSS-selektorer kører generelt hurtigere end XPath, fordi browsere behandler CSS-regler indbygget. Forskellen er mest mærkbar i ældre versioner af Internet Explorer, mens moderne browsere som Chrome og ... Firefox indsnævre kløften.

Ja. CSS-selektorer skrevet til Selenium IDE arbejder direkte i Selenium WebDriver gennem By.cssSelector()Den eneste forskel er, at WebDriver ikke kræver præfikset "css=", da locatortypen er angivet af selve metoden.

Nej. Firebug blev afviklet i 2017 efter at være blevet fusioneret med Firefox Udviklerværktøjer. I dag bruger testere de indbyggede DevTools i Chrome, Firefoxeller Edge for at inspicere elementer og validere CSS-selektorer, før de tilføjes til Selenium scripts.

Ja. AI-drevne værktøjer som f.eks. Testim, Mabl og ChatGPT kan foreslå CSS-selektorer ved at analysere DOM'en. De reducerer vedligeholdelsesindsatsen ved at tilpasse selektorer, når udviklere omdøber klasser eller omstrukturerer siden.

AI-drevne selvreparerende motorer analyserer den omgivende DOM og gendanner automatisk fra defekte locators. Når en CSS Selector fejler, identificerer motoren det nærmeste matchende element ved hjælp af attributlighed, tekstindhold og historiske mønstre, hvilket genopretter teststabiliteten.

Brug delvise matchmønstre som f.eks. [id^="user_"] for præfikser, [id$="_btn"] for suffikser, eller [id*="cart"] for delstrenge. Disse mønstre matcher dynamisk genererede ID'er uden at kræve en nøjagtig værdi.

CSS-selektorer kan ikke bevæge sig opad fra et underordnet element til dets overordnede, og de tilbyder begrænset understøttelse af tekstmatchning. I disse scenarier er XPath stadig det bedre valg. CSS mangler også indbyggede funktioner til søskendelogik ud over tilstødende og generelle søskende.

Åbn browserens DevTools, skift til fanen Konsol, og kør document.querySelectorAll("your-selector")Den returnerede NodeList viser alle matchende elementer. En pålidelig Selenium Locatoren skal returnere præcis ét element for unik målretning.

Opsummer dette indlæg med: