Finding elements by their attributes

In this example, we will look for the button that has the value chocolate. On web page buttons, a value is what is displayed on the screen.

The syntax for looking at the attribute is node[attribute='value']. So in the case of the button with the value chocolate, it will be input[value='chocolate']. If you were to put that into Selenium IDE, it will have the format css=input[value='chocolate'] and when you click the Find button, you will see the same as shown in the following screenshot:

Another example of this is if you were trying to find an element according to its href. The syntax for this will be a[href='path']. You can try this on the Index page and try and find the link to this chapter. When you have done it, it should look something like css=a[href='/chapter2']. If you click the Find button, it will highlight the Chapter 2 link.

Chaining of attributes is also supported in Selenium to make sure that your test is using one specific element on the page. The syntax will be css=node[attr1='value1'][attr2='value2']. An example on the page that we are working against will be css=input[id='but1'][value='Button with ID'];. This will find the button with the value Button with ID. You can chain as many attributes as you want in this manner.

Performing partial matches on attributes content

In XPath queries, we saw that we can use contains to find partial matches of values to attributes. This can be extremely useful for locating elements based on part of their ID if it is dynamically generated.

The following is a table explaining the different syntax needed to find the CSS, and after this, we will have a look at some working CSS locator examples:

In the Finding elements by direct XPath section of this chapter, we had a look at the XPath //div[contains(@id,'time_')], which has a dynamic ID. The equivalent CSS selector will be div[id^='time_'] or div[id*='time_']. The following screenshot shows both of the selectors highlighting the element we want:

Finding the nth element with CSS

There are times when we need to find the nth element after a parent element on the page. In the XPath examples, we looked at the second input after div with the leftdiv class. The XPath looked like this: xpath=//div[@class='leftdiv']/input[2]. To find the second to nth element, we will need to use pseudo classes. Pseudo classes are used to add special effects to selectors. In this case, we will use :nth-child for the first example:

Unfortunately, Selenium does not support the :nth-of-type pseudo-class, so you will not be able to access the specific type. This pseudo class is extremely greedy in the way that it does look up over the page. It is also not available to the element selector library that is in use by Selenium. This is why the selector is using the * wildcard and then finding nth-child from our starting div. The downside to using a selector in this manner is, if any other node was placed in the way, it will make the tests fail.

Finding an element by its inner text or partial text

Finding elements by their inner text can also be quite useful. In the XPath section of the book, we used the text() function to see the text it had. Earlier, we used xpath=//div[contains(text(),'element has a ID')] to find div with text in it. To update this XPath to a CSS Selector, we will need to use the :contains pseudo class. This pseudo class is part of Sizzle, which is used in Selenium IDE and Selenium RC. This will only work on browsers that do not have the querySelector CSS available. WebDriver delegates this task down to the browser if it can. I will recommend not using :contains if you plan on moving to Selenium WebDriver.