Types of Locators in Selenium IDE | Element’s Locations

It is imperative you understand what locators are all about and know about all the types of locators in Selenium IDE that are there, before you choose to play around with your test cases.

As the name might suggest, a locator basically points to a place where your IDE is supposed to go looking. A web page has countless elements like Textbox, Buttons etc. and it is crucial that you know the exact name of it to refer to it.

As we had discovered in our test in manual script creation using Firebug, finding out the name of a GUI element could be a tricky affair. However, if you know about the right types of locators in Selenium IDE, you will always end up making the right choice and testing things correctly.

Types of Locators in Selenium IDE

Here’s a list of locators in Selenium IDE:

1. ID
2. Name
3. Link Text
4. CSS Selector
   • Tag and ID
   • Tag and Attribute
   • Tag and Class
   • Tag, Class and Attribute
   • Inner Text
5. DOM (Document Object Model)
   • getElementByID
   • getElementsByName
   • dom: index
   • dom: name
6. XPath

Some of the commands do not require the use of locator like ‘open’ or ‘assertType’ for that to matter.

We will see a couple of examples in order to understand how to go about all the types of locators in Selenium IDE. This will clear all your doubts.

Locating an Element Using ID

IDs are unique for each element, and hence locating an element using its ID is the most common way of locating a GUI element. I will show you how to locate an element using its ID locator using the example of GoodReads.

Step 1: Open Selenium IDE in your Firefox browser (Alt + Ctrl + S). You can do so by navigating to the menu option and then to Developer and then Selenium IDE.

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 just type “https://www.goodreads.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: Then click on the Email Address box located in the top part of the screen.

You will notice that it will highlight the box that corresponds to its HTML.

Step 8: Look for the “id” text, and whatever value is in there just copy that. Here it is ‘userSignInFormEmail’ so we will copy that.

Step 9: Paste the copied value in your waiting Selenium IDE  target and click on Find.

When you do that you will see that it highlights the Email Address box in yellow for a second like this:

Locating an Element Using Name

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.flipkart.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: Then click on the Search box located in the top part of the screen.

You will notice that it will highlight the box that corresponds to its HTML.

Step 8: Look for the “name” text, and whatever value is in there just copy that. Here it is just ‘q’ so we will copy that nevertheless.

Step 9: Paste the copied value in your waiting Selenium IDE  target and click on Find.

When you do that you will see that it highlights the Search box of the Flipkart website in yellow for a second as if saying, “Hey! That’s me right here dude!”

Name with Filters

Sometimes there are cases wherein there are many elements sharing the same name. These elements will however always have a different value to help distinguish. In such cases, you need to append your target search with the value part as well.

So in the above scenario, you were entering:

name = name-of-the-element

here, you will have to enter:

name = name-of-the-element filter = value-of-filter

For example, imagine a case with the following html code:

<input type = "radio" checked = "" value = "True" name = "TrueOrFalse">

True

<input type = "radio" checked = "" value = "False" name = "TrueOrFalse">

False

In the above case, you can see the name of the element is “TrueOrFalse” which is common for both the radio buttons. Hence, you will need to identify both the elements via their values which are different namely – True and False.

So while writing the Target here you will have to write it as:

name = TrueOrFalse value = False

if you wish to select False.

As you can see our command here is that of click so if you will execute the above it will click the False radio button.

Let’s look at other types of locators in Selenium IDE.

Locating an Element using Link Text

Link Texts are nothing but links you often find on web pages. If you try to read their HTML you will notice that they will be sandwiched between the <a> opening and closing tags. It is the href attribute where you put the link redirect info, all of which we had seen in HTML attributes chapter. am using a step by step process to help you understand how to locate an element using Link Text.

When we will use this in the target box we will prefix our text with “link =”.

Alright so here I will be using a step by step process to help you understand how to locate an element using Link Text. We are going to take the same Flipkart example here as well, since it has plenty of links right on its top bar.

The first six steps are going to be the same. I am going to list them anyhow to spoonfeed you.

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.flipkart.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: Click on any one of the links at the top. I will click on “Gift Card” coz that makes me curious.

Between the <a> Tag

As you can see it will highlight the HTML info corresponding to that. What’s the word that’s sandwiched between the <a> and </a> tag? Gift Card, right?

So we will copy that.

Step 8: Copy and paste the text between <a> and </a> tags (Gift Card here) into your waiting Selenium IDE and write it in this manner:

link=Gift Card

Yep! You need to tell Selenium IDE that it is a link that you are searching.

Step 9: Click on Find.

The moment you do you will see that the link highlights in yellow.

If you run the test case now it will go ahead and open Flipkart first and then click on the link Gift Card.

Try that yourself!

Now that you have learnt about three easy types of locators in Selenium IDE, we will move on to the next complicated ones.

Here’s how to locate using CSS Selectors.
Here’s how to locate using DOM.

With that concludes our conquest to zero in on the types of Locators in Selenium IDE.

Learning is fun, right? Ciao! 🙂

Ciao! 🙂