Selenium css locators tutorial with example

As you know, Locators in selenium webdriver software testing tool are main elements and CSS Locator is another alternative of Xpath element locator, ID or Name locator or any other element locators in selenium webdriver software automation testing tool. Full form of CSS is "Cascading Style Sheets" and it define that how to display HTML elements on webpage of software web application. 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 software testing tool? 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 software automation tool. 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 on page of software web application.)

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 + select or 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.

9 comments:

  1. How about Label with only text as Sign Out?
    < label > Sign Out < / label >
    I was able to find the div containing this label under li.
    Over all structure is as below

    < div class = menu-panel right >
    < ul >
    < li >
    < a href = "javascript:void(0) ;" >
    < label > Sign Out < / label >
    < / div >

    Thanks for your help.

    ReplyDelete
  2. Nice Article, very use full to identify locators using css selector!

    ReplyDelete
  3. best post ...really helpful

    ReplyDelete
  4. could kindly let me know what are the drawabacks of css locator?

    ReplyDelete
  5. good article

    please change this text creating confusion.
    id$ is for id attribute ending with 'chInput' and not starting with 'chInput'

    css=input[id$='chInput'] \\\\ It will find input node which contains 'id' attribute starting with 'chInput' text. (Here, $ describes the ending text).

    ReplyDelete