Javascript allows you to build dynamic locators
CONS :
Relies on the structure of the page
1.6 XPATH
While DOM is the recognized standard for navigation through an HTML element tree,
XPath is the standard navigation tool for XML; and an HTML document is also an XML
document (xHTML). XPath is used everywhere where there is XML. Valid XPath locators
can be:
-
Slower than CSS
-
Relies on browser’s XPath implementation which is not always complete (especially
on IE) and as such is not recommended for cross-browser testing
CSS :
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]
The generic way of locating elements by their attribute in CSS Selectors is
e.g.
We can use the same approach to lo
cate 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:
e.g.
We can also use the . notation to select the class
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
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
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’
Structure
Structure-Dependent Or Not?
Locators can be classified into two categories:
-
UI-element is a rather new locator
-
It was at first a Selenium IDE extension
-
It is now fully integrated into Selenium
-
See the Section 9.4, “UI-Elements:”
o Structure-based locators: locators that rely on the structure of the page to find
elements.
o Attributes-based locators: locators that relies on the attributes of the elements
to locate them
-
You should consider this before choosing a locator strategy
-
Most people choose CSS because it is the most flexible and gives a good balance
between using structure and attributes to find the elements