Meny

Hur man använder CSS Selector för att identifiera webbelement för selen-skript - Selen självstudie # 6

  • Huvud
  • Automationstestning
  • Hur man använder CSS Selector för att identifiera webbelement för selen-skript - Selen självstudie # 6

how use css selector

Prova Vårt Instrument För Att Eliminera Problem

I vår föregående Selen-handledning , vi lärde oss olika typer av lokaliserare. Vi lärde oss också hur man använder: ID, ClassName, Name, Link Text och XPath locators för att identifiera webbelement på en webbsida.

I fortsättning med det kommer vi idag att lära oss hur man använder CSS Selector som Locator . Detta är vår sjätte handledning i vår gratis Selen Training-serien .

Använda CSS Selector som Locator:

CSS Selector är kombinationen av en elementväljare och ett väljarvärde som identifierar webbelementet på en webbsida. Sammansättningen av ett elementväljare och väljarvärde kallas väljarmönster.

CSS Selector Selenium Locator

Väljarmönster är konstruerat med hjälp av HTML-taggar, attribut och deras värden. Det centrala temat bakom proceduren för att skapa CSS Selector och Xpath är mycket lika underliggande den enda skillnaden i deras konstruktionsprotokoll.

Liksom Xpath kan CSS-väljaren också hitta webbelement utan ID, klass eller namn.

nätintervjufrågor och svar för nybörjare

Så nu går vi vidare, låt oss diskutera de primitiva typerna av CSS-väljare:

Använda CSS Selector som Locator

Vad du kommer att lära dig:

CSS-väljare: ID

I det här exemplet skulle vi komma åt textrutan 'E-post' i inloggningsformuläret på Gmail.com.

E-posttextrutan har ett ID-attribut vars värde definieras som 'E-post'. Således kan ID-attribut och dess värde användas för att skapa CSS Selector för att komma åt e-posttextrutan.

Skapa CSS Selector för webbelement

Steg 1 : Leta reda på / inspektera webbelementet ('E-post' textrutan i vårt fall) och märka att HTML-taggen är 'input' och värdet på ID-attributet är 'E-post' och båda refererar tillsammans till 'E-posttextrutan'. Därför skulle ovanstående data användas för att skapa CSS Selector.

Använda CSS Selector som Locator 2

Verifiera lokaliseringsvärdet

Steg 1 : Skriv “css = input # Email” dvs. lokaliseringsvärdet i målrutan i Selen IDE och klicka på Sök-knappen. Observera att rutan E-posttext skulle vara markerad.

Använda CSS Selector som Locator 3

Syntax

css =

  • HTML-tagg - Det är taggen som används för att beteckna webbelementet som vi vill komma åt.
  • # - Hashtecknet används för att symbolisera ID-attribut. Det är obligatoriskt att använda hash-tecken om ID-attribut används för att skapa CSS Selector.
  • Värde på ID-attribut - Det är värdet på ett ID-attribut som nås.
  • Värdet på ID föregås alltid av ett hash-tecken.

Notera: Gäller även för andra typer av CSS-väljare

  • När du anger CSS Selector i måltextrutan för Selen IDE, kom alltid ihåg att prefixa det med 'css ='.
  • Sekvensen av ovanstående artefakter är oföränderlig.
  • Om två eller flera webbelement har samma HTML-tagg och attributvärde identifieras det första elementet markerat i sidkällan.

CSS-väljare: Klass

I det här exemplet öppnar vi kryssrutan 'Förbli inloggad' under inloggningsformuläret på gmail.com.

Kryssrutan 'Förbli inloggad' har ett klassattribut vars värde definieras som 'kom ihåg'. Således kan klassattribut och dess värde användas för att skapa en CSS-väljare för att komma åt det angivna webbelementet.

Att hitta ett element med Class som en CSS-väljare liknar väldigt mycket att använda ID, den ensamma skillnaden ligger i deras syntaxbildning.

Skapa en CSS-väljare för webbelement

Steg 1 : Leta upp / inspektera webbelementet (kryssrutan 'Förbli inloggad' i vårt fall) och märk att HTML-taggen är 'etikett' och värdet på ID-attributet är 'kom ihåg' och båda hänvisar tillsammans till 'Förbli signerad i kryssrutan ”.

Verifiera lokaliseringsvärdet

Steg 1 : Skriv “css = label.remember” dvs. lokaliseringsvärdet i målrutan i Selen IDE och klicka på Sök-knappen. Observera att kryssrutan 'Förbli inloggad' skulle markeras.

Använda CSS Selector som Locator 4

Syntax

css =

  • . - Punkttecknet används för att symbolisera klassattribut. Det är obligatoriskt att använda dot-tecken om ett klassattribut används för att skapa en CSS-väljare.
  • Värdet på klass föregås alltid av ett prick-tecken.

CSS-väljare: attribut

I det här exemplet skulle vi komma åt knappen 'Logga in' som finns nedanför inloggningsformuläret på gmail.com.

Knappen 'Logga in' har ett typattribut vars värde definieras som 'skicka'. Således kan typattribut och dess värde användas för att skapa en CSS-väljare för att komma åt det angivna webbelementet.

Skapa en CSS-väljare för webbelement

Steg 1 : Leta upp / inspektera webbelementet ('Logga in' -knappen i vårt fall) och märk att HTML-taggen är 'input', attributet är typ och värdet på typattributet är 'skicka' och alla refererar tillsammans knappen 'Logga in'.

Verifiera lokaliseringsvärdet

Steg 1 : Skriv “css = input (type =’ submit ’)” dvs. lokaliseringsvärdet i målrutan i Selen IDE och klicka på Sök-knappen. Lägg märke till att knappen 'Logga in' skulle markeras.

Använda CSS Selector som Locator 5

Syntax

css =

  • Attribut - Det är attributet vi vill använda för att skapa CSS Selector. Det kan värdera, skriva, namn etc. Det rekommenderas att välja ett attribut vars värde unikt identifierar webbelementet.
  • Attributets värde - Det är värdet på ett attribut som nås.

CSS-väljare: ID / klass och attribut

I detta exempel skulle vi komma åt textrutan 'Lösenord' i inloggningsformuläret på gmail.com.

Textrutan 'Lösenord' har ett ID-attribut vars värde definieras som 'Passwd', skriv attribut vars värde definieras som 'lösenord'. Således kan ID-attribut, typattribut och deras värden användas för att skapa CSS Selector för att komma åt det angivna webbelementet.

vilka är faserna i sdlc

Skapa en CSS-väljare för webbelement

Steg 1 : Leta upp / inspektera webbelementet (textrutan 'Lösenord' i vårt fall) och märk att HTML-taggen är 'input', attribut är ID och typ och deras motsvarande värden är 'Passwd' och 'lösenord' och alla tillsammans hänvisa till textrutan 'Lösenord'.

Verifiera lokaliseringsvärdet

Steg 1 : Skriv “css = input # Passwd (name =’ Passwd ’)” dvs. lokaliseringsvärdet i målrutan i Selen IDE och klicka på Sök-knappen. Observera att textrutan 'Lösenord' skulle markeras.

Använda CSS Selector som Locator 5

Syntax

css =

Två eller flera attribut kan också presenteras i syntaxen.Till exempel, “Css = input # Passwd (type =’ password ’) (name =’ Passwd ’)”.

CSS-väljare: Understräng

CSS i Selen gör det möjligt att matcha en partiell sträng och därmed få en mycket intressant funktion för att skapa CSS-väljare med hjälp av underlag. Det finns tre sätt på vilka CSS-väljare kan skapas baserat på den mekanism som används för att matcha underlaget.

Typer av mekanismer

Alla nedanstående mekanismer har symbolisk betydelse.

  • Matcha ett prefix
  • Matcha ett suffix
  • Matcha ett underlag

Låt oss diskutera dem i detalj.

Matcha ett prefix

Den används för att motsvara strängen med hjälp av ett matchande prefix.

Syntax

css =

  • ^ - Symbolisk notation för att matcha en sträng med prefix.
  • Prefix - Det är strängen baserat på vilken matchning som utförs. Den troliga strängen förväntas börja med den angivna strängen.

Till exempel: Låt oss överväga 'Lösenord textruta', så motsvarande CSS väljare skulle vara:

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

Matcha ett suffix

Den används för att motsvara strängen med hjälp av ett matchande suffix.

Syntax

css =

  • # - Symbolisk notation för att matcha en sträng med hjälp av suffix.
  • Suffixet - Det är strängen baserat på vilken matchning som utförs. Den troliga strängen förväntas sluta med den angivna strängen.

Till exempel,Låt oss återigen överväga 'Lösenord textruta', så motsvarande CSS väljare skulle vara:

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

Matcha ett underlag

Den används för att motsvara strängen med hjälp av ett matchande underlag.

Syntax

css =

  • * - Symbolisk notation för att matcha en sträng med substräng.
  • Understräng - Det är strängen baserat på vilken matchning som utförs. Den troliga strängen förväntas ha det angivna strängmönstret.

Till exempel,kan vi överväga 'Lösenord textruta', så motsvarande CSS väljare skulle vara:

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

CSS-väljare: Inre text

Den inre texten hjälper oss att identifiera och skapa CSS Selector med hjälp av ett strängmönster som HTML-taggen visar på webbsidan.

Tänk, 'Behöver du hjälp?' hyperlänk finns nedanför inloggningsformuläret på gmail.com.

Ankertaggen som representerar hyperlänken har en text innesluten i. Således kan denna text användas för att skapa en CSS-väljare för att komma åt det angivna webbelementet.

Syntax:

css =

  • : - Punkttecknet används för att symbolisera innehåller metoden
  • Innehåller - Det är värdet på ett klassattribut som nås.
  • Text - Texten som visas var som helst på webbsidan oavsett plats.

Detta är en av de mest använda strategierna för att hitta webbelement på grund av dess förenklade syntax.

På grund av det faktum att skapa CSS Selector och Xpath kräver mycket ansträngningar och övning, så att processen endast utövas av mer sofistikerade och utbildade användare.

Nästa handledning # 7 : Fortsätt med nästa handledning, vi skulle ta chansen att presentera dig med en förlängning av lokaliseringsstrategier. Således, i nästa handledning, skulle vi studera mekanism för att hitta webbelement i Google Chrome och Internet Explorer.

hur man visar en .dat-fil

Vi täcker Selenium Locators i mer detaljer eftersom det är en viktig del av Selenium Script-skapandet.

Låt oss veta dina frågor / kommentarer nedan.

Rekommenderad läsning

^