Selenium Web Driver API -CSS selector’s locators for with example

In our automation script if we do not find an option to choose Id or Name, you can go with to CSS locators as the best alternative.

CSS full form is "Cascading Style Sheets" and it is meant for to display HTML in structured and colorful styles are applied to webpage.

Selectors are define patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Visit to know more W3.Org Css selectors

• CSS has more Advantage than Xpath
• CSS is much faster and look like simpler than the Xpath.
• In IE Xpath works very slow, however CSS works faster then compared to Xpath.

Syntax: 

tagName[attributename=attributeValue]

Example 1: input[id=username]

Example 2: input[name= username][type=text]

CSS selectors  there are two special characters this is meant for to play an important role to identify the element in DOM.

1. dot (.) Refers To Class.
Syntax:

css=input.submitbtn

For example the below is the html tag for a sign button

<button class="submit btn primary-btn flex-table-btn js-submit" type="submit" style="background-color: rgb(86, 153, 227);">

 Log in

 </button>

In the above html, if there are multiple classes used for the single button. How to work in such a situation?

Below are the examples to work with classes. If you notify below, we have combined multiple classes to work. As the class is not unique like ID, we may require to join two classes and get the accurate element.

Example 1: css=.primary-btn

Example 2: css=.btn.primary-btn

Example 3: css=.submit.primary-btn

The above example can be written like below in selenium web driver API 

WebElement ele1 = driver.findElement(By.cssSelector(".primary-btn"));

WebElement ele2 = driver.findElement(By.cssSelector("btn.primary-btn"));

WebElement ele3 = driver.findElement(By.cssSelector("btn.primary-btn"));

2. Hash (#) Refers to Id, id should always unique

ie. 

css=input[id=email]