Adding Custom Format

By default, Selenium IDE can save test cases with HTML or Ruby script. You can add any format you like by writing JavaScript code.

In this tutorial, we will add a simple CSV format.

Implementing basic functions

Open Options dialog by selecting "Options..." in the menu bar, and click "Formats" tab. You can see the list of available formats. Let's create a new format by clicking "Add" button.

When you click "Add" button, you'll find the skeletal source in the text area. There are 3 empty functions - "parse", "format" and "formatCommands". We will start by implementing "format" function.

The "format" function converts the test case object into String. The first parameter is an instance of TestCase class. You can find the complete source of TestCase class in chrome://selenium-ide/content/testCase.js.
Here is a simple implementation for CSV format.

function format(testCase, name) {
  var result = '';
  var commands = testCase.commands;
  for (var i = 0; i < commands.length; i++) {
    var command = commands[i];
    if (command.type == 'command') {
      result += command.command + ',' + command.target + ',' + command.value + "\n";
    }
  }
  return result;
}

The "parse" function is almost opposite of "format". This function parses the String and updates test case.

function parse(testCase, source) {
  var doc = source;
  var commands = [];
  while (doc.length > 0) {
    var line = /(.*)(\r\n|[\r\n])?/.exec(doc);
    var array = line[1].split(/,/);
    if (array.length >= 3) {
      var command = new Command();
      command.command = array[0];
      command.target = array[1];
      command.value = array[2];
      commands.push(command);
    }
    doc = doc.substr(line[0].length);
  }
  testCase.setCommands(commands);
}

We're done with the basic read/write functions, so let's test it. Type "CSV" in the name field, click "OK" button and close the options dialog.
You can now use CSV format by selecting "CSV" from the "Format" menu item in the "Options" menu.

Implementing formatCommands

There is one more function that we haven't implemented yet - "formatCommands" function. This function is similar to "format" function, but is used to copy part of the test case into the clipboard.

function formatCommands(commands) {
  var result = '';
  for (var i = 0; i < commands.length; i++) {
    var command = commands[i];
    if (command.type == 'command') {
      result += command.command + ',' + command.target + ',' + command.value + "\n";
    }
  }
  return result;
}

The code above is almost same as "format" function, so we'll refactor "format" to call "formatCommands".

function format(testCase, name) {
  return formatCommands(testCase.commands);
}

Adding options

There are 2 optional variables in the skelton - "options" and "configForm".
These variables are used to create options that can be set in the options dialog window.
We'll let the "CSV" format also support TSV (tab-separated), by making the separator configurable.

The "options" variable is a hash of the options. The key is the name of the option, and the value is the default value.

options = {separator: 'comma'};

"configForm" is a String representing the UI of the dialog.
The content of configForm must be written in XUL. For configurable variables, you must set the value of "id" attribute to "options_<the name of option>". For more information about XUL, see http://xulplanet.com/.

configForm =
    '<description>Separator</description>' +
    '<menulist id="options_separator">' +
    '<menupopup>' +
    '<menuitem label="Comma" value="comma"/>' +
    '<menuitem label="Tab" value="tab"/>' +
    '</menupopup>' +
    '</menulist>';

You can use the options in any functions.

var SEPARATORS = {
  comma: ",",
  tab: "\t"
};

function formatCommands(commands) {
  var result = '';
  var sep = SEPARATORS[options['separator']];
  for (var i = 0; i < commands.length; i++) {
    var command = commands[i];
    if (command.type == 'command') {
      result += command.command + sep + command.target + sep + command.value + "\n";
    }
  }
  return result;
}

function parse(testCase, source) {
  var doc = source;
  var commands = [];
  var sep = SEPARATORS[options['separator']];
  while (doc.length > 0) {
    var line = /(.*)(\r\n|[\r\n])?/.exec(doc);
    var array = line[1].split(sep);
    if (array.length >= 3) {
      var command = new Command();
      command.command = array[0];
      command.target = array[1];
      command.value = array[2];
      commands.push(command);
    }
    doc = doc.substr(line[0].length);
  }
  testCase.setCommands(commands);
}

The complete script

Here is the complete script that we have created so far. The script is saved in <Profile Dir>/selenium-ide-scripts/formats directory, so you can also edit this file directly using your favorite text editor.

var SEPARATORS = {
  comma: ",",
  tab: "\t"
};

function formatCommands(commands) {
  var result = '';
  var sep = SEPARATORS[options['separator']];
  for (var i = 0; i < commands.length; i++) {
    var command = commands[i];
    if (command.type == 'command') {
      result += command.command + sep + command.target + sep + command.value + "\n";
    }
  }
  return result;
}

function parse(testCase, source) {
  var doc = source;
  var commands = [];
  var sep = SEPARATORS[options['separator']];
  while (doc.length > 0) {
    var line = /(.*)(\r\n|[\r\n])?/.exec(doc);
    var array = line[1].split(sep);
    if (array.length >= 3) {
      var command = new Command();
      command.command = array[0];
      command.target = array[1];
      command.value = array[2];
      commands.push(command);
    }
    doc = doc.substr(line[0].length);
  }
  testCase.setCommands(commands);
}

function format(testCase, name) {
  return formatCommands(testCase.commands);
}

options = {separator: 'comma'};

configForm =
    '<description>Separator</description>' +
	'<menulist id="options_separator">' +
	'<menupopup>' +
	'<menuitem label="Comma" value="comma"/>' +
	'<menuitem label="Tab" value="tab"/>' +
	'</menupopup>' +
	'</menulist>';

For more complex examples, please refer to the source of preset formats.

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.
  1. Oct 11, 2008

    Kangs says:

    I have extended your formatting script to accomodate STIQ test format. If any o...

    I have extended your formatting script to accomodate STIQ test format.
    If any one interested to use, please see the attachment section.

    seleniumIDE_STIQ_Pipe_V01.js
    It creates two new formats:
    1. STIQ Pipe format (|)
    2. STIQ Style Double Tilde format (~~)

  2. Mar 21, 2010

    Thibault ROHMER says:

    Hi guys, I made a Selenium IDE extension to handle XML Format :) Available at ...

    Hi guys,

    I made a Selenium IDE extension to handle XML Format :)

    Available at AMO : Selenium XML Formatter

    n'joy and tell me what you think !

    For now settings cannot be directly modified.

    You have to use `about:config` and look for `extensions.selenium-ide.xmlformatter`

  3. May 03, 2010

    Thibault ROHMER says:

    New version submitted, available soon. Changelog: 1.2:     -Fi...

    New version submitted, available soon.

    Changelog:

    1.2:
        -Fix preferences issue (were set to '' each time you press ok & not working after first install)
        
    1.1:
        -Added attribute seleniumIDEVersion
        -Removed attribute name

  4. Jul 04, 2010

    Thibault ROHMER says:

    New version submitted, available soon. Changelog: 1.4:     -Bas...

    New version submitted, available soon.

    Changelog:

    1.4:
        -BaseURL is setted if defined in XML file
        -Code quality enhanced:
            ->XML output is constructed properly wether indentation is active or not
            ->XML clipboard output is also constructed correctly with the same function
        
    1.3:
        -Add baseURL attribute for rootTag element