Time for action - finding elements by CSS - Selenium

So,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 like name space 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://www.wisdomjobs.com/chapter(Locators) and click on the Firebug icon. Click on the Firefinder tab in Firebug.

  3. We are going to look at one of the buttons in the div with the ID divontheleft. The CSS Selector for the buttons would be div.leftdiv input. Place that into FireFinder and click on the Filter button.

  4. Your browser should show something like the following screenshot:

  5. If you were now 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 next screenshot. You can also write this as div[class='leftdiv'] in Firefinder to make it look similar to XPath:

What just happened?

We have seen 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 that 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. div.leftdiv input will look for the div and then look for an input node in the DOM that is below that. 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 would have to place > between the div selector and the input selector. Your locator would look like css=div.leftdiv> input or css=div.leftdiv input. In the case of the Chapter (Locators) 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 could 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:

css=input#but1 will find the first button and then its sibling is the 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 CSS class attributes in CSS selectors

Finding elements by their CSS class is going to be 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 again. The syntax for finding the item is to put the node, like a div, then put a dot, and then the class. For example, to find the div with the class centerdiv it would look like this: css=div.centerdiv.

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 that we know the ID of. 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 in the CSS selector. For example, if we wanted to find a div with the ID of divinthecenter, the CSS selector would look like this: css=div#divinthecenter. You can also simplify this down to 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 in the following screenshot:

Finding elements by their attributes

In the Using element attributes in XPath queries section, we saw how useful it could be to find an element by looking at their attributes. It could be that an element may have the same name but a different value, so finding them according to their attributes can be extremely powerful. In this example, we are going to 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 that would 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='/chapter(locators)'].

If you click the Find button, it will highlight the Chapter (locators) 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 would 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.

Partial matches on attributes

In XPath queries we saw that we could 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. Following is a table explaining the different syntax needed and after that we have a look at some working examples:



A =

Finds the item starting with the value passed in. This is the equivalent to the Xpath starts-with.


Finds the item ending with the value passed in. This is the equivalent to the Xpath ends-with.

* =

Finds the item which matches the attribute that has the value that partially matches. This is equivalent to the Xpath contains

In the XPath section of this chapter,we had a look at the XPath //div [contains(@ id,'time_')] which has a dynamicID.

The equivalent CSS selector would be div [id^='time_'] or div[id*='time_'].

The following screenshot shows both of the selectors highlighting the element we want:

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Selenium Topics