CSS-kiezer in Selenium

Wat is een CSS-kiezer?

CSS-kiezers in Selenium zijn tekenreekspatronen die worden gebruikt om een ​​element te identificeren op basis van een combinatie van HTML-tag, id, klasse en attributen. Lokaliseren met behulp van CSS-kiezers in Selenium is ingewikkelder dan de voorgaande methoden, maar het is de meest gebruikelijke lokalisatiestrategie van geavanceerde Selenium-gebruikers, omdat het zelfs toegang heeft tot die elementen die geen ID of naam hebben.

CSS-kiezers in Selenium hebben veel formaten, maar we zullen ons alleen concentreren op de meest voorkomende. De verschillende soorten CSS-locator in Selenium IDE

  • Label en ID
  • Tag en klasse
  • Tag en attribuut
  • Tag, klasse en attribuut
  • Innerlijke tekst

Wanneer we deze strategie gebruiken, zetten we altijd het doel vooraf box met “css=” zoals hieronder zal worden getoondwing voorbeelden.

tag en id – CSS-kiezer

Opnieuw zullen we Facebook's Email tekst box in dit voorbeeld. Zoals u zich kunt herinneren, heeft het een ID van “email”, en we hebben er al toegang toe gehad in het gedeelte ‘Lokaliseren op ID’. Deze keer gebruiken we een Selenium CSS Selector met ID om toegang te krijgen tot datzelfde element.

Syntaxis

css=tag#id

  • tag = de HTML-tag van het element waartoe toegang wordt verkregen
  • # = het hekje. Dit moet altijd aanwezig zijn bij gebruik van een Selenium CSS Selector met ID
  • id = de ID van het element waartoe toegang wordt verkregen

Houd er rekening mee dat de ID altijd wordt voorafgegaan door een hekje (#).

Stap 1) Navigeer naar www.facebook.com. Gebruik Firebug om de “Email of Telefoon”-tekst box.

Houd er op dit moment rekening mee dat de HTML-tag “invoer” is en de ID “email”. Onze syntaxis is dus “css=input#email'.

Tag en ID - CSS-kiezer

Stap 2) Voer “css=invoer#email'in het Doel box van Selenium IDE en klik op de knop Zoeken. Selenium IDE zou dat element moeten kunnen benadrukken.

Tag en ID - CSS-kiezer

tag en klasse – CSS-kiezer

CSS Selector in Selenium met behulp van een HTML-tag en een klassenaam is vergelijkbaar met het gebruik van een tag en ID, maar in dit geval wordt een punt (.) gebruikt in plaats van een hekje.

Syntaxis

css=tag.class

  • tag = de HTML-tag van het element waartoe toegang wordt verkregen
  • . = het puntteken. Dit moet altijd aanwezig zijn bij gebruik van een CSS-kiezer met klasse
  • class = de klasse van het element waartoe toegang wordt verkregen

Stap 1) Ga naar de demopagina http://demo.guru99.com/test/facebook.html en gebruik Firebug om de “Email of Telefoon”-tekst box. Merk op dat de HTML-tag ‘input’ is en de klasse ‘inputtext’.

Tag en klasse - CSS-kiezer

Stap 2) Voer in Selenium IDE “css=input.inputtext” in bij Doel box en klik op Zoeken. Selenium IDE zou de Email of Telefoontekst box.

Tag en klasse - CSS-kiezer

Houd er rekening mee dat wanneer meerdere elementen dezelfde HTML-tag en -naam hebben, alleen het eerste element in de broncode wordt herkend. Gebruik Firebug om de wachtwoordtekst te inspecteren box op Facebook en merk op dat het dezelfde naam heeft als de Email of Telefoontekst box.

Tag en klasse - CSS-kiezer

De reden waarom alleen de Email of Telefoontekst box In de vorige afbeelding werd benadrukt dat dit op de eerste plaats komt in de paginabron van Facebook.

Tag en klasse - CSS-kiezer

tag en attribuut – CSS-kiezer

Deze strategie maakt gebruik van de HTML-tag en een specifiek attribuut van het element waartoe toegang moet worden verkregen.

Syntaxis

css=tag[attribute=value]

  • tag = de HTML-tag van het element waartoe toegang wordt verkregen
  • [ en ] = vierkant brackets waarbinnen een specifiek attribuut en de bijbehorende waarde worden geplaatst
  • attribuut = het attribuut dat moet worden gebruikt. Het is raadzaam om een ​​attribuut te gebruiken dat uniek is voor het element, zoals een naam of ID.
  • waarde = de corresponderende waarde van het gekozen attribuut.

Stap 1) Navigeer naar de registratiepagina van Mercury Tours http://demo.guru99.com/test/newtours/register.php en inspecteer de tekst "Achternaam". box. Noteer de HTML-tag (“invoer” in dit geval) en de naam (“achternaam”).

Tag en attribuut - CSS-kiezer

Stap 2) Voer in Selenium IDE “css=input[naam=achternaam]” in bij Doel box en klik op Zoeken. Selenium IDE zou toegang moeten hebben tot de achternaam box succes.

Tag en attribuut - CSS-kiezer

Wanneer meerdere elementen dezelfde HTML-tag en hetzelfde attribuut hebben, wordt alleen de eerste herkend. Dit gedrag is vergelijkbaar met het lokaliseren van elementen met behulp van CSS-selectors met dezelfde tag en klasse.

tag, klasse en attribuut – CSS-kiezer

Syntaxis

css=tag.class[attribute=value]

  • tag = de HTML-tag van het element waartoe toegang wordt verkregen
  • . = het puntteken. Dit moet altijd aanwezig zijn bij gebruik van een CSS-kiezer met klasse
  • class = de klasse van het element waartoe toegang wordt verkregen
  • [ en ] = vierkant brackets waarbinnen een specifiek attribuut en de bijbehorende waarde worden geplaatst
  • attribuut = het attribuut dat moet worden gebruikt. Het is raadzaam om een ​​attribuut te gebruiken dat uniek is voor het element, zoals een naam of ID.
  • waarde = de corresponderende waarde van het gekozen attribuut.

Stap 1) Ga naar de demopagina http://demo.guru99.com/test/facebook.html en gebruik Firebug om de 'Email of Telefoon' en 'Wachtwoord' invoeren boxes. Noteer hun HTML-tag, klasse en attributen. Voor dit voorbeeld selecteren we hun 'tabindex'-attributen.

Tag, klasse en attribuut - CSS-kiezer

Stap 2) We hebben toegang tot de 'Email of Telefoon'-tekst box Eerst. We zullen dus een tabindex-waarde van 1 gebruiken. Voer "css=input.inputtext[tabindex=1]" in Selenium IDE's Target in box en klik op Zoeken. De 'Email of Telefoon'-invoer box moet worden benadrukt.

Tag, klasse en attribuut - CSS-kiezer

Stap 3) Om toegang te krijgen tot de wachtwoordinvoer box, vervang eenvoudigweg de waarde van het tabindex-attribuut. Voer “css=input.inputtext[tabindex=2]” in bij Doel box en klik op de knop Zoeken. Selenium IDE moet de wachtwoordtekst kunnen identificeren box succes.

Tag, klasse en attribuut - CSS-kiezer

innerlijke tekst – CSS-kiezer

Zoals je misschien hebt gemerkt, krijgen HTML-labels zelden de kenmerken id, name of class toegewezen. Dus, hoe krijgen we er toegang toe? Het antwoord ligt in het gebruik van hun innerlijke teksten. Innerlijke teksten zijn de daadwerkelijke tekenreekspatronen die het HTML-label op de pagina weergeeft.

Syntaxis

css=tag:contains("inner text")

  • tag = de HTML-tag van het element waartoe toegang wordt verkregen
  • binnentekst = de binnentekst van het element

Stap 1) Navigeer naar de startpagina van Mercury Tours http://demo.guru99.com/test/newtours/ en gebruik Firebug om het label "Wachtwoord" te onderzoeken. Let op de HTML-tag (in dit geval 'font') en merk op dat deze geen class-, id- of name-attributen heeft.

Binnentekst - CSS-kiezer

Stap 2) Type css=font:contains(“Wachtwoord:”) in het doel van Selenium IDE box en klik op Zoeken. Selenium IDE zou toegang moeten hebben tot het wachtwoordlabel, zoals weergegeven in de onderstaande afbeelding.

Binnentekst - CSS-kiezer

Stap 3) Vervang deze keer de binnentekst door “Boston”, zodat uw doel nu “css=font:contains(“Boston”)” wordt. Klik op Zoeken. Je zou moeten opmerken dat de “Boston naar San Francisco'-label wordt gemarkeerd. Dit laat zien dat Selenium IDE toegang heeft tot een lang label, zelfs als je zojuist het eerste woord van de binnentekst hebt aangegeven.

Binnentekst - CSS-kiezer

Samengevat

Syntaxis voor lokaliseren op basis van CSS-kiezergebruik

Methode Doelsyntaxis Voorbeeld
Label en ID css=tag#id css=invoer#email
Tag en klasse css=tag.class css=invoer.invoertekst
Tag en attribuut css=tag[attribuut=waarde] css=invoer[naam=achternaam]
Tag, klasse en kenmerk css=tag.classattribute=waarde] css=invoer.invoertekst[tabindex=1]