In WebDriver, in order to interact with a web element, such as clicking, or typing, we first need to locate the elements.
There are different ways we can locate elements in WebDriver. In this WebDriver tutorial, we look at how we can use CSS Selectors in more detail and with examples to interact with web elements.
Using CSS selectors to locate elements has some benefits:
1. It’s faster;
2. It’s more readable;
3. It’s more used.
Locating Elements by Attribute
Let’s imagine we have a tag with the following attributes [id, class, name, value]
<input type="text" id="fistname" name="first_name" class="myForm">
The generic way of locating elements by their attribute in CSS Selectors is
css = element_name[<attribute_name>='<value>']
We can use the same approach to locate by id and class attributes, however, there are short forms that we can use to make it more readable.
In CSS, we can use # notation to select the id:
css="input#firstname" or just css="#firstname"
We can also use the . notation to select the class
css="input.myForm" or just css=".myForm"
Take extra care when using the short form notations, especially the . class notation as there could be many web elements on the html source with the same class attribute.
Locating elements by More Than One Attribute
Sometimes there is a need to be more specific with the selection criteria in order to locate the correct element.
Suppose you have a html snippet as below
<div class="ajax_enabled" style="display:block">
The value of the display could either be “none” or “block” depending on the ajax call. In this situation we have to locate the element by both class and style.
We could use
Locating Child Element
<div id="child"><img src="./logo.png"></div>
To locate the image tag, we would use:
There are occasions when there are multiple child elements within the same parent element such as list elements
As can be seen, the individual list elements don’t have any id associated with them. If we want to locate the element with text ‘Orange’, we have to use “nth-of-type”
Similarly, if we need to select the last child element, i.e. ‘Banana’, we can use
Strings and Randomly Generated Ids
We can also use string matchers to locate elements:
To select the first div element, we would use ^= which means ‘starts with’:
To select second div element, we would use $= which means ‘ends with’:
To select the last div element we would use *= which means ‘sub-string’
We can also use the ‘contains’