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 (e.id) {
return "css=#" + e.id;
}
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.
Pingback: The Selenium-IDE 1.x plugin API (Part 12) – Adding Locator Builders | Really Simple Thoughts of a Perpetual Learner
Pingback: A Quick Introduction to CSS Locators in Selenium | Really Simple Thoughts of a Perpetual Learner
Hi i did the same thing…but i didnt see any css cod ein dropdown box..i see only xpath..code…can u help me..how to use that?
Hi,
You need to provide me with more information before I can help.
Cheers,
Samit
what details you need??
Create a new file named something like cssLocators.js and put the following in it.
LocatorBuilders.add(‘css:id’, function(e) {
if (e.id) {
return “css=#” + e.id;
}
return null;
});
added this .js to extension..do i need to do nay thign more?
Hi,
How about adding a few strategic alerts and checking if they get executed? And then trying the exact example mentioned to see what happens?
Cheers,
Samit
Pingback: The Selenium-IDE 1.x plugin API (Part 12) – Adding Locator Builders | Really Simple Thoughts of a Perpetual Learner
Pingback: Extending the Selenium IDE by Adding Commands to the Context Menu – Part 1 | Really Simple Thoughts of a Perpetual Learner
Hi,
I want to do this same thing for ‘class’ attribute. I tried this by replacing ‘id’ by ‘class’ in the above builder. but could not get it.
Also I use a format of java which is customized format…Do I need to do anything regarding that?
Hi Yogesh,
The reason probably is that the locator is expected to be unique, i.e. It is expected to return a single element. The ID would satisfy this condition where as the class may not. You do a quick test using the verifyCssCount command in Selenium IDE to determine how many elements would satisfy the locator.
Cheers,
Samit
hi Samit, would you help me?
I need select the elements by using an specific attr called “data-testing”
An example-> data-testing=”txt-category-details”
An html element as example
Actually I can see my locator “data-testing” in the “Builder locators” tab in Selenium plugin….but my Locator code does not work, what’s more, when I try to save an action with the plugin, the plugin does not save any action, any idea?
//////////////////////////////////////////
LocatorBuilders.add(‘data-testing’, function(e) {
if (e.data-testing) {
return “//*[@data-testing='” + e.data-testing + “‘]”;
}
return null;
});
Hi Daniel,
Every locator builder needs to return a locator that matches exactly one and only one element and this element needs to match the element clicked on. If any of this is not satisfied, your locator will not show up. Try adding in a few debug statements to help you out.
If all else fails and you need a consultant to help you out, I can suggest a few names.
Cheers,
Samit
Hi Samit,
I am trying to build a LocatorBuilder that returns a custom locator something like fancy=something_fancy. I want to use this in combination with a PageBot.prototype.locateElementBy function . Am I correct to assume that the locator returned by my LocatorBuilder function will be validated by my PageBot.prototype.locateElementByFancy function ?
I also need access to the javascript functions and objects in the web page that I am testing with Selenium are those accessible from either of those functions ?
Colin
Hi Colin,
All locators returned by locator builders are validated (sometimes fuzzily). So if you are returning a locator using new locator strategy, you will need a corresponding PageBot.prototype.locateElementBy* for each new locator strategy you use even if a single locator builder returns them.
To access Javascript commands and DOM in the web page, you can use the runScript command. If you need to call it from your user extension, you can use doRunScript or get the window of the target webpage using browserbot.getCurrentWindow().
Cheers,
Samit