
Identifying HTML elements in order to interact with them within you tests can be done by using CSS Selectors, which use pattern matching to easily find these elements. Below are the most used patterns to identify the elements on a page and examples of their usage:
ID
Usage: An element has an associated ID.
Syntax: #id
Example:
HTML: <ul id="listOfItems" > .... </ul>
Selector: #listOfItems
Class
Usage: An element has an associated class (or several classes).
Syntax: .class (when there is only one class). When there are several classes (in the HTML they appear within the same 'class' attribute and they are separated by spaces), the syntax will be .class1.class2.classN (basically you replace all the spaces from between the elements of the class attribute with a '.' character, and you add a leading dot to the resulting text).
Examples:
HTML: <div class="aClass" > .... </div>
Selector: .aClass
HTML: <div class="aClass anotherClass aThirdClass" > ... </div>
Selector: .aClass.anotherClass.aThirdClas
Element type
Usage: Select all elements of a type.
Syntax: elementType
Examples:
HTML: <p>...</p>
Selector: p - this will return all the 'p' elements on the page
HTML: <div class="someClass" >...</div> <div>...</div>
Selector: div - will return all the 'div' elements on the page
Child elements
Usage: Select all elements that are the n-th child of their parents.
Syntax: element:nth-child(n)
Syntax: element:nth-child(1) is the same as element:first-child
Syntax: element:nth-child(indexOfLastElement) is the same as element:last-child
Usage: Select all the children of an element (all the elements that are below the specified element in the HTML code).
Syntax: parentElement > childElement
Usage: Select all the descendants of an element (even those that are not direct children of the element).
Syntax: parentElement childElement
Examples:
HTML: <ul> <li>green</li><li>blue</li><li>red</li></ul>
Selector: li:nth-child(2) - will return the li element with the text 'blue'.
Selector: li:nth-child(1) and li:first-child - will return the li element with the text 'green'
Selector: li:nth-child(3) and li:last-child - will return the li element with the txt 'red'
Selector: ul > li - will return all the li elements
Selector: ul li - will return all the li elements also. If the syntax would have been : <div><ul><li>green</li><li>blue</li><li>red</li></ul></div> , then: ul li and div li would have returned all the li elements; div > li would have returned nothing, as there is another element that is the direct descendant of the div element, namely the ul one - the correct child selector here would be div > ul > li.
Attributes
Usage: Select all elements that have a certain attribute, no matter what its' value is.
Syntax: [attribute]
Example: [id] - all the elements that have id's
Usage: Select all the elements whose specified attribute has the specified value
Syntax: [attribute=value]
Example: [class=firstClass]
Usage: Select all the elements whose certain attribute contains a certain string of characters.
Syntax: [attribute*=value] - all the elements for which the specified attribute contains the 'value' string
Example: [class*=classNumber] - all the elements that have a class attribute containing the 'classNumber' string. For example 'classNumber1', 'classNumber2', and so on. To see a few examples of usage, here is a bit of HTML code:
<div class="firstClass">
<li>
<div class="secondClass andThirdClass" >
<h3>
<a href="aRandomLink”> randomText</a>
</h3>
<div class="fourthClass">
<div>
<div class="fifthClass">
<a class="someSpecialClass" href="#" id="firstId">
<span>Some text here</span>
</a>
</div>
<span>Yet more text</span>
</div>
</div>
</div>
</li>
<li>...same structure as the first li...</li><li>...same structure as the previous two lis</li>
</div>
To select:
the h3 element: h3
the a element whose class attribute is someSpecialClass: .someSpecialClass
the span element that has ‘Some text here’ as label: .fifthClass
the span element that has ‘Yet more text’ as label: .fourthClass span
the first li element of the first div: .firstClass li
the second li element of the first div: .firstClass li:nth-child(2)
all div elements whose class attributes contain the string ‘Class’: [class*= Class]
the div element having two class attributes, one name 'secondClass' and the second one named 'andThirdClass': .secondClass.andThirdClass