Adding Custom Formats

Tags: 

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.