CSS-velger i Selenium

by: Krishna Rungta Krishna Rungta
Hours oppdatert

⚡ Smart oppsummering

CSS-velger i Selenium er en kraftig lokaliseringsstrategi som identifiserer elementer ved hjelp av HTML-tagger, ID-er, klasser, attributter og indre tekstmønstre. Denne ressursen forklarer alle CSS-selektortyper med trinnvise eksempler for Selenium SDI.

  • 🆔 Tagg og ID: Kombiner en HTML-tag med #-prefikset for å målrette elementer som har et unikt ID-attributt presist.
  • 🎯 Tagg og klasse: Bruk punktum (.)-syntaksen for å finne elementer som deler en CSS-klasse, noe som er nyttig for gjentatte UI-komponenter.
  • 🧩 Tagg og attributt: Bruk [attributt=verdi]-parenteser for å identifisere elementer gjennom navn, type eller et hvilket som helst tilpasset attributtpar.
  • 🪜 Tagg, klasse og attributt: Stable flere betingelser for å tydeliggjøre elementer som deler både klassenavn og attributtverdier.
  • 🔤 Indre tekstmatch: Bruk :contains(“text”)-mønsteret for å finne etiketter og elementer som mangler ID-er, navn eller klasser.
  • ✅ Beste praksis: Foretrekk stabile ID-er fremfor dypt nestede selektorer for å beholde Selenium automatiseringsskript som er motstandsdyktige mot endringer i brukergrensesnittet.
Les mer

CSS-velger i Selenium

Hva er en CSS-selektor i Selenium?

A CSS-velger i Selenium er et strengmønster som identifiserer et webelement gjennom en kombinasjon av HTML-tag, ID, klasse og attributter. CSS-selektorer er litt mer avanserte enn å finne etter ID eller navn, men de er den mest populære strategien blant erfarne Selenium brukere fordi de kan nå elementer som ikke har noen ID- eller navneattributt i det hele tatt.

CSS-velgere i Selenium finnes i mange former, men denne veiledningen fokuserer på de fem vanligste mønstrene som brukes i Selenium ID:

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

Når du bruker denne strategien i Selenium IDE, alltid prefiks Target boks med «css=«som vist i alle eksemplene nedenfor.»

Hvorfor bruke CSS-selektorer i Selenium?

CSS-selektorer er den foretrukne locator-strategien for mange Selenium automatiseringsingeniører fordi de balanserer hastighet, fleksibilitet og lesbarhet. Moderne webapplikasjoner bruker ofte dynamisk genererte ID-er eller fjerner navneattributter helt, noe som gjør at CSS-selektorer er den eneste pålitelige måten å målrette mot et bestemt element på siden.

De viktigste fordelene med å bruke CSS-selektorer inkluderer:

  • Ytelse: CSS-selektorer behandles av nettleserens innebygde motor, så de kjøres raskere enn tilsvarende XPath-uttrykk, spesielt i eldre nettlesere som Internet Explorer.
  • Fleksibilitet: De kombinerer tagg, klasse, attributt og delvis samsvarslogikk, slik at testere kan målrette elementer som mangler en stabil ID.
  • lesbarhet: Syntaksen speiler måten utviklere allerede skriver CSS-regler på, noe som forkorter læringskurven for både QA-ingeniører og front-end-team.
  • Stabilitet på tvers av nettlesere: CSS-selektorer oppfører seg konsekvent på tvers av Chrome, Firefox, Edge og Safari, noe som reduserer ustabile testfeil.

Tagg og ID – CSS-velger

Dette eksemplet bruker tekstboksen E-post på Facebook-innloggingssiden. Elementet har en ID på «emalje«, og den ble allerede åpnet i delen «Lokalisering etter ID». Nå målrettes det samme elementet ved hjelp av en Selenium CSS-velger med ID-attributtet.

syntax

css=tag#id

  • tag = HTML-koden til elementet som brukes
  • # = firkanttegnet, som alltid må være tilstede når man bruker en Selenium CSS-velger med ID
  • id = IDen til elementet som brukes

Husk at ID-en alltid innledes med et hash-tegn (#).

Trinn 1) naviger til www.facebook.comBruk nettleserens DevTools (eller et eldre verktøy som Firebug) til å se på tekstboksen «E-post eller telefon».

Legg merke til at HTML-taggen er «inngang« og ID-en er «emalje«. Den komplette CSS-velgeren blir derfor «css=input#e-post".

Tagg og ID - CSS-velger i Selenium

Trinn 2) Tast inn "css=input#e-post" inn i det Target eske med Selenium IDE og klikk på Finn-knappen. Selenium IDE fremhever det samsvarende elementet på siden.

Selenium IDE-utheving av e-postfelt via tagg og ID

Tagg og klasse – CSS-velger

En CSS-velger i Selenium som bruker en HTML-tag og et klassenavn følger samme idé som tag og ID, men et punktum (.) erstatter hash-tegnet.

syntax

css=tag.class

  • tag = HTML-koden til elementet som brukes
  • . = punktumtegnet, som alltid må være tilstede når man bruker en CSS-selektor med klasse
  • klasse = klassen til elementet som åpnes

Trinn 1) Åpne demosiden https://demo.guru99.com/test/facebook.html og sjekk tekstboksen «E-post eller telefon». Merk at HTML-taggen er «inngang" og klassen er "inndatatekst".

Tagg og klasse - CSS-velger i Selenium

Trinn 2) In Selenium IDE, skriv inn «css=input.inputtekst"I Target boksen og klikk Finn. Selenium IDE gjenkjenner tekstboksen E-post eller Telefon.

Selenium IDE-lokalisering av element etter tagg og klasse

Vær oppmerksom på at når flere elementer deler samme HTML-tag og klasse, gjenkjennes bare det første samsvarende elementet i kildekoden. Undersøk tekstboksen Passord på samme side, og legg merke til at den deler samme klasse som tekstboksen E-post eller Telefon.

Flere elementer som deler samme tagg og klasse

Bare tekstboksen E-post eller Telefon ble uthevet i den forrige illustrasjonen fordi den vises først i sidekilden.

Bestemmelse av rekkefølgen på sidens kilde Selenium kamp

Tagg og attributt – CSS-velger

Denne strategien kombinerer en HTML-tag med et spesifikt attributt som tilhører elementet du vil ha tilgang til.

syntax

css=tag[attribute=value]

  • tag = HTML-koden til elementet som brukes
  • [ og ] = hakeparenteser som omslutter attributtet og den tilhørende verdien
  • attributt = attributtet som skal brukes. Velg et som er unikt for elementet, for eksempel navn eller id.
  • verdi = den tilsvarende verdien til det valgte attributtet.

Trinn 1) Naviger til Mercury Registreringsside for turer https://demo.guru99.com/test/newtours/register.php og sjekk tekstboksen «Etternavn». Legg merke til HTML-taggen («input») og navneattributtet («lastName»).

Tagg og attributt - CSS-velger i Selenium

Trinn 2) In Selenium IDE, skriv inn «css=input[navn=etternavn]"I Target boksen og klikk Finn. Selenium IDE finner feltet Etternavn.

Selenium IDE lokaliserer etternavn via attributt

Når flere elementer deler samme HTML-tag og attributt, gjenkjennes bare det første. Oppførselen er identisk med å finne elementer med samme tagg og klasse.

RELATERTE ARTIKLER

Tagg, klasse og attributt – CSS-velger

syntax

css=tag.class[attribute=value]

  • tag = HTML-koden til elementet som brukes
  • . = punktumtegnet, som alltid må være tilstede når man bruker en CSS-selektor med klasse
  • klasse = klassen til elementet som åpnes
  • [ og ] = hakeparenteser som omslutter et bestemt attributt og dets tilhørende verdi
  • attributt = attributtet som skal brukes. Velg et som er unikt for elementet, for eksempel navn eller id.
  • verdi = den tilsvarende verdien til det valgte attributtet.

Trinn 1) Åpne demosiden https://demo.guru99.com/test/facebook.html og sjekk inndataboksene «E-post eller telefon» og «Passord». Legg merke til HTML-koden, klassen og attributtene deres. Dette eksemplet bruker «tabindex"attributtet.

Tag, klasse og attributt - CSS-velger

Trinn 2) Gå først til tekstboksen «E-post eller telefon» ved å bruke tabindeksverdien 1. Skriv inn «css=input.inputtext[tabindex=1]”Inn i Selenium IDE-er Target boksen og klikk på Søk. Feltet E-post eller Telefon er uthevet.

Selenium IDE-lokalisering av e-post etter tagg, klasse, attributt

Trinn 3) For å målrette Passord-inndataboksen, erstatt ganske enkelt tabindex-verdien. Skriv inn «css=input.inputtext[tabindex=2]"I Target boksen og klikk Finn. Selenium IDE finner tekstboksen Passord.

Selenium IDE-søk etter passord etter tagg, klasse, attributt

Indre tekst – CSS-velger

HTML-etiketter får sjelden id-, navn- eller klasseattributter. Så hvordan får du tilgang til dem i SeleniumSvaret ligger gjennom deres indre tekst. Indre tekster er de faktiske strengmønstrene som HTML-etiketten viser på siden.

syntax

css=tag:contains("inner text")

  • tag = HTML-koden til elementet som brukes
  • indre tekst = det synlige tekstinnholdet i elementet

Trinn 1) Naviger til Mercury Turens hjemmeside https://demo.guru99.com/test/newtours/ og sjekk etiketten «Passord». Legg merke til HTML-taggen («font» i dette tilfellet) og observer at elementet ikke har noen klasse-, id- eller navneattributter.

Indre tekst - CSS-selektorinspeksjon

Trinn 2) typen css=font:contains(“Passord:”) inn Selenium IDE-er Target boksen og klikk Finn. Selenium IDE finner passordetiketten som vist nedenfor.

Selenium IDE lokaliserer passordetikett ved hjelp av indre tekst

Trinn 3) Denne gangen, erstatt den indre teksten med «Boston» slik at Target blir «css=font:contains(“Boston”)Klikk på Finn. Etiketten «Boston til San Francisco» er uthevet, noe som viser at Selenium IDE kan finne en lang etikett selv om bare det første ordet i den indre teksten er oppgitt.

Selenium IDE delvis indre tekstsamsvar

CSS-velger kontra XPath i Selenium

Både CSS-selektorer og XPath brukes til å identifisere webelementer i Selenium, men de har forskjellige styrker. Tabellen nedenfor sammenligner de to lokaliseringsstrategiene basert på viktige dimensjoner:

Kriterier CSS -velger XPath
Speed Raskere, kjører på nettleserens innebygde motor Tregere, spesielt i eldre nettlesere
Lederskap Kun videresending (forelder til underordnet) Fremover og bakover (barn til forelder)
syntax Kortere og lik CSS-regler Lengre, hierarkiske baneuttrykk
Tekstmatching Begrenset til :contains() pseudoklasse Sterke tekst()- og inneholder()-funksjoner
Best for Statiske oppsett og moderne webapper Kompleks DOM-traversering og tekstbaserte lokaliseringsverktøy

Beste praksis for å skrive CSS-selektorer i Selenium

Å skrive pålitelige CSS-selektorer går utover å kjenne syntaksen. Følgende fremgangsmåter hjelper testere med å lage stabile, vedlikeholdbare Selenium skript som overlever endringer i brukergrensesnittet:

  1. Foretrekk unike egenskaper: Velg alltid id-, data-test-id- eller name-attributter som er eksplisitt lagt til for automatisering. Disse forblir stabile selv når det visuelle oppsettet endres.
  2. Unngå altfor nestede selektorer: Lange kjeder som f.eks. div > div > ul > li > a går lett i stykker når utviklere omstrukturerer markupen. Hold selektorene så korte som mulig.
  3. Bruk delvise treff klokt: Mønstre som [class*="btn-primary"] tolererer små endringer i klassenavn, men de kan også matche utilsiktede elementer.
  4. Unngå indeksbaserte lokatorer: Utvelgere som nth-child(3) er skjøre fordi det å legge til et søskenelement endrer hver posisjon.
  5. Valider selektorer i DevTools: Før du løper en Selenium skript, lim inn velgeren i Chrome DevTools-konsollen ved hjelp av document.querySelector() for å bekrefte at den returnerer nøyaktig ett element.
  6. Kombiner attributter for unikhet: Når en klasse deles av mange elementer, legg til et attributtfilter, for eksempel input.form-control[name="email"] å tydeliggjøre målet.
  7. Dokumenter og gjenbruk: Sentraliser selektorer i en Page Object-klasse slik at én enkelt oppdatering fikser hver test som refererer til det samme elementet.

Å følge disse retningslinjene reduserer ujevnhet, forbedrer testutførelseshastigheten og gjør Selenium suiter enklere å vedlikeholde over tid.

Sammendrag: Hurtigreferanse for CSS-selektorsyntaks

Tabellen nedenfor konsoliderer alle Selenium CSS-selektormønster dekket i denne veiledningen:

Metode Target syntax Eksempel
Tag og ID css=tag#id css=input#e-post
Tag og klasse css=tag.klasse css=input.inputtekst
Tag og attributt css=tag[attribute=verdi] css=input[navn=etternavn]
Tag, klasse og attributt css=tag.class[attribute=verdi] css=input.inputtext[tabindex=1]
Indre tekst css=tag:inneholder(“tekst”) css=font:contains(“Passord:”)

Spørsmål og svar

Ja. CSS-selektorer kjører vanligvis raskere enn XPath fordi nettlesere behandler CSS-regler innebygd. Forskjellen er mest merkbar i eldre versjoner av Internet Explorer, mens moderne nettlesere som Chrome og Firefox begrense gapet.

Ja. CSS-selektorer skrevet for Selenium IDE fungerer direkte i Selenium WebDriver gjennom By.cssSelector()Den eneste forskjellen er at WebDriver ikke krever prefikset «css=", siden locator-typen er spesifisert av selve metoden.

Nei. Firebug ble avviklet i 2017 etter å ha blitt slått sammen med Firefox Utviklerverktøy. I dag bruker testere de innebygde utviklerverktøyene i Chrome, Firefox, eller Edge for å inspisere elementer og validere CSS-selektorer før de legges til Selenium skript.

Ja. AI-drevne verktøy som Testim, Mabl og ChatGPT kan foreslå CSS-selektorer ved å analysere DOM-en. De reduserer vedlikeholdsarbeidet ved å tilpasse selektorer når utviklere gir nytt navn til klasser eller omstrukturerer siden.

AI-drevne selvreparerende motorer analyserer den omkringliggende DOM-en og gjenoppretter automatisk fra ødelagte locatorer. Når en CSS-selektor feiler, identifiserer motoren det nærmest samsvarende elementet ved hjelp av attributtlikhet, tekstinnhold og historiske mønstre, og gjenoppretter dermed teststabilitet.

Bruk delvise samsvarsmønstre som [id^="user_"] for prefikser, [id$="_btn"] for suffikser, eller [id*="cart"] for delstrenger. Disse mønstrene samsvarer med dynamisk genererte ID-er uten å kreve en nøyaktig verdi.

CSS-selektorer kan ikke bevege seg oppover fra et underordnet element til det overordnede, og de tilbyr begrenset støtte for tekstmatching. For disse scenariene er XPath fortsatt det beste valget. CSS mangler også innebygde funksjoner for søskenlogikk utover tilstøtende og generelle søsken.

Åpne nettleserens DevTools, bytt til Konsoll-fanen og kjør document.querySelectorAll("your-selector")Den returnerte NodeList viser alle samsvarende elementer. En pålitelig Selenium Lokatoren skal returnere nøyaktig ett element for unik målretting.

Oppsummer dette innlegget med: