WebDriver - CSS Selector Examples
In this post you will see examples of Selenium WebDriver CSS Selectors. Selenium WebDriver’s By class gives us the cssSelector() method in order to find elements using CSS Selector.
You can see the simple html code file (named button.html) which creates two buttons, one disabled and another enabled.
When you open the above html file in a browser it looks as below:
Example 1 - CSS Selector - using absolute path with spaces
In this example, we are locating first button using absolute path and space is given between the elements. After locating the button, its text is printed.
Result of running the above code:
Example 2 - CSS Selector - using absolute path with '>' separator
Its the same CSS Selector as used in the above example. The only difference is that we have used '>' separator instead of spaces.
Example 3 - CSS Selector - using absolute / relative path with spaces & with '>' separator
Below is the wordpress page (https://wordpress.com/wp-login.php).
When you righclick on the Username field and choose Inspect Element, following html is shown.
In this example, first check the CSS Selectors of the commented lines. The first commented line uses absolute path with '>' separator. Second commented line uses space as a separator. Moreover in the first FindElement statement, the CSS Selector "label > input" is finding the element using relative path. All the three FindElement statements will show the same result as shown below.
Result of running the above code:
Example 4 - CSS Selector - next sibling
The '+' option here is finding the next adjacent element. Firstly, we are locating the first button and then using '+' to get to next adjacent sibling.
Result of running the above code:
Example 5 - CSS Selector - relative path
It finds the first button element. We are finding the first button element (see button.html on top of this page) and printing its text.
Result of running the above code:
Example 6 - CSS Selector - id selector
In this example we are using the html tag (input) followed by hash "#" and then "id" attribute of the class (see the html code of example 3). Finally we are printing the value of the id attribute of the input tag.
Result of running the above code:
Example 7 - CSS Selector - attributes selectors
Its same html code as we saw in example 3. We are right-clicking on the Username field and choosing Inspect Element.
We are finding all the input tags where class attribute is "input" and printing their name attributes. So it prints the names of the Username and Password fields as log and pwd respectively. Refer example 3 for username and password fields.
Result of running the above code:
Example 8 - CSS Selector - class selectors
Put a . and a Class attribute value and it will return all elements with Class as input. Here we are finding only the first element with Class as input and printing the value of its "id" attribute.
Result of running the above code:
Example 9 - CSS Selector - partial match on attribute values
We are finding all the input tags where id attribute starts with "user" and printing the value of their "name" attribute. Refer Wordpress page of example 3 here.
Result of running the above code:
Other examples of CSS Selectors can be:
input[id$='user']
It means that finding all input tags with attribute id ending with 'user'.
input[id*='user']
It means finding all input tags with attribute id containing 'user'.
input[id='user'][name='my']
It means finding all input tags with id=user and name=my.
