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’
Attribute NOT contain a specific value
In WebDriver, how do you find elements whose attribute contain values which you don’t want to select? This CSS selector example shows how NOT to select by specific attribute value
Suppose you have many elements which share the same attribute and attribute value, but some of those elements have other variables appended to the value. e.g:
<div class="day past calendar-day-2017-02-13 calendar-dow-1 unavailable">
<div class="day today calendar-day-2017-02-14 calendar-dow-2 unavailable">
<div class="day calendar-day-2017-02-15 calendar-dow-3">
<div class="day calendar-day-2017-02-16 calendar-dow-4">
In the above snippet, we want to select an available day (i.e. the two last divs)
As can be seen, all four divs contain “calendar-day-” but the first two also contain “unavailable” which we don’t want.
The CSS selector for Not selecting the first two divs is
css = "div[class*=calendar-day-]:not([class*='unavailable'])"