Pages

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.

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=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.