CSS-valitsin sisään Selenium

by: Krishna Rungta Krishna Rungta
Hours Päivitetty

⚡ Älykäs yhteenveto

CSS-valitsin sisään Selenium on tehokas paikannusstrategia, joka tunnistaa elementit HTML-tageilla, ID:illä, luokilla, attribuuteilla ja sisäisillä tekstikuvioilla. Tämä resurssi selittää jokaisen CSS-valitsimen tyypin vaiheittaisten esimerkkien avulla. Selenium SDI.

  • 🆔 Tagi ja tunnus: Yhdistä HTML-tagi #-etuliitteeseen kohdistaaksesi tarkasti elementteihin, joilla on yksilöllinen ID-attribuutti.
  • 🎯 Tunniste ja luokka: Käytä pisteen (.) syntaksia löytääksesi CSS-luokan jakavia elementtejä, mikä on hyödyllistä toistuvien käyttöliittymäkomponenttien kanssa.
  • 🧩 Tagi ja attribuutti: Käytä [attribute=value]-sulkeita elementtien tunnistamiseen nimen, tyypin tai minkä tahansa mukautetun attribuuttiparin perusteella.
  • 🪜 Tunniste, luokka ja attribuutti: Yhdistä useita ehtoja erottaaksesi toisistaan ​​elementit, joilla on sekä luokkanimiä että attribuuttiarvoja.
  • 🔤 Sisäisen tekstin vastaavuus: Käytä :contains(“text”)-kuviota paikantaaksesi tunnisteita ja elementtejä, joilta puuttuu tunnisteita, nimiä tai luokkia.
  • ✅ Paras harjoitus: Suosi stabiileja ID:itä syvälle sisäkkäisiin valitsimiin verrattuna säilyttääksesi Selenium automaatioskriptit kestävät käyttöliittymän muutoksia.
Lue lisää

CSS-valitsin sisään Selenium

Mikä on CSS-valitsin? Selenium?

A CSS-valitsin sisään Selenium on merkkijonomalli, joka tunnistaa verkkoelementin HTML-tagin, id:n, luokan ja attribuuttien yhdistelmän avulla. CSS-valitsimet ovat hieman edistyneempiä kuin paikantaminen id:n tai nimen perusteella, mutta ne ovat suosituin strategia kokeneiden käyttäjien keskuudessa. Selenium käyttäjille, koska he voivat tavoittaa elementtejä, joilla ei ole lainkaan ID- tai Name-attribuuttia.

CSS-valitsimet sisään Selenium niitä on monenlaisia, mutta tämä opas keskittyy viiteen yleisimpään malliin, joita käytetään Selenium SDI:

  • Tunniste ja tunnus
  • Tunniste ja luokka
  • Tunniste ja attribuutti
  • Tunniste, luokka ja attribuutti
  • Sisäinen teksti

Kun tätä strategiaa käytetään Selenium IDE, aina etuliitteenä Target laatikko, jossa on ”css="kuten jokaisessa alla olevassa esimerkissä on osoitettu.

Miksi käyttää CSS-valitsimia Selenium?

CSS-valitsimet ovat monien suosima paikannusstrategia Selenium automaatioinsinööreille, koska he tasapainottavat nopeuden, joustavuuden ja luettavuuden. Nykyaikaiset verkkosovellukset käyttävät usein dynaamisesti luotuja tunnisteita tai poistavat nimiattribuutit kokonaan, jolloin CSS-valitsimet ovat ainoa luotettava tapa kohdistaa tiettyyn sivun elementtiin.

CSS-valitsimien käytön tärkeimpiä etuja ovat:

  • Suorituskyky: CSS-valitsimet käsittelee selaimen oma hakukone, joten ne suoritetaan nopeammin kuin vastaavat XPath-lausekkeet, erityisesti vanhemmissa selaimissa, kuten Internet Explorerissa.
  • Joustavuus: Ne yhdistävät tag-, luokka-, attribuutti- ja osittaisen osuman logiikan, jolloin testaajat voivat kohdistaa testeihin elementtejä, joilla ei ole vakaata tunnistetta.
  • luettavuus: Syntaksi heijastaa tapaa, jolla kehittäjät jo kirjoittavat CSS-sääntöjä, mikä lyhentää sekä laadunvarmistusinsinöörien että front-end-tiimien oppimiskäyrää.
  • Selainten välinen vakaus: CSS-valitsimet toimivat yhdenmukaisesti Chromessa, Firefox, Edge ja Safari, mikä vähentää epätasaisia ​​testivirheitä.

Tagi ja tunnus – CSS-valitsin

Tässä esimerkissä käytetään Facebookin kirjautumissivulla olevaa Sähköposti-tekstikenttää. Elementin tunnus on ”email", ja sitä käytettiin jo "Paikannus tunnuksen perusteella" -osiossa. Nyt sama elementti kohdistetaan käyttämällä Selenium CSS-valitsin, jossa on ID-attribuutti.

Syntaksi

css=tag#id

  • tag = käytettävän elementin HTML-tunniste
  • # = ristikkomerkki, jonka on aina oltava läsnä käytettäessä Selenium CSS-valitsin tunnuksella
  • id = käytettävän elementin tunnus

Muista, että ID:tä edeltää aina hash-merkki (#).

Vaihe 1) Navigoida johonkin www.facebook.comTarkista ”Sähköposti tai puhelinnumero” -tekstikenttä selaimesi DevTools-työkaluilla (tai jollakin vanhalla työkalulla, kuten Firebugilla).

Huomaa, että HTML-tagi on "panos” ja sen tunnus on ”email". Täydellinen CSS-valitsin muuttuu siis "css=syöttö#sähköposti".

Tagi ja id - CSS-valitsin Selenium

Vaihe 2) Tulla sisään "css=syöttö#sähköposti”Osaksi Target laatikko Selenium IDE ja napsauta Etsi-painiketta. Selenium IDE korostaa vastaavan elementin sivulla.

Selenium IDE korostaa sähköpostikentän tunnisteen ja tunnuksen avulla

Tagi ja luokka – CSS-valitsin

CSS-valitsin Selenium , joka käyttää HTML-tagia ja luokan nimeä, noudattaa samaa ideaa kuin tag ja ID, mutta piste (.) korvaa ristikkomerkin.

Syntaksi

css=tag.class

  • tag = käytettävän elementin HTML-tunniste
  • . = pistemerkki, jonka on aina oltava läsnä käytettäessä CSS-valitsinta luokan kanssa
  • class = käytettävän elementin luokka

Vaihe 1) Avaa demosivu https://demo.guru99.com/test/facebook.html ja tarkista ”Sähköposti tai puhelin” -tekstiruutu. Huomaa, että HTML-tagi on ”panos” ja sen luokka on ”syöteteksti".

Tagi ja luokka - CSS-valitsin Selenium

Vaihe 2) In Selenium IDE-kenttään, kirjoita "css=input.inputtext"In Target -ruutua ja napsauta Etsi. Selenium IDE tunnistaa Sähköposti- tai Puhelinnumero-tekstiruudun.

Selenium IDE-paikannuselementti tunnisteen ja luokan mukaan

Huomaa, että kun useilla elementeillä on sama HTML-tagi ja luokka, vain ensimmäinen vastaava elementti lähdekoodissa tunnistetaan. Tarkasta samalla sivulla oleva Salasana-tekstiruutu ja huomaa, että se kuuluu samaan luokkaan kuin Sähköposti- tai Puhelinnumero-tekstiruutu.

Useita elementtejä, joilla on sama tunniste ja luokka

Edellisessä kuvassa korostettiin vain Sähköposti- tai Puhelinnumero-tekstiruutu, koska se näkyy ensimmäisenä sivun lähdekoodissa.

Sivun lähdekoodin järjestyksen määrittäminen Selenium ottelu

Tagi ja attribuutti – CSS-valitsin

Tämä strategia yhdistää HTML-tagin tiettyyn attribuuttiin, joka kuuluu käytettävään elementtiin.

Syntaksi

css=tag[attribute=value]

  • tag = käytettävän elementin HTML-tunniste
  • [ ja ] = hakasulkeet, jotka ympäröivät attribuutin ja sitä vastaavan arvon
  • attribuutti = käytettävä attribuutti. Valitse elementille ainutlaatuinen attribuutti, kuten nimi tai tunniste.
  • arvo = valitun määritteen vastaava arvo.

Vaihe 1) Siirry Mercury Retkien rekisteröintisivu https://demo.guru99.com/test/newtours/register.php ja tarkista ”Sukunimi”-tekstikenttä. Huomioi sen HTML-tagi (”input”) ja nimiattribuutti (”lastName”).

Tagi ja attribuutti - CSS-valitsin Selenium

Vaihe 2) In Selenium IDE-kenttään, kirjoita "css=input[nimi=sukunimi]"In Target -ruutua ja napsauta Etsi. Selenium IDE paikantaa Sukunimi-kentän onnistuneesti.

Selenium IDE paikantaa sukunimen attribuutin avulla

Kun useilla elementeillä on sama HTML-tagi ja -attribuutti, vain ensimmäinen tunnistetaan. Toiminta on identtinen saman tunnisteen ja luokan omaavien elementtien paikantamisen kanssa.

AIHEESEEN LIITTYVÄT ARTIKKELIT

Tagi, luokka ja attribuutti – CSS-valitsin

Syntaksi

css=tag.class[attribute=value]

  • tag = käytettävän elementin HTML-tunniste
  • . = pistemerkki, jonka on aina oltava läsnä käytettäessä CSS-valitsinta luokan kanssa
  • class = käytettävän elementin luokka
  • [ ja ] = hakasulkeet, jotka ympäröivät tietyn attribuutin ja sen vastaavan arvon
  • attribuutti = käytettävä attribuutti. Valitse elementille ainutlaatuinen attribuutti, kuten nimi tai tunniste.
  • arvo = valitun määritteen vastaava arvo.

Vaihe 1) Avaa demosivu https://demo.guru99.com/test/facebook.html ja tarkista ”Sähköposti tai puhelinnumero”- ja ”Salasana”-syöttökentät. Huomioi niiden HTML-tagi, luokka ja attribuutit. Tässä esimerkissä käytetään ”tabindex"attribuutti".

Tunniste, luokka ja attribuutti - CSS-valitsin

Vaihe 2) Siirry ensin ”Sähköposti tai puhelin” -tekstikenttään käyttämällä tabindex-arvoa 1. Kirjoita ”css=input.inputtext[tabindex=1]”Osaksi Selenium IDE: t Target ja napsauta Etsi. Sähköposti- tai Puhelinnumero-kenttä on korostettuna.

Selenium IDE paikantaa sähköpostin tunnisteen, luokan tai attribuutin perusteella

Vaihe 3) Jos haluat kohdistaa Salasana-syöttöruutuun, korvaa yksinkertaisesti tabindex-arvo. Kirjoita "css=input.inputtext[tabindex=2]"In Target -ruutua ja napsauta Etsi. Selenium IDE paikantaa salasana-tekstiruudun onnistuneesti.

Selenium IDE paikantaa salasanan tunnisteen, luokan tai attribuutin perusteella

Sisäinen teksti – CSS-valitsin

HTML-tunnisteille annetaan harvoin id-, name- tai class-attribuutteja. Joten miten niitä käytetään SeleniumVastaus löytyy heidän sisäisestä tekstistään. Sisätekstit ovat varsinaisia ​​merkkijonokuvioita, jotka HTML-otsikko näyttää sivulla.

Syntaksi

css=tag:contains("inner text")

  • tag = käytettävän elementin HTML-tunniste
  • sisäteksti = elementin näkyvä tekstisisältö

Vaihe 1) Siirry Mercury Tours kotisivut https://demo.guru99.com/test/newtours/ ja tarkista ”Password”-tunniste. Huomioi sen HTML-tunniste (tässä tapauksessa ”font”) ja tarkista, että elementillä ei ole class-, id- tai name-attribuutteja.

Sisäteksti - CSS-valitsimen tarkastus

Vaihe 2) Tyyppi css=font:contains("Salasana:") tulee Selenium IDE: t Target -ruutua ja napsauta Etsi. Selenium IDE paikantaa salasanan alla olevan kuvan mukaisesti.

Selenium IDE paikantaa salasanan tunnisteen sisäisen tekstin perusteella

Vaihe 3) Korvaa tällä kertaa sisempi teksti sanalla ”Boston”, jotta Target tulee "css=font:contains("Boston")". Napsauta Etsi. ”Bostonista San Franciscoon” -merkintä on korostettu, mikä osoittaa, että Selenium IDE pystyy paikantamaan pitkän tunnisteen, vaikka vain sen sisäisen tekstin ensimmäinen sana olisi annettu.

Selenium IDE osittainen sisäisen tekstin vastaavuus

CSS-valitsin vs. XPath Selenium

Sekä CSS-valitsimia että XPath-lausekkeita käytetään verkkoelementtien tunnistamiseen Selenium, mutta niillä on erilaiset vahvuudet. Alla olevassa taulukossa vertaillaan kahta paikannusstrategiaa keskeisten ulottuvuuksien osalta:

Kriteeri CSS-valitsin XPath
Nopeus Nopeampi, toimii selaimen omalla moottorilla Hitaampi, etenkin vanhemmissa selaimissa
Suunta Vain eteenpäin (vanhemmalta lapselle) Eteenpäin ja taaksepäin (lapsesta vanhemmalle)
Syntaksi Lyhyempi ja CSS-sääntöjen kaltainen Pidemmät, hierarkkiset polkulausekkeet
Tekstin sovitus Rajoitettu :contains()-pseudoluokkaan Vahvat text()- ja contains()-funktiot
Parasta Staattiset asettelut ja modernit verkkosovellukset Monimutkainen DOM-läpikulku ja tekstipohjaiset paikantimet

CSS-valitsimien kirjoittamisen parhaat käytännöt Selenium

Luotettavien CSS-valitsimien kirjoittaminen on syntaksin tuntemista pidemmälle menevää. Seuraavat käytännöt auttavat testaajia luomaan vakaita, ylläpidettäviä Selenium skriptit, jotka selviävät käyttöliittymän muutoksista:

  1. Suosi ainutlaatuisia ominaisuuksia: Valitse aina id-, data-test-id- tai name-attribuutit, jotka on erikseen lisätty automaatiota varten. Nämä pysyvät vakaina, vaikka visuaalinen asettelu muuttuisi.
  2. Vältä liian sisäkkäisiä valitsimia: Pitkiä ketjuja, kuten div > div > ul > li > a rikkoutua helposti, kun kehittäjät muokkaavat merkintöjä uudelleen. Pidä valitsimet mahdollisimman lyhyinä.
  3. Käytä osittaisia ​​osumia viisaasti: Kuviot, kuten [class*="btn-primary"] sietävät pieniä luokkien nimenmuutoksia, mutta ne voivat myös vastata ei-toivottuja elementtejä.
  4. Vältä indeksipohjaisia ​​paikantimia: Valitsijat, kuten nth-child(3) ovat hauraita, koska sisaruselementin lisääminen muuttaa jokaista sijaintia.
  5. Valitsinten validointi DevToolsissa: Ennen juoksua a Selenium skripti, liitä valitsin Chrome DevTools -konsoliin käyttämällä document.querySelector() varmistaakseen, että se palauttaa täsmälleen yhden elementin.
  6. Yhdistä ominaisuuksia ainutlaatuisuuden saavuttamiseksi: Kun luokkaa jakaa useat elementit, lisää attribuuttisuodatin, kuten input.form-control[name="email"] kohteen yksiselitteiseksi tekemiseksi.
  7. Dokumentointi ja uudelleenkäyttö: Keskitä valitsimet Page Object -luokan sisällä siten, että yksi päivitys korjaa kaikki samaan elementtiin viittaavat testit.

Näiden ohjeiden noudattaminen vähentää epätasaisuutta, parantaa testien suoritusnopeutta ja tekee Selenium sviittejä on helpompi ylläpitää ajan myötä.

Yhteenveto: CSS-valitsimen syntaksin pikaopas

Alla oleva taulukko yhdistää kaikki Selenium Tässä oppaassa käsitelty CSS-valitsinmalli:

Menetelmä Target Syntaksi esimerkki
Tunniste ja tunnus css=tag#id css=syöttö#sähköposti
Tunniste ja luokka css=tag.luokka css=input.inputtext
Tunniste ja attribuutti css=tunniste[attribuutti=arvo] css=input[nimi=sukunimi]
Tunniste, luokka ja attribuutti css=tunniste.luokka[attribuutti=arvo] css=input.inputtext[tabindex=1]
Sisäinen teksti css=tag:sisältää("teksti") css=font:contains("Salasana:")

UKK

Kyllä. CSS-valitsimet toimivat yleensä nopeammin kuin XPath, koska selaimet käsittelevät CSS-säännöt natiivisti. Ero on huomattavin vanhemmissa Internet Explorerin versioissa, kun taas nykyaikaiset selaimet, kuten Chrome ja Firefox kaventaa kuilua.

Kyllä. CSS-valitsimet on kirjoitettu seuraaville: Selenium IDE toimii suoraan Selenium WebDriver kautta By.cssSelector()Ainoa ero on, että WebDriver ei vaadi etuliitettä ”css=”, koska paikantimen tyyppi määritetään itse metodissa.

Ei. Firebug lopetettiin vuonna 2017 sen jälkeen, kun se fuusioitiin osaksi Firefox Kehittäjätyökalut. Nykyään testaajat käyttävät Chromen sisäänrakennettuja DevTools-työkaluja, Firefoxtai Edgeä elementtien tarkastamiseen ja CSS-valitsimien validointiin ennen niiden lisäämistä Selenium skriptejä.

Kyllä. Tekoälyllä toimivat työkalut, kuten Testim, Mabl ja ChatGPT voivat ehdottaa CSS-valitsimia analysoimalla DOM:ia. Ne vähentävät ylläpitotyötä mukauttamalla valitsimia, kun kehittäjät nimeävät luokkia uudelleen tai uudistavat sivun rakennetta.

Tekoälyllä toimivat itsekorjautuvat moottorit analysoivat ympäröivää DOM:ia ja korjaavat rikkinäiset paikantimet automaattisesti. Kun CSS-valitsin epäonnistuu, moottori tunnistaa lähimpänä olevan vastaavan elementin käyttämällä attribuuttien samankaltaisuutta, tekstisisältöä ja historiallisia kaavoja, palauttaen testin vakauden.

Käytä osittaisia ​​​​osittaisosumamalleja, kuten [id^="user_"] etuliitteitä varten [id$="_btn"] päätteiden osalta tai [id*="cart"] alimerkkijonoille. Nämä mallit vastaavat dynaamisesti luotuja tunnisteita vaatimatta tarkkaa arvoa.

CSS-valitsimet eivät voi siirtyä ylöspäin alielementistä sen pääelementtiin, ja ne tarjoavat rajoitetusti tekstin yhteensovittamista. Näissä tilanteissa XPath on edelleen parempi vaihtoehto. CSS:stä puuttuu myös sisäänrakennettuja funktioita sisaruslogiikalle vierekkäisten ja yleisten sisaruselementtien lisäksi.

Avaa selaimen DevTools, siirry Konsoli-välilehdelle ja suorita document.querySelectorAll("your-selector")Palautettu NodeList näyttää kaikki vastaavat elementit. Luotettava Selenium paikantimen tulisi palauttaa täsmälleen yksi elementti yksilöllistä kohdistusta varten.

Tiivistä tämä viesti seuraavasti: