User Extensions and Add-ons in Selenium 1.0 Testing Tools

Important preliminary points

If you are creating an extension that can be used by all, make sure that it is stored in a central place, like a version control system. This will prevent any potential issues in the future when others in your team start to use it.

User extensions

Imagine that you wanted to use a snippet of code that is used in a number of different tests. You could use:

type | locator | javascript{ …. }

However, if you had a bug in the JavaScript you would need to go through all the tests that reused this snippet of code.

This, as we know from software development, is not good practice and is normally corrected with a refactoring of the code. In Selenium, we can create our own function that can then be used throughout the tests.

User extensions are stored in a separate file that we will tell Selenium IDE or Selenium RC to use. Inside there the new function will be written in JavaScript.

Because Selenium’s core is developed in JavaScript, creating an extension follows the standard rules for prototypal languages. To create an extension, we create a function in the following design pattern.

Selenium.prototype.doFunctionName = function(){
.
.
.
}

The “do” in front of the function name tells Selenium that this function can be called as a command for a step instead of an internal or private function.

Now that we understand this, let’s see this in action.

Time for action – installing a user extension

Now that you have a need for a user extension, let’s have a look at installing an extension into Selenium IDE. This will make sure that we can use these functions in future Time for action sections throughout this article.

1. 1. Open your favorite text editor.
   2. Create an empty method with the following text:

      Selenium.prototype.doNothing = function(){
      .
      .
      .
      }

   3. Start Selenium IDE.
   4. Click on the Options menu and then click on Options.
   5. Place the path of the user-extension.js file in the textbox labeled Selenium IDE extensions.

1. Click on OK.
2. Restart Selenium IDE.
3. Start typing in the Command textbox and your new command will be available, as seen in the next screenshot:

What just happened?

We have just seen how to create our first basic extension command and how to get this going in Selenium IDE. You will notice that you had to restart Selenium IDE for the changes to take effect. Selenium has a process that finds all the command functions available to it when it starts up, and does a few things to it to make sure that Selenium can use them without any issues.

Now that we understand how to create and install an extension command let’s see what else we can do with it. In the next Time for action, we are going to have a look at creating a randomizer command that will store the result in a variable that we can use later in the test.

Time for action – using Selenium variables in extensions

Imagine that you are testing something that requires some form of random number entered into a textbox. You have a number of tests that require you to create a random number for the test so you can decide that you are going to create a user extension and then store the result in a variable.

To do this we will need to pass in arguments to our function that we saw earlier. The value in the target box will be passed in as the first argument and the value textbox will be the second argument. We will use this in a number of different examples throughout this article.

Let’s now create this extension.

1. Open your favorite text editor and open the user-extension.js file you created earlier.
2. We are going to create a function called storeRandom. The function will look like the following:

   Selenium.prototype.doStoreRandom = function(variableName){
   random = Math.floor(Math.random()*10000000);
   storedVars[variableName] = random;
   }

3. Save the file.
4. Restart Selenium IDE.
5. Create a new step with storeRandom and the variable that will hold the value will be called random.
6. Create a step to echo the value in the random variable.

What just happened?

In the previous example, we saw how we can create an extension function that allows us to use variables that can be used throughout the rest of the test. It uses the storedVars dictionary that we saw in the previous chapter. As everything that comes from the Selenium IDE is interpreted as a string, we just needed to put the variable as the key in storedVars. It is then translated and will look like storedVars[‘random’] so that we can use it later.

As with normal Selenium commands, if you run the command a number of times, it will overwrite the value that is stored within that variable, as we can see in the previous screenshot.

Now that we know how to create an extension command that computes something and then stores the results in a variable, let’s have a look at using that information with a locator.

Time for action – using locators in extensions

Imagine that you need to calculate today’s date and then type that into a textbox. To do that you can use the type | locator | javascript{…} format, but sometimes it’s just neater to have a command that looks like typeTodaysDate | locator. We do this by creating an extension and then calling the relevant Selenium command in the same way that we are creating our functions. To tell it to type in a locator, use:

this.doType(locator,text);

The this in front of the command text is to make sure that it used the doType function inside of the Selenium object and not one that may be in scope from the user extensions.

Let’s see this in action:

1. Use your favorite text editor to edit the user extensions that you were using in the previous examples.
2. Create a new function called doTypeTodaysDate with the following snippet:

   Selenium.prototype.doTypeTodaysDate = function(locator){
   var dates = new Date();
   var day = dates.getDate();
   if (day < 10){
   day = ‘0’ + day;
   }
   month = dates.getMonth() + 1;
   if (month < 10){
   month = ‘0’ + month;
   }
   var year = dates.getFullYear();
   var prettyDay = day + ‘/’ + month + ‘/’ + year;
   this.doType(locator, prettyDay);
   }

3. Save the file and restart Selenium IDE.
4. Create a step in a test to type this in a textbox.
5. Run your script. It should look similar to the next screenshot:

What just happened?

We have just seen that we can create extension commands that use locators. This means that we can create commands to simplify tests as in the previous example where we created our own Type command to always type today’s date in the dd/mm/yyyy format. We also saw that we can call other commands from within our new command by calling its original function in Selenium. The original function has do in front of it.

Now that we have seen how we can use basic locators and variables, let’s have a look at how we can access the page using browserbot from within an extension method.