CSS selectors

We saw in the previous section that XPath selectors can offer your tests a lot of flexibility to find elements on the page. Here, we will find the elements using CSS selectors (selectors are patterns used to select the elements you want to style.)

Note

It must be noted that Selenium IDE and Selenium RC use Sizzle, the framework used for selectors in jQuery, to find elements on the page. Not all of these can be translated to work in Selenium WebDriver.

Finding elements by CSS

We discussed that finding elements by XPath can be an extremely costly exercise. A way around this is to use CSS selectors to find the objects that you need. Selenium is compatible with CSS 1.0, CSS 2.0, and CSS 3.0 selectors. There are a number of items that are supported, such as namespace in CSS 3.0, and some pseudo classes and pseudo elements.

The syntax of your locator will look like css=cssSelector. Let's create our first selector to find an element on our page:

  1. Open Selenium IDE.
  2. Navigate to http://book.theautomatedtester.co.uk/chapter2 and click on the Firebug icon. Click on the Firefinder tab in Firebug.
  3. We will look at one of the buttons in div with the ID divontheleft. The CSS selector for the buttons will be div.leftdiv input. Place that into FireFinder and click on the Filter button.
  4. Your browser should look something like the following screenshot:
    Finding elements by CSS
  5. Now, if you were to put this into Selenium IDE , insert css=div.leftdiv input into the Target textbox and click on the Find button, it should look like the following screenshot. You can also write this as div[class='leftdiv'] in Firefinder to make it look similar to XPath:
    Finding elements by CSS

We saw how Selenium has used the same CSS selector to find a button. Unlike in normal CSS, Selenium is only interested in the first element that matches the query, and this is why in the second picture, only the first button was highlighted and not its sibling.

Using child nodes to find the element

In the previous example, we saw that we were able to find the input button that was a child of the div node in the DOM. The div.leftdiv input will look for div and then look for an input node in the DOM that is below it. It looks for any descendant that will match. This is the equivalent to using descendant in your XPath query.

If we needed to look for the child of the element, we will have to place > between the div selector and the input selector. Your locator will look like css=div.leftdiv > input or css=div.leftdiv input. In the case of the Chapter 2 page of the website, both will work as they are direct children of div.leftdiv.

Using sibling nodes to find the element

Finding elements by using a sibling node in the DOM is probably the most common way to access an element. In the XPath section of the book, we saw that we can use the following-sibling operator in the XPath Query. The equivalent CSS Selector syntax is a + between DOM nodes in the query. It will check its direct next node to see if it matches until it finds the element. So, working against the HTML, we will create a CSS selector to find the second input button:

<div id="divontheleft" class="leftdiv">
  <input id='but1' value='Button with ID' type='button'/>
  <br/>
  <input value='Sibling Button' type='button'/>
</div>

The css=input#but1 input will find the first button and then its sibling is br and its sibling is input. The final selector will look like this:

css=input#but1 + br + input.

You can see this in the following screenshot of Selenium IDE:

Using sibling nodes to find the element

Using CSS class attributes in CSS selectors

Finding elements by their CSS class is probably the most common method. A lot of the queries that people create start with a containing node, distinguishing it by the CSS class, and then moving through the DOM to a child or grandchild node to find the element that you wish to work against. The syntax for finding the item is to use the node, such as div, then a dot, and then the class. For example, to find div with the centerdiv class, it should look like this: css=div.centerdiv.

Using CSS class attributes in CSS selectors

Using element IDs in CSS selectors

As we saw in XPath queries, there are times when we need to find the element that is next to an element for which we know the ID. This means that we can access a lot more of the DOM, and since it is a CSS selector, there is a good chance that it will be a lot faster than its XPath equivalent.

To find an element by ID in a CSS selector, we need to place a # in front of the ID of the element being searched in the CSS selector. For example, if we wanted to find div with the ID of divinthecenter, the CSS selector will look like this: css=div#divinthecenter. You can also simplify this by using css=#divinthecenter. This is due to IDs on elements having to be unique.

If you were to place this in the Target textbox of Selenium IDE and click Find, it should highlight the item, as shown in the following screenshot:

Using element IDs in CSS selectors
上一章目录下一章