Selenium css locators tutorial with example
As you know, Locators in selenium are main elements and CSS Locator is another alternative of Xpath element locator, ID or Name locator
or any other element locators in selenium. Full form of CSS is
"Cascading Style Sheets" and it define that how to display HTML elements
on webpage. Click here to read more about CSS. There are few advantages and also few disadvantages of using CSS element locators at
place of Xpath element locators in selenium.
CSS Locators Main Advantage
Main advantage of using CSS locator is - It is much more faster and
simpler than the Xpath Locators in IE and also they are more readable
compared to Xpath locators. Also CSS locators are little faster compared
to Xpath locators in other browsers.
Note : Need good working examples on selenium IDE? Visit this link for great tutorials on selenium IDE.
Now let me come to our main point - How to write CSS locator syntax
manually for selenium. I have derived couple of CSS locator syntax with
example as bellow. I written CSS locator syntax for three
elements(Search text box, Select language drop down and "Go" button) of wikipedia website home page as shown in bellow image.
CSS locator Examples
1. Selenium CSS locator using Tag and any Attribute
css=input[type=search]\\\\ This syntax will find "input" tag node which contains "type=search" attribute.
css=input[id=searchInput]\\\\ This syntax will find "input" tag node which contains "id=searchInput" attribute.
css=form input[id=searchInput]\\\\ This syntax will find form containing "input" tag node which contains "id=searchInput" attribute.
(All three CSS path examples given above will locate Search text box.)
2. Selenium CSS locator using Tag and ID attribute
css=input#searchInput\\\\ Here, '#' sign is specially used for "id" attribute only. It will find "input" tag node which contains "id=searchInput" attribute. This syntax will locate Search text box.
3. Selenium CSS locator using Tag and class attribute
css=input.formBtn\\\\ Here, '.' is specially used for "class" attribute only. It will find "input" tag node which contains "class=formBtn" attribute. This syntax will locate Search button (go).
4. Selenium CSS locator using tag, class, and any attribute
css=input.formBtn[name=go]\\\\ It will find "input" tag node which contains "class=formBtn" class and "name=go" attribute. This syntax will locate Search button (go).
5. Tag and multiple Attribute CSS locator
css=input[type=search][name=search]\\\\ It will find "input" tag node which contains "type=search" attribute and "name=search" attribute. This syntax will locate Search text box.
6. CSS Locator using Sub-string matches(Start, end and containing text) in selenium
css=input[id^='search']\\\\ It will find input node which contains 'id' attribute starting with 'search' text.(Here, ^ describes the starting text).
css=input[id$='chInput']\\\\ It will find input node which contains 'id' attribute starting with 'chInput' text. (Here, $ describes the ending text).
css=input[id*='archIn']\\\\ It will find input node which contains 'id' attribute containing 'archIn' text. (Here, * describes the containing text).
(All three CSS path examples given above will locate Search text box.)
7. CSS Element locator syntax using child Selectors
css=div.search-container>form>fieldset>input[id=searchInput]\\\\ First it will find div tag with "class = search-container" and then it will follow remaining path to locate child node. This syntax will locate Search text box.
8. CSS Element locator syntax using adjacent selectors
css=input + input\\\\ It will locate "input" node where another "input" node is present before it on page.(for search tect box).
css=input + selector
css=input + input + select\\\\ It will locate "select" node, where "input" node is present before it on page(for language drop down).
9. CSS Element locator using contains keyword
css=strong:contains("English") \\\\ It will looks for the element containing text "English" as a value on the page.
