[Tutorial] Creating a Selenium IDE extension for Web Table commands

Selenium IDE is a great tool to record and replay simple tests within the Firefox browser. It provides all the commands that are supported by Selenium out of the box. However, we might need to build custom commands that are not part of Selenium. Selenium IDE provides a way to implement custom commands in three-column format by building extensions in the JavaScript language. These are stored in separate .js files.

Selenium IDE does not have built-in commands to work with web tables and perform verification on tables as needed in tests. This post explains how to implement custom commands to test Web Tables using Selenium IDE.

Setup

Create a user-extensions.js file and save it to a location where Selenium IDE can find it easily

Adding custom commands

To create an extension, we need to use the selenium.prototype object and follow a particular pattern for naming the functions. As we are creating an extension to verify the table properties and contents, we need to prefix assert to the function names.

Create a command to verify the number of columns in a table. Copy the following function to the user-extensions.js file:

Selenium.prototype.assertTableCols = function(locator, value) {
  var table = this.browserbot.findElement(locator);
  Assert.matches(value, table.rows[0].cells.length.toString());
}

To verify the number of rows, create the following function in the user-extensions.js file:

Selenium.prototype.assertTableRows = function(locator, value) {
  var table = this.browserbot.findElement(locator);
  Assert.matches(value, table.rows.length.toString());
}

Finally, to verify data in a specific cell of a table, create the following function in the user-extensions.js file:

Selenium.prototype.assertTableCellData = function(locator, value) {
	var args = new Array();
	args = value.split("|");
	var rowIdx = parseInt(args[0]) - 1
	var colIdx = parseInt(args[1]) - 1
	var table = this.browserbot.findElement(locator);
	if(null != table.rows[rowIdx].cells[colIdx].childNodes[0].text)
		Assert.matches(args[2], table.rows[rowIdx].cells[colIdx].childNodes[0].text);
}

Adding User Extensions to Selenium IDE Options

Now let’s start using this user extension with Selenium IDE by adding to the Selenium IDE Options. Click on the Options Menu and then click on Options Submenu. This will launch the Selenium IDE Options Dialog box as shown in the following screenshot:

Selenium IDE Options dialog box

Selenium IDE Options dialog box

Select the Path for user-extensions.js file by clicking the Browse… button in front of Selenium Core extensions (user-extenions.js). Restart the Selenium IDE. You can see the newly added commands in Selenium IDE

New commands in Selenium IDE

New commands in Selenium IDE

Extending Selenium IDE is pretty simple. We can add new commands by adding functions to the Selenium object prototype, and the PageBot object prototype. On startup, Selenium IDE will automatically look through functions in user-extensions.js on these prototypes, using name patterns to recognize which ones are actions, assertions, and locators.

Selenium IDE commands are restricted to a three-column format. However, some commands might need more information to execute the command. For example, we created an extension for verifying the Cell data. This command needs the row, column, and expected value. We can specify these parameters in value argument by separating parameter values using a pipe character “|”. Inside the function, we can then split this string using “|” and pass the values to appropriate variables.

Sample Test

Here is a sample test which navigates to a Shopping Cart page and performs verification on table displayed on the page:

Sample test with new Selenium IDE command

Sample test with new Selenium IDE command

 


Announcing Instant Selenium Testing Tools Starter Book

Happy to announce my new book “The Instant Selenium Testing Tools Starter”. This is a must have guide if you’re new to Selenium and want to know how to start. This book will be released on 16th April 2013 and available in eBook (only) format. Grab your copy here


Data Driven Testing with Selenium IDE

Selenium IDE does not have in-built features to create data-driven tests. However there are multiple options available in the form of Selenium IDE User Extension or Add-On for creating Data Driven tests.

This post will explore using a Selenium IDE Add-on called Sel Blocks to create Data Driven tests on a sample BMI Calculator application. This is a simplest option available for Selenium IDE for data-driven tests.

The Sel Blocks Add-on provides various flow control elements such as conditional handling, looping, variables and data-driven testing in Selenium IDE tests.

Setup
Install the Sel Blocks for Selenium IDE Add-On using the Add-On Manager in Firefox from https://addons.mozilla.org/en-US/firefox/addon/selenium-ide-sel-blocks/?src=search

Creating Data Driven Tests
First we need to identify test data for the script. The Sel Blocks Add-on needs the test data in XML format. Create a XML file with following format:

<testdata>
	<vars height="160" weight="45" bmi="17.6" bmi_category="Underweight" />
	<vars height="168" weight="70" bmi="24.8" bmi_category="Normal" />
	<vars height="181" weight="89" bmi="27.2" bmi_category="Overweight" />
	<vars height="178" weight="100" bmi="31.6" bmi_category="Obesity" />
</testdata>

You can have data rows defined as <vars> element under the root element <testdata>. In <vars> element you can define all the parameters needed for the test. Create the following script in Selenium IDE:

SelIDE

How it works
In this test the type and verifyValue commands are parameterized by substituting values from the test data specified in above XML file.

The forXml command of Sel Blocks is supplied with the name of XML file where test data is stored. In this example path of data.xml file is passed to the forXml command.

When this test is executed, Sel Blocks loads the content of XML file in memory and executes the script for number of times <vars> element present in the XML file. In this example it will execute the test for four times.

For all the attributes mentioned in <vars> element, Sel Blocks create internal variables that we can substitute as Selenium command parameters.

You can analyse the Selenium IDE Log tab for  results. If the expected data and actual data do not match, an error is reported in the Selenium IDE Log tab.

There’s more
You can also use datadriven user extension to create Data Driven tests. You need to install flowControl andinclude user extensions to use the dataddriven extension. Sel Blocks is easier option as it does not have dependency on any other extension. For more info visit http://wiki.openqa.org/display/SEL/datadriven

This post covers Data Driven testing with Selenium IDE. If you are looking for Data Driven testing with Selenium WebDriver, grab my book Selenium Testing Tools Cookbook published by PacktPub