Creating CSS Locator Builders for Selenium IDE

The new CSS locator

Selenium IDE has a very powerful extension support. In this post I am going to show you how easy it is to extend Selenium IDE with new locator builders. A locator in Selenium is a means of identifying an element for the selenium command. Usually, it is the target part of the command. In a previous post, I wrote about how you can select alternate locators for the element in the Selenium IDE. A locator builder creates each of these locators for you. We will add a new locator builder that provide a locator using CSS. See the screen shot for what we are trying to achieve.

Create a new file named something like cssLocators.js and put the following in it.

LocatorBuilders.add('css:id', function(e) {
if ( {
    return "css=#" +;
return null;

Loading a Selenium IDE extension

Save it in a folder where you can find it easily. Now start up Selenium IDE and open the options. In the Selenium IDE extensions field, click on the browse button and specify the cssLocators.js file. Now restart the Selenium IDE. Follow the instructions in my previous post about alternate locators and you should now see the brand new css:id locator we just created generating css=#step1 which is the CSS selector for selecting an element by its id. Yeah!

How it Works

Locator builders need to register themselves using the LocatorBuilders.add() method. This method takes two arguments. The first argument is the name of the locator builder. It is also shown on the right side of the “target” drop down list. The second argument is a Javascript function called the builder function that will be provided with the element that the user has clicked on or is being recorded and should return either a locator string or a null. The builder function should return null if the locator it is trying to create is not applicable to the element. If the builder function can build a valid locator, it should return the locator string. Selenium IDE will check if the returned locator will actually find the same element and if so, add it to the drop down.

The css:id locator builder simply checks if the element passed in has an id and builds the correct CSS locator for it which is a # followed by the actual id of the element. The css= prefix identifies it as a CSS based locator.

In the future, I will post about how you can use your own locator builders in a Selenium IDE plugin.

This entry was posted in Selenium Internals and tagged , , , , , , , . Bookmark the permalink.

2 Responses to Creating CSS Locator Builders for Selenium IDE

  1. Pingback: The Selenium-IDE 1.x plugin API (Part 12) – Adding Locator Builders | Really Simple Thoughts of a Perpetual Learner

  2. Pingback: A Quick Introduction to CSS Locators in Selenium | Really Simple Thoughts of a Perpetual Learner

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s