Menu

CSS Selector gebruiken voor het identificeren van webelementen voor Selenium-scripts - Selenium-zelfstudie # 6

  • Hoofd
  • Automatiseringstesten
  • CSS Selector gebruiken voor het identificeren van webelementen voor Selenium-scripts - Selenium-zelfstudie # 6

how use css selector

Probeer Ons Instrument Voor Het Oplossen Van Problemen

In onze vorige Selenium-tutorial hebben we verschillende soorten locators geleerd. We hebben ook geleerd hoe u: ID, ClassName, Name, Link Text en XPath-locators kunt gebruiken voor het identificeren van webelementen op een webpagina.

In het verlengde daarvan zullen we vandaag leren hoe u CSS Selector als locator gebruikt ​Dit is onze 6e tutorial in onze gratis Selenium Training-serie ​

CSS Selector gebruiken als een locator:

CSS Selector is de combinatie van een elementselector en een selectorwaarde die het webelement binnen een webpagina identificeert. De samenstelling van een elementselector en een selectorwaarde staat bekend als Selector Pattern.

CSS Selector Selenium Locator

Selector Pattern is opgebouwd met behulp van HTML-tags, attributen en hun waarden. Het centrale thema achter de procedure om CSS Selector en Xpath te maken, lijken sterk op het enige verschil in hun constructieprotocol.

Net als Xpath kan CSS-selector ook webelementen lokaliseren zonder ID, klasse of naam.

hoe u een lijst met objecten in java maakt

Laten we nu dus vooruitgaan en de primitieve typen CSS-selectors bespreken:

CSS Selector gebruiken als een locator

Wat je leert:

CSS-selector: ID

In dit voorbeeld hebben we toegang tot het tekstvak 'E-mail' in het aanmeldingsformulier op Gmail.com.

Het tekstvak E-mail heeft een ID-kenmerk waarvan de waarde is gedefinieerd als 'E-mail'. Het ID-kenmerk en zijn waarde kunnen dus worden gebruikt om CSS Selector te maken om toegang te krijgen tot het e-mailtekstvak.

CSS Selector maken voor webelement

Stap 1 : Zoek / inspecteer het webelement (tekstvak 'E-mail' in ons geval) en merk op dat de HTML-tag 'invoer' is en de waarde van het ID-attribuut 'E-mail' is en beide verwijzen gezamenlijk naar het 'E-mailtekstvak'. Daarom zouden de bovenstaande gegevens worden gebruikt om CSS Selector te maken.

CSS Selector gebruiken als locator 2

Controleer de locatorwaarde

Stap 1 : Typ 'css = input # Email', d.w.z. de locatorwaarde in het doelvak in de Selenium IDE en klik op de knop Zoeken. Merk op dat het vak E-mailtekst zou worden gemarkeerd.

CSS Selector gebruiken als locator 3

Syntaxis

css =

  • HTML-tag - Het is de tag die wordt gebruikt om het webelement aan te duiden waartoe we toegang willen hebben.
  • ​ - Het hekje wordt gebruikt om het ID-kenmerk te symboliseren. Het is verplicht om een ​​hekje te gebruiken als het ID-kenmerk wordt gebruikt om CSS Selector te maken.
  • Waarde van ID-kenmerk - Het is de waarde van een ID-kenmerk waartoe toegang wordt verkregen.
  • De waarde van ID wordt altijd voorafgegaan door een hekje.

Opmerking: Ook toepasbaar voor andere soorten CSS Selectors

  • Wanneer u CSS Selector specificeert in het doeltekstvak van Selenium IDE, vergeet dan niet om het voorvoegsel met 'css =' te geven.
  • De volgorde van de bovenstaande artefacten is onveranderlijk.
  • Als twee of meer webelementen dezelfde HTML-tag en attribuutwaarde hebben, wordt het eerste gemarkeerde element in de paginabron geïdentificeerd.

CSS-selector: klasse

In dit voorbeeld hebben we toegang tot het selectievakje 'Aangemeld blijven' onder het aanmeldingsformulier op gmail.com.

Het selectievakje 'Aangemeld blijven' heeft een Class-attribuut waarvan de waarde is gedefinieerd als 'onthouden'. Het Class-attribuut en zijn waarde kunnen dus worden gebruikt om een ​​CSS-selector te maken om toegang te krijgen tot het aangewezen webelement.

Het lokaliseren van een element met Class als CSS Selector lijkt sterk op het gebruik van ID, het enige verschil ligt in hun syntaxisvorming.

Een CSS-selector voor webelement maken

Stap 1 : Zoek / inspecteer het webelement (in ons geval 'Aangemeld blijven' aankruisvak) en merk op dat de HTML-tag 'label' is en de waarde van het ID-kenmerk 'onthouden' en beide verwijzen samen naar het 'Blijf ondertekend' in checkbox ”.

Controleer de locatorwaarde

Stap 1 : Typ 'css = label.remember', d.w.z. de locatorwaarde in het doelvak in de Selenium IDE en klik op de knop Zoeken. Merk op dat het selectievakje 'Aangemeld blijven' gemarkeerd is.

CSS Selector gebruiken als locator 4

Syntaxis

css =

  • ​ - Het puntteken wordt gebruikt om het Class-attribuut te symboliseren. Het is verplicht om een ​​puntteken te gebruiken als een Class-attribuut wordt gebruikt om een ​​CSS-selector te maken.
  • De waarde van Class wordt altijd voorafgegaan door een puntteken.

CSS-selector: kenmerk

In dit voorbeeld hebben we toegang tot de knop 'Aanmelden' onder het aanmeldingsformulier op gmail.com.

De knop 'Aanmelden' heeft een typekenmerk waarvan de waarde is gedefinieerd als 'verzenden'. Dus type attribuut en zijn waarde kunnen worden gebruikt om een ​​CSS Selector te maken om toegang te krijgen tot het aangewezen webelement.

Een CSS-selector voor webelement maken

Stap 1 : Zoek / inspecteer het webelement (in dit geval de knop 'Aanmelden') en merk op dat de HTML-tag 'invoer' is, het kenmerk type is en de waarde van het kenmerk 'verzenden' zijn en ze allemaal samen verwijzen naar de knop 'Aanmelden'.

Controleer de locatorwaarde

Stap 1 : Typ 'css = input (type =’ submit ’)', d.w.z. de locatorwaarde in het doelvak in de Selenium IDE en klik op de knop Zoeken. Merk op dat de knop 'Aanmelden' gemarkeerd zou zijn.

CSS Selector gebruiken als een locator 5

Syntaxis

css =

  • Attribuut - Het is het attribuut dat we willen gebruiken om CSS Selector te maken. Het kan waarde, type, naam enz. Hebben. Het wordt aanbevolen om een ​​attribuut te kiezen waarvan de waarde het webelement uniek identificeert.
  • Waarde van kenmerk - Het is de waarde van een attribuut waartoe toegang wordt verkregen.

CSS-selector: ID / klasse en kenmerk

In dit voorbeeld hebben we toegang tot het tekstvak 'Wachtwoord' in het aanmeldingsformulier op gmail.com.

Het tekstvak 'Wachtwoord' heeft een ID-attribuut waarvan de waarde is gedefinieerd als 'Passwd', typ attribuut waarvan de waarde is gedefinieerd als 'wachtwoord'. Dus ID-attribuut, typekenmerk en hun waarden kunnen worden gebruikt om CSS-selector te maken om toegang te krijgen tot het aangewezen webelement.

hoe svn-plug-in in eclipse te installeren

Een CSS-selector voor webelement maken

Stap 1 : Zoek / inspecteer het webelement (tekstvak 'Wachtwoord' in ons geval) en merk op dat de HTML-tag 'invoer' is, attributen zijn ID en type en de bijbehorende waarden zijn 'Passwd' en 'wachtwoord' en ze allemaal samen verwijs naar het tekstvak 'Wachtwoord'.

Controleer de locatorwaarde

Stap 1 : Typ 'css = input # Passwd (name =’ Passwd ’)', d.w.z. de locatorwaarde in het doelvak in de Selenium IDE en klik op de knop Zoeken. Merk op dat het tekstvak 'Wachtwoord' gemarkeerd zou zijn.

CSS Selector gebruiken als een locator 5

Syntaxis

css =

Twee of meer attributen kunnen ook in de syntaxis worden geleverd.Bijvoorbeeld​ 'Css = input # Passwd (type =’ wachtwoord ’) (name =’ Passwd ’)”.

CSS Selector: Sub-string

CSS in Selenium maakt het mogelijk om een ​​gedeeltelijke string te matchen en zo een zeer interessante functie af te leiden om CSS-selectors te maken met behulp van substrings. Er zijn drie manieren waarop CSS-selectors kunnen worden gemaakt op basis van het mechanisme dat wordt gebruikt om de substring te matchen.

Soorten mechanismen

Alle onderliggende mechanismen hebben een symbolische betekenis.

  • Overeenkomen met een voorvoegsel
  • Overeenkomen met een achtervoegsel
  • Overeenkomen met een substring

Laten we ze in detail bespreken.

Overeenkomen met een voorvoegsel

Het wordt gebruikt om te corresponderen met de string met behulp van een passend voorvoegsel.

Syntaxis

css =

  • ​ - Symbolische notatie om een ​​tekenreeks te matchen met een voorvoegsel.
  • Voorvoegsel - Het is de tekenreeks op basis waarvan de overeenkomstbewerking wordt uitgevoerd. De waarschijnlijke string zal naar verwachting beginnen met de opgegeven string.

Bijvoorbeeld: Laten we eens kijken naar 'Wachtwoordtekstvak', dus de bijbehorende CSS-selector zou zijn:

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

Overeenkomen met een achtervoegsel

Het wordt gebruikt om te corresponderen met de string met behulp van een passend achtervoegsel.

Syntaxis

css =

  • ​ - Symbolische notatie om overeen te komen met een tekenreeks met achtervoegsel.
  • Het achtervoegsel - Het is de tekenreeks op basis waarvan de overeenkomstbewerking wordt uitgevoerd. De waarschijnlijke tekenreeks eindigt naar verwachting met de opgegeven tekenreeks.

Bijvoorbeeld,Laten we nogmaals kijken naar 'Wachtwoordtekstvak', dus de bijbehorende CSS-selector zou zijn:

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

Overeenkomen met een substring

Het wordt gebruikt om te corresponderen met de string met behulp van een bijpassende substring.

Syntaxis

css =

  • ​ - Symbolische notatie om een ​​string te matchen met een subtekenreeks.
  • Substring - Het is de tekenreeks op basis waarvan de overeenkomstbewerking wordt uitgevoerd. De waarschijnlijke tekenreeks heeft naar verwachting het opgegeven tekenreekspatroon.

Bijvoorbeeld,laten we opnieuw kijken naar 'Wachtwoordtekstvak', dus de bijbehorende CSS-selector zou zijn:

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

CSS-selector: innerlijke tekst

De binnentekst helpt ons bij het identificeren en creëren van CSS Selector met behulp van een stringpatroon dat de HTML-tag op de webpagina manifesteert.

Overweeg: 'Hulp nodig?' hyperlink aanwezig onder het inlogformulier op gmail.com.

De ankertag die de hyperlink vertegenwoordigt, bevat een tekst. Deze tekst kan dus worden gebruikt om een ​​CSS-selector te maken om toegang te krijgen tot het aangewezen webelement.

Syntaxis:

css =

  • ​ - Het puntteken wordt gebruikt om de methode bevat te symboliseren
  • Bevat - Het is de waarde van een Class-attribuut waartoe toegang wordt verkregen.
  • Tekst - De tekst die overal op de webpagina wordt weergegeven, ongeacht de locatie.

Dit is een van de meest gebruikte strategieën om webelementen te lokaliseren vanwege de vereenvoudigde syntaxis.

Omdat het maken van CSS Selector en Xpath veel inspanning en oefening vereist, wordt het proces alleen uitgeoefend door meer geavanceerde en getrainde gebruikers.

Volgende tutorial # 7 : Als we doorgaan met onze volgende tutorial, maken we van de gelegenheid gebruik om u kennis te laten maken met een uitbreiding van lokalisatiestrategieën. Daarom zouden we in de volgende tutorial de mechanisme om webelementen op Google Chrome en Internet Explorer te lokaliseren.

5 voorbeelden van programmeertalen op hoog niveau

We behandelen Selenium Locators in meer details, omdat het een belangrijk onderdeel is van het maken van Selenium Script.

Laat ons hieronder uw vragen / opmerkingen weten.

Aanbevolen literatuur

^