CSS selektory

V tejto časti tutoriálu sa naučíme o selektoroch CSS a vytvoríme selektory CSS ručne pomocou rôznych atribútov HTML webových prvkov. Na získanie informácií HTML webových prvkov použijeme nástroj firebug alebo nástroj pre vývojárov. Podrobnosti o stiahnutí a používaní nástroja firebug/developer nájdete v tutoriáli – Lokátory v Selenium WebDriver.

Obsah

CSS a selektory CSS – úvod

CSS je skratka pre kaskádové štýly, ktoré sa používajú na štylizáciu rôznych prvkov webovej stránky HTML. V súboroch .css môžeme vyhľadať konkrétne prvky webovej stránky (.html súbory) a potom ich naštýlovať, napríklad nastaviť veľkosť písma, šírku, výšku atď.

Na vyhľadávanie prvkov webu, ktoré sa majú naštýlovať, používame určité pravidlá poskytované ako selektory CSS.

Napríklad nasledujúci príkaz najprv nájde webový prvok spĺňajúci vzor selektora – „div#searchBox“ a potom zarovná text v ňom na stred.

div#searchBox {text-align: center;}

V programe Selenium môžeme tieto pravidlá/vzory výberov CSS použiť na vyhľadávanie webových prvkov a neskôr na nich vykonávať rôzne operácie. Napríklad:

//Locating searchBox element using CSS Selector

WebElement searchBox = driver.findElement(By.cssSelector(„div#searchBox“));

//Performing click operation on the element

searchBox.sendKeys(„ITtester“);

Pozrime sa teraz na rôzne pravidlá selektorov CSS spolu s ich syntaxou a príkladom použitia.

Selektory CSS

Nižšie uvádzame syntax a príklady, ako vyhľadať požadované prvky a použiť ich v skriptoch selenium.

Používanie ID

Pravidlo selektorov CSS – #id

Pre nižšie uvedenú ukážku HTML-

<button id=“submitButton1″ type=“button“ class=“btn“>Submit</button>

• Lokátor CSS – #submitButton1
• Popis – ‚#submitButton1‘ vyberie prvok s id ‚submitButton1‘.

Používanie triedy – class

Pravidlo selektora CSS – .class

Pre nižšie uvedenú ukážku HTML-

<button id=“submitButton1″ type=“button“ class=“btn“>Submit</button>

• Lokátor CSS – .btn
• Popis – ‚.btn‘ vyberie všetky prvky s triedou ‚btn‘.

Použitie značky – tag

Pravidlo selektora CSS – tagName

Pre nižšie uvedenú ukážku HTML-

<input id=“fname“ type=“text“ name=“firstName“ class=“textbox“>

• CSS Locator – vstup
• Popis – ‚input‘ vyberie všetky prvky typu input.

Používanie atribútov a ich hodnoty

Pravidlo selektora CSS – [attributeName=’attributeValue‘]

Pre nižšie uvedenú ukážku HTML-

<input id=“fname“ type=“text“ name=“firstName“ class=“textbox“>

• CSS Locator – [name=’firstName‘]
• Popis – [name=’firstName‘] vyberie prvky s atribútom name s hodnotou ‚firstName‘.

Pomocou týchto základných pravidiel lokalizácie webových prvkov môžeme teraz v spojení s nimi vytvoriť robustnejšie lokátory, ktoré budú vyberať jedinečné prvky.

Používanie značiek a id (tags and id)

Pravidlo selektora CSS – tag#id

Pre nižšie uvedenú ukážku HTML-

<input id=“fname“ type=“text“ name=“firstName“ class=“textbox“>

• Lokátor CSS – input#fname
• Popis – input#fname vyberie prvok ‚input‘ s id ‚fname‘.

Použitie značiek a triedy (tags and class)

Pravidlo selektora CSS – tag.class

Pre nižšie uvedenú ukážku HTML-

<input id=“fname“ type=“text“ name=“firstName“ class=“textbox“>

• Lokátor CSS – input.textbox
• Popis – input.textbox vyberie prvok ‚input‘ s id ‚textbox‘.

Používanie značiek a atribútov (tags and attributes)

Pravidlo selektora CSS – tag[attributeName=’attributeValue‘]

Pre nižšie uvedenú ukážku HTML-

<input id=“fname“ type=“text“ name=“firstName“ class=“textbox“>

• Lokátor CSS – input[name=“firstName“]
• Popis – input[name=“firstName“] vyberie prvok „input“ s atribútom „name“ s hodnotou „firstName“.

Vyhľadávanie podriadených prvkov (len priame podriadené prvky – child)

Pravidlo selektora CSS – parentLocator>childLocator

Pre nižšie uvedenú ukážku HTML-

<div id=“buttonDiv“ class=“small“>

<button id=“submitButton1″ type=“button“ class=“btn“>Submit</button>

</div>

• Lokátor CSS – div#buttonDiv>button
• Popis – ‚div#buttonDiv>button‘ najprv prejde na prvok div s id ‚buttonDiv‘ a potom vyberie jeho dcérsky prvok – ‚button‘.

Umiestnenie prvkov vo vnútri iných prvkov (child/subchild)

Pravidlo selektora CSS – locator1 locator2

Pre nižšie uvedenú ukážku HTML-

<div id=“buttonDiv“ class=“small“>

<button id=“submitButton1″ type=“button“ class=“btn“>Submit</button>

</div>

• Lokátor CSS – tlačidlo div#buttonDiv
• Popis – ‚div#buttonDiv button‘ najprv prejde na prvok div s id ‚buttonDiv‘ a potom vyberie prvok ‚button‘ v ňom (ktorý môže byť jeho potomkom alebo podriadeným).

n-té dieťa

Pravidlo selektora CSS – :nth-child(n)

Pre nižšie uvedenú ukážku HTML-

<ul id=“testingTypes“>

   <li>Automation Testing</li>

   <li>Performance Testing</li>

   <li>Manual Testing</li>

</ul>

• Lokátor CSS – #testingTypes li:nth-child(2)
• Popis – ‚#testingTypes li:nth-child(2)‘ vyberie prvok s id ‚testingType‘ a potom nájde 2. potomka typu li, t. j. prvok zoznamu ‚Performance Testing‘.

Vyhľadávanie súrodencov

Pravidlo selektora CSS – lokátor1+lokátor2

Pre nižšie uvedenú ukážku HTML-

<ul id=“testingTypes“>

   <li id=“automation“>Automation Testing</li>

   <li>Performance Testing</li>

   <li>Manual Testing</li>

</ul>

• Lokátor CSS – li#automation + li
• Popis – ‚li#automation + li‘ najprv prejde na prvok li s id ‚automation‘ a potom vyberie jeho susedný li, t. j. prvok zoznamu ‚Performance Testing‘.

Na spracovanie dynamických prvkov, ktorých id a iné lokátory sa generujú dynamicky (nie sú vopred známe). Uvedené lokátory môžeme využiť pomocou rôznych rodičovsko-súrodeneckých vzťahov dynamických prvkov. Okrem toho môžeme použiť aj niektoré špeciálne lokátory CSS, pomocou ktorých môžeme priradiť čiastočné hodnoty atribútov.

^ – Začína sa na

Pravidlo selektora CSS – [attribute^=attributeValue]

Pre nižšie uvedenú ukážku HTML-

<button id=“user1_btn_263″ type=“button“ class=“btn“>Odoslať</button>

• Lokátor CSS – id^=“user1″
• Popis – ‚id^=“user1″‘ vyberie prvok, ktorého id začína hodnotou „user1

$ – Končí sa na

Pravidlo selektora CSS – [attribute$=attributeValue]

Pre nižšie uvedenú ukážku HTML-

<button id=“user1_btn_263″ type=“button“ class=“btn“>Submit</button>

• Lokátor CSS – id$=“btn_263″
• Popis – ‚id$=“btn_263″‘ vyberie prvok, ktorého id končí hodnotou „btn_263

* – Obsahuje

Pravidlo selektora CSS – [attribute*=attributeValue]

Pre nižšie uvedenú ukážku HTML-

<button id=“user1_btn_263″ type=“button“ class=“btn“>Submit</button>

• Lokátor CSS – id*=“btn“
• Popis – ‚id*=“btn“‚ vyberie prvok, ktorého id obsahuje hodnotu „btn“

To je všetko, čo máme pripravené v tomto článku. Kompletný Selenium tutoriál.