Menu

Sådan bruges CSS Selector til identifikation af webelementer til selen-scripts - Selen Tutorial # 6

how use css selector

Prøv Vores Instrument Til At Fjerne Problemer

I vores forrige Selen-tutorial , lærte vi forskellige typer lokaliseringer. Vi lærte også, hvordan man bruger: ID, ClassName, Name, Link Text og XPath locators til identifikation af webelementer på en webside.

I forlængelse af det lærer vi i dag hvordan man bruger CSS Selector som en Locator . Dette er vores 6. tutorial i vores gratis Selenium-træningsserie .

Brug af CSS Selector som en Locator:

CSS Selector er kombinationen af ​​en elementvælger og en vælgerværdi, der identificerer webelementet på en webside. Kompositten af ​​en elementvælger og en vælgerværdi er kendt som selektormønster.

CSS Selector Selen Locator

Selector Pattern er konstrueret ved hjælp af HTML-tags, attributter og deres værdier. Det centrale tema bag proceduren til oprettelse af CSS Selector og Xpath er meget ens underliggende for den eneste forskel i deres konstruktionsprotokol.

Ligesom Xpath kan CSS-vælger også finde webelementer uden ID, klasse eller navn.

software til at spionere på mobiltelefoner

Så nu går vi fremad, lad os diskutere de primitive typer af CSS-vælgere:

Brug af CSS Selector som en Locator

Hvad du lærer:

CSS-vælger: ID

I denne prøve ville vi få adgang til 'E-mail' tekstfeltet til stede i loginformularen på Gmail.com.

E-mail-tekstboksen har en ID-attribut, hvis værdi er defineret som 'E-mail'. ID-attributten og dens værdi kan således bruges til at oprette CSS Selector for at få adgang til e-mail-tekstboksen.

Oprettelse af CSS Selector til webelement

Trin 1 : Find / inspicér webelementet ('E-mail' tekstfelt i vores tilfælde) og bemærk, at HTML-tagget er 'input', og værdien af ​​ID-attributten er 'E-mail', og begge henviser samlet til 'E-mail-tekstfeltet'. Derfor vil ovenstående data blive brugt til at oprette CSS Selector.

Brug af CSS Selector som Locator 2

Bekræft lokaliseringsværdien

Trin 1 : Skriv “css = input # Email” dvs. lokaliseringsværdien i målfeltet i Selen IDE og klik på Find-knappen. Bemærk, at feltet E-mail-tekst vil blive fremhævet.

Brug af CSS Selector som en Locator 3

Syntaks

css =

  • HTML-tag - Det er mærket, der bruges til at betegne det webelement, som vi vil have adgang til.
  • # - Hash-tegnet bruges til at symbolisere ID-attribut. Det er obligatorisk at bruge hash-tegn, hvis ID-attribut bruges til at oprette CSS Selector.
  • Værdi af ID-attribut - Det er værdien af ​​en ID-attribut, der er adgang til.
  • Værdien af ​​ID er altid forud for et hash-tegn.

Bemærk: Gælder også for andre typer CSS-vælgere

  • Mens du specificerer CSS Selector i måltekstfeltet i Selen IDE, skal du altid huske at sætte det foran 'css ='.
  • Sekvensen af ​​ovenstående artefakter er uforanderlig.
  • Hvis to eller flere webelementer har samme HTML-tag og attributværdi, identificeres det første element markeret i sidekilden.

CSS-vælger: Klasse

I denne prøve ville vi åbne afkrydsningsfeltet 'Forbliv logget ind', der er til stede under loginformularen på gmail.com.

Afkrydsningsfeltet 'Bliv logget ind' har en klasseattribut, hvis værdi er defineret som 'husk'. Således kan klasseattribut og dens værdi bruges til at oprette en CSS-vælger for at få adgang til det udpegede webelement.

At finde et element ved hjælp af klasse som en CSS-vælger svarer meget til at bruge ID, den ensomme forskel ligger i deres syntaksdannelse.

Oprettelse af en CSS-vælger til webelement

Trin 1 : Find / inspicér webelementet ('Forbliv logget ind' afkrydsningsfeltet i vores tilfælde) og bemærk, at HTML-tagget er 'label', og værdien af ​​ID-attributten er 'husk', og begge henviser samlet til 'Forbliv signeret i afkrydsningsfelt ”.

Bekræft lokaliseringsværdien

Trin 1 : Skriv “css = label.remember” dvs. lokaliseringsværdien i målfeltet i Selen IDE og klik på Find-knappen. Bemærk, at afkrydsningsfeltet 'Bliv logget ind' vil blive fremhævet.

Brug af CSS Selector som Locator 4

Syntaks

css =

  • . - Punkttegnet bruges til at symbolisere klasseattributten. Det er obligatorisk at bruge punkttegn, hvis en klasseattribut bruges til at oprette en CSS-vælger.
  • Værdien af ​​klasse indledes altid med et priktegn.

CSS Selector: Attribut

I denne prøve ville vi få adgang til knappen 'Log ind', der er til stede under loginformularen på gmail.com.

Knappen “Log ind” har en typeattribut, hvis værdi er defineret som “send”. Typeattributten og dens værdi kan således bruges til at oprette en CSS Selector for at få adgang til det udpegede webelement.

Oprettelse af en CSS-vælger til webelement

Trin 1 : Find / inspicer webelementet ('Log ind' -knappen i vores tilfælde) og bemærk, at HTML-tagget er 'input', attributten er type, og værdien af ​​typeattributten er 'send', og alle sammen refererer knappen 'Log ind'.

Bekræft lokaliseringsværdien

Trin 1 : Skriv “css = input (type =’ send ') ', dvs. lokaliseringsværdien i målfeltet i Selen IDE, og klik på Find-knappen. Bemærk, at knappen 'Log ind' vil blive fremhævet.

Brug af CSS Selector som Locator 5

Syntaks

css =

  • Attribut - Det er den attribut, vi vil bruge til at oprette CSS Selector. Det kan værdi, type, navn osv. Det anbefales at vælge en attribut, hvis værdi entydigt identificerer webelementet.
  • Værdi af attribut - Det er værdien af ​​en attribut, der er adgang til.

CSS-vælger: ID / klasse og attribut

I denne prøve ville vi få adgang til 'Adgangskode' tekstfeltet til stede i loginformularen på gmail.com.

Tekstfeltet 'Adgangskode' har en ID-attribut, hvis værdi er defineret som 'Passwd', skriv attribut, hvis værdi er defineret som 'adgangskode'. ID-attribut, typeattribut og deres værdier kan således bruges til at oprette CSS Selector for at få adgang til det udpegede webelement.

hvordan kører jeg swf-filer

Oprettelse af en CSS-vælger til webelement

Trin 1 : Find / inspicer webelementet (tekstfeltet 'Adgangskode' i vores tilfælde) og bemærk, at HTML-tagget er 'input', attributter er ID og type, og deres tilsvarende værdier er 'Passwd' og 'password' og alle sammen henvis til tekstboksen 'Adgangskode'.

Bekræft lokaliseringsværdien

Trin 1 : Skriv 'css = input # Passwd (name = 'Passwd')', dvs. lokaliseringsværdien i målfeltet i Selen IDE, og klik på Find-knappen. Bemærk, at tekstfeltet 'Adgangskode' vil blive fremhævet.

Brug af CSS Selector som Locator 5

Syntaks

css =

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

CSS-vælger: Understreng

CSS i Selenium giver mulighed for at matche en delvis streng og derved udlede en meget interessant funktion til at oprette CSS-vælgere ved hjælp af understrenge. Der er tre måder, hvorpå CSS-vælgere kan oprettes baseret på den mekanisme, der bruges til at matche understrengen.

Typer af mekanismer

Alle nedenstående mekanismer har symbolsk betydning.

  • Match et præfiks
  • Match et suffiks
  • Match et underlag

Lad os diskutere dem detaljeret.

Match et præfiks

Det bruges til at svare til strengen ved hjælp af et matchende præfiks.

Syntaks

css =

  • ^ - Symbolsk notation, der matcher en streng ved hjælp af præfiks.
  • Præfiks - Det er strengen baseret på hvilken matchoperation der udføres. Den sandsynlige streng forventes at starte med den angivne streng.

For eksempel: Lad os overveje 'Adgangskode tekstboks', så den tilsvarende CSS-vælger ville være:

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

Match et suffiks

Det bruges til at svare til strengen ved hjælp af et matchende suffiks.

Syntaks

css =

  • # - Symbolsk notation, der matcher en streng ved hjælp af suffiks.
  • Suffikset - Det er strengen baseret på hvilken matchoperation der udføres. Den sandsynlige streng forventes at ende med den angivne streng.

For eksempel,Lad os igen overveje 'Password tekstboks', så den tilsvarende CSS Selector ville være:

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

Match et underlag

Det bruges til at svare til strengen ved hjælp af et matchende underlag.

Syntaks

css =

  • * - Symbolsk notation, der matcher en streng ved hjælp af understreng.
  • Understreng - Det er strengen baseret på hvilken matchoperation der udføres. Den sandsynlige streng forventes at have det specificerede strengemønster.

For eksempel,lad os igen overveje 'Password tekstboks', så den tilsvarende CSS Selector ville være:

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

CSS-vælger: Indre tekst

Den indre tekst hjælper os med at identificere og oprette CSS Selector ved hjælp af et strengemønster, som HTML-tagget manifesterer på websiden.

Overvej, 'Brug for hjælp?' hyperlink til stede under loginformularen på gmail.com.

Ankermærket, der repræsenterer hyperlinket, har en tekst, der er lukket inde. Denne tekst kan således bruges til at oprette en CSS-vælger for at få adgang til det udpegede webelement.

Syntaks:

css =

  • : - Punkttegnet bruges til at symbolisere indeholder metoden
  • Indeholder - Det er værdien af ​​en klasseattribut, der er adgang til.
  • Tekst - Teksten, der vises hvor som helst på websiden, uanset dens placering.

Dette er en af ​​de mest anvendte strategier til lokalisering af webelement på grund af dets forenklede syntaks.

På grund af det faktum, at oprettelse af CSS Selector og Xpath kræver en stor indsats og praksis, således udøves processen kun af mere sofistikerede og uddannede brugere.

Næste tutorial # 7 : Når vi fortsætter med vores næste tutorial, benytter vi lejligheden til at introducere dig med en udvidelse af lokaliseringsstrategier. Således, i den næste tutorial, ville vi studere mekanisme til at lokalisere webelementer i Google Chrome og Internet Explorer.

hvad er sikkerhedsnøglen på routeren

Vi dækker Selenium Locators i flere detaljer, da det er en vigtig del af Selenium Script-oprettelsen.

Fortæl os dine spørgsmål / kommentarer nedenfor.

Anbefalet læsning

^