CSS Selectors

---

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