Writing extensions

You can extend functionalities of Selenium IDE with JavaScript. There are 2 types of scripts in Selenium IDE - formats and extensions.

Formats are used to read and write test files. You can find how to write your own format in Adding Custom Format.

Extensions are executed when Selenium IDE is loaded, similar to user-extensions.js in Selenium Core. You can specify the location of your file in the options dialog of Selenium IDE.

Using extensions, you can extend following features of Selenium IDE:

  • Adding Event Handlers. Event Handlers record commands by listening to DOM events.
  • Adding Locator Builders. Locator Builders convert HTML elements into Element Locators that are used by many commands in Selenium. You can also change the priority of Locator Builders.
  • Adding Command Builders. Command Builders help users adding commands to the test by showing available commands in the context menu when you right-click the element.

Extensions can be used in Selenium IDE 0.8 and later.

Event Handlers

Event handlers can be added using following function:

Recorder.addEventHandler(handlerName, eventName, handler, options);

  • handlerName: The name of the handler. The name can be used to remove event handler later.
  • eventName: The name of the event you want to listen on, e.g. "click", "change"
  • handler: The function that is called when the event is fired. It takes one argument, event, which is an event object that has been fired. It should not return any value.
  • options (optional): An object that is used to pass options. You can set following properties:

Event handlers can be removed using following function:

Recorder.removeEventHandler(handlerName);

You can use removeEventHandler to disable default handlers and add your own handlers instead.

See built-in handlers in chrome://selenium-ide/content/recorder-handlers.js for the examples.

Locator Builders

Locator builders can be added using following function:

LocatorBuilders.add(name, builder);

  • name: The name of the builder.
  • builder: The function that is called to build the element locator. The function takes the HTML element as the argument, and returns element locator.

You can change the priority of locator builders by setting LocatorBuilders.order variable. This variable points to an array of the names of the builders. You can also disable any locator builder by excluding it from this array.

See built-in locator builders in chrome://selenium-ide/content/locatorBuilders.js for the examples.

Command Builders

Command builders can be added using following function:

CommandBuilders.add(type, builder);

  • type: The type of the command, either "action" or "accessor".
  • builder: The function that is called to build the command. The function takes one argument, window, which is a window object the user is working on. It must return an object representing a command. These are the properties that are used in a returning object:
    • command: If the type is "action", you must set this property to the name of the command. This property is not used if the type is "accessor".
    • accessor: If the type is "accessor", you must set this. If the command you're building are "(verify|assert|store|waitFor)TextPresent", this property will be "textPresent".
    • disabled: Set this property to true to disable the command.
    • target: "Target" of the command.
    • value: "Value" of the command.
    • booleanAccessor: Set this to true if the type is "accessor" and if the accessor returns a boolean value, such as isTextPresent.

See built-in command builders in chrome://selenium-ide/content/commandBuilders.js for the examples.

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

Comments (3)

 

  1. Dec 05, 2007

    doortokaos says:

    I didn't really know where to put it, so I add it just as a comment here. Perhap...

    I didn't really know where to put it, so I add it just as a comment here. Perhaps someone who knows more about the organization of this wiki could make an own site or something...

    Problem: We want a locator that hits "linktext" in this little example, because Selenium IDE doesn't record it with the "link" locator:

    <a href="some_url">
    <span>linktext</span>
</a>

    We need two files. The first file will be a Selenium Core extension. For our little example it has the following content:

    core-extension.js
    PageBot.prototype.locateElementBySpanLink = function(text, inDocument) {
	return this.locateElementByXPath("//a/span[text()='Z']".replace(/Z/,text) , inDocument);
};

    This will tell Selenium Core that there is a new locator called "spanlink". The actual locating could be more complex than this little example.

    The second file will be a Selenium IDE extension. It would have this content:

    ide-extension.js
    LocatorBuilders.add('spanlink', function(e) {
	if (e.nodeName == 'SPAN' && e.parentNode.nodeName == 'A') {
		var text = e.parentNode.textContent;
		if (!text.match(/^\s*$/)) {
			return "spanlink=" + exactMatchPattern(text.replace(/\xA0/g, " ").replace(/^\s*(.*?)\s*$/, "$1"));
		}
	}
	return null;
});

LocatorBuilders.order = ['spanlink','link', 'id', 'name', 'dom:name', 'xpath:link', 'xpath:img', 'xpath:attributes', 'xpath:href', 'dom:index', 'xpath:position'];

    This will tell the IDE that it shall record a new locator called "spanlink" when those conditions are met (copied from the add link LocatorBuilder example from chrome://selenium-ide/content/locatorBuilders.js).
    The LocatorBuilders.order = [ ... ]; will tell the IDE in wich order the known locators should be tried to record something.

    The last thing we have to is to tell the Selenium IDE that it shall use those two files:
    On "Options..." > "Selenium Core extensions (user-extensions.js)" we fill in the path to the "core-extensions.js" file, e.g. (on a Unix system)"/home/myhome/core-extensions.js" (without the ") and
    on "Options..." > "Selenium IDE extensions (user-extensions.js)" we fill in the path to the "ide-extensions.js" file, e.g. (on a Unix system) "/home/myhome/ide-extensions.js" (again without the ").

    After a restart of the IDE it should record something like "spanlink=linktext" as locator whenever you click on something like 

    <a href="some_url">
    <span>linktext</span>
</a>

    When you want to use the new locator in Selenium RC you would have to merge the "core-extensions.js" in your "user-extensions.js" file.

  2. Mar 16, 2008

    RajMalhotra says:

    Hi I donot understand this tutorial........ I need some more light on it . Act...

    Hi
    I donot understand this tutorial........
    I need some more light on it .

    Actually I have a javascript function
    I want to make a new command for this function , basically this command call this function ........
    So can you tell me how to do it ?

    This is that javascript function
    <script language="javascript">

    function pausecomp(millis)
    {
    var date = new Date();
    var curDate = null;

    do

    Unknown macro: { curDate = new Date(); }

    while(curDate-date < millis);
    }

    </script>

    Waiting for reply ..........
    Regards
    Raj Malhotra

  3. Jan 16, 2009

    mrrove says:

    running 1.0b2 on Firefox 3.0.5, the extensions aren't recognized by the IDE. I c...

    running 1.0b2 on Firefox 3.0.5, the extensions aren't recognized by the IDE. I can install a user-extension.js file for an IDE extension, and the command gets added to the right-click context menu. However, it does not run in the IDE, failing with a "command not found" message in the logs. Functions registered with Selenium Core extensions do not appear anywhere and are not found. What's the connection between Selenium Core extensions and the IDE extensions?