Extending the Selenium IDE by Adding Commands to the Context Menu – Part 1

Creating the ‘It works’ commandBuilder

The New 'It works' Command in the Context-menu

This is the first of a series of posts on the Command Builders extension support in Selenium IDE. I have already covered the Locator Builders in an earlier post.

I just love shortcuts. Don’t you love them too? One of the cool and useful features of Selenium IDE that I like very much is the shortcuts available through the context menu (right-click menu). For example, to add an assert to the current test case, right-click on the element and select assertText from the context menu. Adding asserts for elements has never been easier.

What if you can harness the power of this menu to add your own commands? Or even a series of commands? I like to be efficient. (Did I hear you say lazy? Definitely not!!! I prefer to make excellent use of reuse rather than repetative manual labor. Heh heh heh) Let’s get started! My earlier post on Creating CSS Locator Builders for Selenium IDE also explains the process of loading the extension code in Selenium IDE with a screenshot.

You can simply add a CommandBuilder and register it specifying a type and a function that will be called to build the context menu item. Command builders need to register themselves using the CommandBuilders.add() method. This method takes two arguments. The first argument is the type of the command builder. More on it in another part of this series. The second argument is a JavaScript function called the builder function that will be provided with the window object that the user has clicked on.  The builder function should return a command object that will be shown on the context menu and added to the test script when the user selects it from the context menu. The code in commandBuilders.js provides several examples of commandBuilders provided by Selenium IDE. If you are interested, the file selenium-ide-overlay.js contains the code that uses these.

I have created the ‘It works’ commandBuilder as a Selenium IDE extension so that it can be kept independent instead of cluttering the main Selenium IDE code. Here is the JavaScript code for the ‘It works’ commandBuilder.

CommandBuilders.add('action', function(window) {
        return { command: "echo", target: "It works" };
   }
);

The builder function for the ‘It works’ command builder is a function, specifically an anonymous function, that accepts one argument, the window object and returns the command object describing the “echo It works” to show in the context menu. This command will be added to the test script when the user selects it from the context menu.

The 'It works' command successfully added to the test script

Let’s try it. Create a new file named itWorksCommandBuilder1.js and put the code shown above in it. Save it in a folder where you can find it easily. Now start up Selenium IDE and open the options dialog. In the Selenium IDE extensions field, click on the browse button and choose the itWorksCommandBuilder1.js file. Now restart the Selenium IDE. Make sure that the record is turned on and then switch to the Firefox browser and right-click on any web page. The “echo It works” command should be available in the Show All Available Commands sub-menu. Click on this item and it will be added to the test case.

Now its time for a celebration!