How to Locate an Element using CSS Selectors | Selenium Locators

This chapter is an immediate successor of types of locators. Make sure you have read that. We will see how to locate an element using CSS Selectors.

How to Locate an Element Using CSS Selectors

CSS selectors are nothing but patterns that identify an element depending upon combinations of tags, classes, id and attributes.

This right here is the bomb! Using CSS selectors you can test spots that don’t retain an ID or a name too. Also, it is more complicated than locating elements using everything we have seen so far, and yet once you get a hang of it, you will understand its real import.

When you are dealing with this, you gotta use the prefix “css=” in your target box.

There are countless combinations and formats but let’s not get into all that. We will just see some of the most commonly used ones:

Brace yourself!

Locating an Element Using Tag and ID

The syntax you gotta remember here is:

css=tag#ID

where a tag is nothing but an HTML element that corresponds to a particular selection.
# needs to be there when you are using ID to identify an element.
ID is something we had already seen in the previous chapter. It identifies a particular element.

A step by step example would help to get rid of all the doubts. Let’s use Facebook once again to

Step 1: Open Selenium IDE in your Firefox browser (Alt + Ctrl + S). You can choose to click the Selenium IDE button at the top right-hand side corner too.

Step 2: Stop the recording by pressing the Red Button on the top right-hand side corner.

Step 3: Click on the first line in the Editor pane and type “open” in the Command box below. Then type “https://www.facebook.com/” in the Target box.

Step 4: Click on the second line in the Editor pane now and type “type” in the Command box.

Step 5: Now to confirm open the website in your Firefox browser and open Firebug. (F12 button)

Step 6: Click on the Inspect button in the Firebug section.

Step 7: Now is the time to click on that Email or Phone text box of Facebook. Do that and you will find Firebug highlight its HTML code:

As you can see our tag is <input> here, and the id is “email”.

Step 8: As per our syntax we will put the stuff in the waiting target box in Selenium IDE. Make sure it is according to the format prefixed with “css=”

Step 9: Click on Find.

Doing that will blink the email box in yellow. Meaning we have found it.

Locating an Element Using Tag and Class

The second type of CSS Selectors that you might find in our “how to locate an element using CSS Selectors” chapter is the one that deals with tag and class. This is similar to locating an element using tag and ID. In here, we just need a . (dot) sign instead of # and that’s it.

So the syntax to remember here is:

css=tag.class

where . (dot) is something you need to access a class element
class specifies the class of the element you need access to.

Just take the same aforementioned example we used for Tag and Input, and look for the class value in its HTML.

There, there it is!

So in order to identify the same email box we could use its class value which is “inputtext” in this case. Put that in the syntax we saw above and it will become:

css=input.inputtext

Put the above info in the Selenium IDE target box as per Step 8, and click on Find.

When you do you will see the box email box highlight.

There is another box right next to it that has the same class name as that of the Email class:

So why didn’t clicking on Find highlight that too?

NOTE: Just remember that Selenium IDE always highlights the first one in the order the class value comes in the Page Source.

Locating an Element Using Tag and Attribute

Next topic in “How to locate an element using CSS selectors” is on how to locate an element using Tag and Attribute. You can learn all about the attributes of HTML here.

The syntax to remember here is:

css=tag[attribute=value]

where ‘[‘ and ‘]’ square brackets would hold an attribute and its value inside.
Pick an attribute that is unique to that element like ID or name

Taking the aforementioned HTML into account:

The attribute name’s value pass is unique. We are going to take that and put into the format of our syntax:

css=input[name=pass]

If we take this and put it in the Target of Selenium IDE, and then click on Find it should highlight the second text box (of password):

NOTE: Even here if other elements have same HTML attribute, it will locate and highlight the first time it appears in the Source Code.

Locating an Element Using Tag, Class and Attribute

The next section of “how to locate an element using CSS selectors” will talk about how to locate elements using tag, class and attribute. These type of CSS selectors are helpful when some of the selectors share a common name. So if you want something really specific to be tested you identify it with something that’s not generic.

The snytax to remember here is:

css=tag.class[attribute=value]

Yes, it shares best of both worlds.

Like that example we saw of Facebook where Email and Password both had a common class name. As you can see below the text boxes are identified by their names since their classes are the same.

Let’s see how to locate the second textbox (the Password textbox) with the help of tag, class and attribute successfully.

Put the highlighted stuff in the syntax we are supposed to follow:

css=input.inputtext[name=pass]

I think that should do it.

Let’s check that out by putting it inside the target field in Selenium IDE:

Enemy spotted successfully!

Locating an Element Using Inner Text

We have another one of those element locating methods to help you learn how to locate an element using CSS selectors successfully. Just as you can locate elements using direct element references, you can use inner texts or labels to identify them too.

Labels are generally not provided with name, ID or attributes for that to matter. We make use of string patterns available on a web page to hunt them down.

Let’s see how to do that.

The syntax to remember here is:

css=tag:contains(“inner text”)

where inner text is exactly what it means by its moniker – the text inside the element.

Let’s take an example of the same Facebook Email and Password box to locate it.

Click on “Password” label after clicking on inspect button. You will get the following HTML:

As you can see our tag here is label, and the text we need is “Password”.

Putting that in our syntax, our target data would become:

css=label:contains(“Password”)

Let’s put this in our target area in Selenium IDE and then click on Find:

As you can see clicking on Find will highlight Password label.

In case of big inner texts, even if you just provide the starting word it will still identify and locate it as is the case with “Email or Phone”.

We just provided “Email” instead of the whole thing and it still identifies it.

Alright! Now that you have learnt how to locate an element using CSS Selectors it is time to go on your very own hunting spree. Pick a website of your choice and locate away!