CSS-väljare in Selenium

Vad är en CSS-väljare?

CSS-väljare i Selenium är strängmönster som används för att identifiera ett element baserat på en kombination av HTML-tagg, id, klass och attribut. Lokalisering av CSS-väljare i Selenium är mer komplicerad än de tidigare metoderna, men det är den vanligaste lokaliseringsstrategin för avancerade Selenium användare eftersom den kan komma åt även de element som inte har något ID eller namn.

CSS-väljare i Selenium har många format, men vi kommer bara att fokusera på de vanligaste. De olika typerna av CSS Locator i Selenium IDE

• Tagg och ID
• Tagg och klass
• Tagg och attribut
• Tagg, klass och attribut
• Inre text

När vi använder denna strategi har vi alltid prefixet Target box med "css=" som kommer att visas i följande exempel.

tagg och id – CSS-väljare

Återigen kommer vi att använda Facebooks e-posttextruta i det här exemplet. Som du kan minnas har den ett ID för "e-post", och vi har redan kommit åt det i avsnittet "Lokalisera efter ID". Den här gången kommer vi att använda en Selenium CSS-väljare med ID för att komma åt samma element.

syntax

css=tag#id

• tag = HTML-taggen för det element som används
• # = hash-tecknet. Detta ska alltid finnas när du använder en Selenium CSS-väljare med ID
• id = ID för elementet som nås

Tänk på att ID alltid föregås av ett hash-tecken (#).

Steg 1) Navigera till www.facebook.com. Använd Firebug, undersök textrutan "E-post eller telefon".

Observera att HTML-taggen är "input" och dess ID är "e-post". Så vår syntax kommer att vara "css=input#email".

Steg 2) Ange "css=input#email" i Target Låda av Selenium IDE och klicka på knappen Sök. Selenium IDE bör kunna markera det elementet.

tagg och klass – CSS-väljare

CSS-väljare in Selenium att använda en HTML-tagg och ett klassnamn liknar att använda en tagg och ett ID, men i det här fallet används en punkt (.) istället för ett hash-tecken.

syntax

css=tag.class

• tag = HTML-taggen för det element som används
• . = pricktecknet. Detta ska alltid finnas när du använder en CSS-väljare med klass
• class = klassen för det element som nås

Steg 1) Gå till demosidan http://demo.guru99.com/test/facebook.html och använd Firebug för att inspektera textrutan "E-post eller telefon". Lägg märke till att dess HTML-tagg är "input" och dess klass är "inputtext".

Steg 2) In Selenium IDE, ange "css=input.inputtext" i Target rutan och klicka på Sök. Selenium IDE bör kunna känna igen textrutan E-post eller telefon.

Observera att när flera element har samma HTML-tagg och namn, kommer endast det första elementet i källkoden att kännas igen. Använd Firebug, inspektera textrutan Lösenord i Facebook och lägg märke till att den har samma namn som textrutan E-post eller telefon.

Anledningen till att endast textrutan E-post eller telefon markerades i föregående illustration är att den kommer först i Facebooks sidkälla.

tagg och attribut – CSS-väljare

Denna strategi använder HTML-taggen och ett specifikt attribut för det element som ska nås.

syntax

css=tag[attribute=value]

• tag = HTML-taggen för det element som används
• [ och ] = hakparenteser inom vilka ett specifikt attribut och dess motsvarande värde kommer att placeras
• attribut = det attribut som ska användas. Det är tillrådligt att använda ett attribut som är unikt för elementet, såsom ett namn eller ID.
• värde = motsvarande värde för det valda attributet.

Steg 1) Navigera till Mercury Tours registreringssida http://demo.guru99.com/test/newtours/register.php och inspektera textrutan "Efternamn". Notera dess HTML-tagg ("indata" i det här fallet) och dess namn ("efternamn").

Steg 2) In Selenium IDE, ange "css=input[namn=efternamn]" i Target rutan och klicka på Sök. Selenium IDE bör kunna komma åt rutan Efternamn.

När flera element har samma HTML-tagg och attribut, kommer endast det första att kännas igen. Det här beteendet liknar att lokalisera element med CSS-väljare med samma tagg och klass.

tagg, klass och attribut – CSS-väljare

syntax

css=tag.class[attribute=value]

• tag = HTML-taggen för det element som används
• . = pricktecknet. Detta ska alltid finnas när du använder en CSS-väljare med klass
• class = klassen för det element som nås
• [ och ] = hakparenteser inom vilka ett specifikt attribut och dess motsvarande värde kommer att placeras
• attribut = det attribut som ska användas. Det är tillrådligt att använda ett attribut som är unikt för elementet, såsom ett namn eller ID.
• värde = motsvarande värde för det valda attributet.

Steg 1) Gå till demosidan http://demo.guru99.com/test/facebook.html och använd Firebug för att inspektera inmatningsrutorna "E-post eller telefon" och "Lösenord". Notera deras HTML-tagg, klass och attribut. För det här exemplet kommer vi att välja deras 'tabindex'-attribut.

Steg 2) Vi kommer först åt textrutan 'E-post eller telefon'. Därför kommer vi att använda ett tabindex-värde på 1. Ange "css=input.inputtext[tabindex=1]" i Selenium Idus Target rutan och klicka på Sök. Inmatningsrutan 'E-post eller telefon' ska vara markerad.

Steg 3) För att komma åt inmatningsrutan Lösenord, ersätt helt enkelt värdet för tabindex-attributet. Ange "css=input.inputtext[tabindex=2]" i Target rutan och klicka på knappen Sök. Selenium IDE måste kunna identifiera textrutan Lösenord med framgång.

inre text – CSS-väljare

Som du kanske har märkt får HTML-etiketter sällan id, namn eller klassattribut. Så, hur kommer vi åt dem? Svaret är genom att använda deras inre texter. Inre texter är de faktiska strängmönster som HTML-etiketten visar på sidan.

syntax

css=tag:contains("inner text")

• tag = HTML-taggen för det element som används
• inre text = elementets inre text

Steg 1) Navigera till Mercury Tours hemsida http://demo.guru99.com/test/newtours/ och använd Firebug för att undersöka etiketten "Lösenord". Notera dess HTML-tagg (som är "font" i det här fallet) och lägg märke till att den inte har några klass-, id- eller namnattribut.

Steg 2) Typ css=font:contains(“Lösenord:”) in Selenium Idus Target rutan och klicka på Sök. Selenium IDE bör kunna komma åt lösenordsetiketten som visas i bilden nedan.

Steg 3) Den här gången byter du ut den inre texten med "Boston" så att din Target kommer nu att bli "css=font:contains("Boston"). Klicka på Sök. Du bör märka att etiketten "Boston till San Francisco" blir markerad. Det här visar dig det Selenium IDE kan komma åt en lång etikett även om du precis angav det första ordet i dess inre text.

Sammanfattning

Syntax för lokalisering med CSS-väljaranvändning

Metod	Target syntax	Exempelvis
Tagg och ID	css=tag#id	css=ingång#e-post
Tagg och klass	css=tag.klass	css=input.inputtext
Tagg och attribut	css=tag[attribut=värde]	css=input[namn=efternamn]
Tag, klass och attribut	css=tag.klass[attribut=värde]	css=input.inputtext[tabindex=1]