The Selenium-IDE 1.x plugin API (Part 12) – Adding Locator Builders

With the new 1.0.8 release, Selenium IDE will introduce some more API features. This time with a new method addPluginProvidedIdeExtension(). As the name suggests, this method adds support for plugins to provide IDE extensions. It takes the chrome URL of the IDE extension as its only argument. An IDE extension? What’s that? An IDE extension can add Locator Builders, Command Builders and Event Handlers. I have briefly covered Locator Builders in another post on my blog some time back. I will cover the other two in the future. In this post, I am going to show you how to add a Locator Builder through a Selenium IDE plugin. This is a good time to take a look at my post on Locator Builders. Done? Good, now we will add the css:id Locator Builder mentioned there using the same good old preflight plugin from here.

The process is simple and requires just two steps as follows:-

1. Add the Locator Builder Javascript file to the extensions folder.
2. Use the addPluginProvidedIdeExtension() API method with the chrome url to your Location Builder file in the extension loader overlay (extension-loader.xul).

It is very similar to adding a user extension as mentioned in The Selenium-IDE 1.x plugin API (Part 4) – Extending the Selenium API.

OK, lets do it! Create cssLocators.js in the extensions folder and put in the code for the css:id Locator Builder as given below.

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

Next, add the IDE extension using the Selenium IDE API addPluginProvidedIdeExtension() method.

ide_api.addPluginProvidedIdeExtension(
    "chrome://preflight/content/extensions/cssLocators.js");

Your extension-loader.xul should look something like the following:-

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<overlay id="preflight_extension_loader_overlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml">
    <script type="application/x-javascript"
        src="chrome://selenium-ide/content/api.js"/>
    <script type="application/x-javascript"
        src="chrome://preflight/content/preflight.js"/>
    <html:script type="application/javascript">
        ide_api = new API();
        ide_api.addPluginProvidedIdeExtension(
            "chrome://preflight/content/extensions/cssLocators.js");
    </html:script>
</overlay>

It can indeed contain more calls to register other extensions as you must have rightly guessed.

I have also created another standalone plug-in with just this Locator Builder for you to experiment with. You can download the source in a zip file from here. You will also need to get the latest 1.0.8-SNAPSHOT version of Selenium IDE or wait for the official Selenium IDE 1.0.8 release.