Meny

Slik bruker du CSS Selector for å identifisere webelementer for selenskripter - Selen-opplæring # 6

how use css selector

Prøv Instrumentet Vårt For Å Eliminere Problemer

I vår forrige Selenium-opplæring , lærte vi forskjellige typer søkere. Vi lærte også hvordan du bruker: ID, ClassName, Name, Link Text og XPath locators for å identifisere webelementer på en webside.

I forlengelse med det vil vi i dag lære hvordan du bruker CSS Selector som Locator . Dette er vår sjette opplæring i vår gratis Selenium Training-serie .

Bruke CSS Selector som en Locator:

CSS Selector er kombinasjonen av en elementvelger og en velgerverdi som identifiserer webelementet på en webside. Sammensetningen av en elementvelger og velgerverdi er kjent som Selector Pattern.

CSS Selector Selenium Locator

Selector Pattern er konstruert ved hjelp av HTML-koder, attributter og deres verdier. Det sentrale temaet bak prosedyren for å lage CSS Selector og Xpath er veldig like underliggende den eneste forskjellen i konstruksjonsprotokollen.

I likhet med Xpath kan CSS-velger også finne webelementer uten ID, klasse eller navn.

hva er den beste appen for å laste ned youtube-videoer

La oss nå diskutere de primitive typene av CSS-velgere:

Bruke CSS Selector som Locator

Hva du vil lære:

CSS-velger: ID

I dette eksemplet vil vi få tilgang til 'E-post' tekstboksen som er tilstede i påloggingsskjemaet på Gmail.com.

E-post-tekstboksen har et ID-attributt hvis verdi er definert som 'E-post'. Dermed kan ID-attributt og verdien brukes til å opprette CSS Selector for å få tilgang til e-postteksten.

Opprette CSS Selector for webelement

Trinn 1 : Finn / inspiser webelementet ('E-post' tekstboks i vårt tilfelle) og legg merke til at HTML-koden er 'input' og verdien av ID-attributtet er 'E-post' og begge refererer samlet til 'E-posttekstboksen'. Derfor vil ovennevnte data bli brukt til å opprette CSS Selector.

Bruke CSS Selector som Locator 2

Bekreft lokaliseringsverdien

Trinn 1 : Skriv “css = input # Email” dvs. lokaliseringsverdien i målboksen i Selen IDE og klikk på Finn-knappen. Legg merke til at e-posttekstboksen vil være uthevet.

Bruke CSS Selector som Locator 3

Syntaks

css =

  • HTML-tag - Det er taggen som brukes til å betegne webelementet som vi vil ha tilgang til.
  • # - Hash-tegnet brukes til å symbolisere ID-attributt. Det er obligatorisk å bruke hash-tegn hvis ID-attributt brukes til å opprette CSS Selector.
  • Verdien av ID-attributtet - Det er verdien av et ID-attributt som nås.
  • Verdien av ID er alltid foran et hash-tegn.

Merk: Gjelder også for andre typer CSS-velgere

  • Mens du spesifiserer CSS Selector i måltekstboksen til Selen IDE, må du alltid huske å prefiks den med “css =”.
  • Sekvensen av gjenstandene ovenfor er uforanderlig.
  • Hvis to eller flere webelementer har samme HTML-tagg og attributtverdi, blir det første elementet som er merket i sidekilden identifisert.

CSS-velger: Klasse

I dette eksemplet vil vi få tilgang til 'Hold deg pålogget' avkrysningsruten under påloggingsskjemaet på gmail.com.

Avkrysningsruten 'Forbli pålogget' har et klasseattributt hvis verdi er definert som 'husk'. Dermed kan klasseattributtet og dets verdi brukes til å opprette en CSS-velger for å få tilgang til det angitte webelementet.

Å finne et element ved å bruke Class som CSS Selector, ligner veldig på å bruke ID, den eneste forskjellen ligger i syntaksdannelsen.

Opprette en CSS-velger for webelement

Trinn 1 : Finn / inspiser nettelementet ('Forbli pålogget' avkrysningsruten i vårt tilfelle) og legg merke til at HTML-koden er 'etikett' og verdien av ID-attributtet er 'husk', og begge refererer samlet til 'Forbli signert i avkrysningsruten ”.

Bekreft lokaliseringsverdien

Trinn 1 : Skriv “css = label.remember” dvs. lokaliseringsverdien i målboksen i Selen IDE og klikk på Finn-knappen. Legg merke til at avmerkingsboksen 'Forbli pålogget' vil være uthevet.

Bruke CSS Selector som Locator 4

Syntaks

css =

  • . - Punkttegnet brukes til å symbolisere klasseattributtet. Det er obligatorisk å bruke punkttegn hvis et klasse-attributt brukes til å opprette en CSS-velger.
  • Verdien til klasse er alltid foran et punkttegn.

CSS-velger: Attributt

I dette eksemplet vil vi få tilgang til 'Logg inn' -knappen under innloggingsskjemaet på gmail.com.

'Logg på' -knappen har et typeattributt hvis verdi er definert som 'send inn'. Dermed kan typeattributtet og dets verdi brukes til å opprette en CSS-velger for å få tilgang til det angitte webelementet.

Opprette en CSS-velger for webelement

Trinn 1 : Finn / inspiser webelementet (“Logg inn” -knappen i vårt tilfelle) og legg merke til at HTML-taggen er “input”, attributtet er type og verdien av typeattributtet er “send” og alle sammen refererer “Logg på” -knappen.

Bekreft lokaliseringsverdien

Trinn 1 : Skriv “css = input (type =’ submit ’)' dvs. lokaliseringsverdien i målboksen i Selen IDE og klikk på Finn-knappen. Legg merke til at 'Logg inn' -knappen vil bli uthevet.

Bruke CSS Selector som Locator 5

Syntaks

css =

  • Egenskap - Det er attributtet vi vil bruke til å lage CSS Selector. Det kan verdsette, skrive, navn osv. Det anbefales å velge et attributt hvis verdi unikt identifiserer webelementet.
  • Verdien av attributtet - Det er verdien av et attributt som nås.

CSS-velger: ID / klasse og attributt

I dette eksemplet vil vi få tilgang til 'Passord' -tekstboksen i påloggingsskjemaet på gmail.com.

Tekstboksen 'Passord' har et ID-attributt hvis verdi er definert som 'Passwd', skriv attributt hvis verdi er definert som 'passord'. Dermed kan ID-attributt, typeattributt og deres verdier brukes til å opprette CSS Selector for å få tilgang til det angitte webelementet.

hva er fasene til sdlc

Opprette en CSS-velger for webelement

Trinn 1 : Finn / inspiser webelementet ('Passord' tekstboks i vårt tilfelle) og legg merke til at HTML-koden er 'input', attributtene er ID og type og deres tilsvarende verdier er 'Passwd' og 'passord' og alle sammen referer til 'Passord' -tekstboksen.

Bekreft lokaliseringsverdien

Trinn 1 : Skriv “css = input # Passwd (name =’ Passwd ’)' dvs. lokaliseringsverdien i målboksen i Selen IDE og klikk på Finn-knappen. Legg merke til at tekstboksen 'Passord' vil være uthevet.

Bruke CSS Selector som Locator 5

Syntaks

css =

To eller flere attributter kan også vises i syntaksen.For eksempel, “Css = input # Passwd (type =’ password ’) (name =’ Passwd ’)”.

CSS-velger: Understreng

CSS i Selenium tillater å matche en delvis streng og dermed utlede en veldig interessant funksjon for å lage CSS Selectors ved hjelp av understrenger. Det er tre måter som CSS-velgere kan opprettes på grunnlag av mekanismen som brukes til å matche understrengen.

Typer av mekanismer

Alle mekanismene under har symbolsk betydning.

  • Match et prefiks
  • Match et suffiks
  • Match et underlag

La oss diskutere dem i detalj.

Match et prefiks

Den brukes til å samsvare med strengen ved hjelp av et matchende prefiks.

Syntaks

css =

  • ^ - Symbolsk notasjon for å matche en streng ved hjelp av prefikset.
  • Prefiks - Det er strengen basert på hvilken kampoperasjon som utføres. Den sannsynlige strengen forventes å starte med den angitte strengen.

For eksempel: La oss vurdere 'Passordtekstboks', så den tilsvarende CSS-velgeren vil være:

css = input # Passwd (name ^ = ’Pass’)

Match et suffiks

Den brukes til å samsvare med strengen ved hjelp av et matchende suffiks.

Syntaks

css =

  • # - Symbolsk notasjon for å matche en streng ved hjelp av suffiks.
  • Suffikset - Det er strengen basert på hvilken kampoperasjon som utføres. Den sannsynlige strengen forventes å slutte med den angitte strengen.

For eksempel,La oss vurdere “Passordtekstboks” igjen, så den tilsvarende CSS-velgeren vil være:

css = input # Passwd (name $ = ’wd’)

Match et underlag

Den brukes til å samsvare med strengen ved hjelp av et matchende underlag.

Syntaks

css =

  • * - Symbolsk notasjon for å matche en streng ved hjelp av understreng.
  • Understreng - Det er strengen basert på hvilken kampoperasjon som utføres. Den sannsynlige strengen forventes å ha det spesifiserte strengmønsteret.

For eksempel,kan vi vurdere 'passord tekstboks' igjen, så den tilsvarende CSS velgeren vil være:

css = input # Passwd (name $ = ’wd’)

CSS-velger: indre tekst

Den indre teksten hjelper oss med å identifisere og opprette CSS Selector ved hjelp av et strengemønster som HTML-taggen manifesterer på websiden.

Tenk, 'Trenger du hjelp?' hyperkobling under innloggingsskjemaet på gmail.com.

Ankermerket som representerer hyperkoblingen har en tekst som er lukket inne. Dermed kan denne teksten brukes til å lage en CSS-velger for å få tilgang til det angitte webelementet.

Syntaks:

css =

  • : - Punkttegnet brukes til å symbolisere inneholder metoden
  • Inneholder - Det er verdien av et klasse-attributt som nås.
  • Tekst - Teksten som vises hvor som helst på websiden, uavhengig av plassering.

Dette er en av de mest brukte strategiene for å finne webelement på grunn av den forenklede syntaksen.

På grunn av det faktum at det å lage CSS Selector og Xpath krever mye innsats og praksis, blir prosessen bare utøvd av mer sofistikerte og trente brukere.

Neste opplæring # 7 : Fortsett med neste veiledning, vil vi benytte anledningen til å introdusere deg for en utvidelse av lokaliseringsstrategier. Således, i neste opplæring, ville vi studere mekanisme for å finne webelementer i Google Chrome og Internet Explorer.

hvordan du ser en .dat-fil

Vi dekker Selenium Locators i flere detaljer, da det er en viktig del av Selenium Script-opprettelsen.

Gi oss beskjed om dine spørsmål / kommentarer nedenfor.

Anbefalt lesing

^