Globs

Globs or the verb Globbing is familiar to most people who have ever used file matching patterns. If you have ever searched for a file in Linux or DOS using a line like *.exe or photos*, then you have used globs. But globbing in Selenium is not as rich as the one in Linux – it supports only three special characters: *, ? and [ ].

* matches any number of characters, by any we mean ‘nothing’, ‘a single character’ or ‘many characters’.

? , matches a single character.

[ ] , called a character class, lets you match any single character found within the brackets. e.g

[0-9] matches any digit
[a-zA-Z] matches any alphabet, regardless of case

To specify a glob in a selenium command, prefix the pattern with the glob: string. For example if you would like to search for the texts color or colour then you can use the colo*r glob as shown below.

However you are free to eliminate the glob: prefix and only specify the text pattern because globbing patterns are the default in Selenium.

Regular Expression patterns

Of the three type of patterns, Regular Expressions are the one that are the most useful. Selenium supports the complete set of RegEx patterns that Javascript supports. So now you are not limited by the *,? And [] globbing patterns. To use RegEx patterns you need to prefix each RegEx with either regexp: or regexpi:, the latter being case-insensitive.

For example the following will test if a input field with the id ‘name’ contains the string ‘javascript’, ‘JavaScript’ or ‘Javascript’.

Below are a few common regular expression patterns:

regexp:(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d
:match a date in ‘mm/dd/yyyy’ format with any of the ‘-’, ‘/’, ‘.’ as separators.

regexpi:^[A-Z0-9+_.-]+@[A-Z0-9.-]+$
:match a generic email address.

regexp:^[0-9]{5}(?:-[0-9]{4})?$
:match a ZIP code (U.S. postal code), allowing both the five-digit and nine-digit (ZIP + 4) formats.

regexp:^(?!000|666)(?:[0-6][0-9]{2}|7(?:[0-6][0-9]|7[0-2]))-?(?!00)[0-9]{2}-(?!0000)[0-9]{4}$
:match U.S Social Security numbers in the in the AAA-GG-SSSS format.

regexp:^(https?|ftp|file)://.+$
:match almost any url.

Exact Patterns

Patterns with the prefix ‘exact:’ will match the given text as it is. For example if you give the search pattern as below, then it will match a glob pattern ‘*’ or ‘*.java’.

But if you want an exact match with the value string, i.e without the glob operator doing its work, you use the ‘exact’ pattern as below. In this example the ‘*’ (asterisk) will work as a normal character rather then a pattern-matching wildcard character.

In conclusion the glob: and the exact: pattern are the subsets of the Regular Expression pattern matcher. Everything you can do with glob: or exact: you can accomplish with RegExp.

Selenium IDE offers many useful commands (often called Selenese) for testing purposes. You use this sequence of commands to create various tests. But many times these commands are not sufficient and you need to add your own custom commands. For example a reader recently requested on how to input unique email ids for testing. Of course you can easily do this using the Selenium RC server and a language like PHP or Java. But we want to accomplish this in the IDE itself.

Types of Selenium commands

Selenium commands come in three varieties : Actions, Accessors and Assertions. Each Selenium command being given in the format below:

Actions are commands which in general modify the state of the application; click, typeKeys, deleteCookie etc. are all actions. Many actions also come with a sibling with a “AndWait” suffix added; e.g. ‘typeKeysAndWait’. This tells Selenium to wait until the page loads after performing the particular action.

Accessors examine the state of the application and store the results in variables, e.g. “storeLocation”.

Assertions are like Accessors, but they verify that the state of the application conforms to what is expected

In this post we will see how to write Selenium Action command using a simple example.

Writing your first custom Selenium Action Command

In the following example we will add a new action, ‘typeRandomEmail’, which generates a random email address and types it in an input field.

Every Selenium Action command starts with a ‘do’ prefix. The corresponding action comprising ‘AndWait’ is automatically registered. e.g when we create the ‘typeRandomEmail’ action, the ‘typeRandomEmailAndWait’ command is automatically added to the command list. An action command takes up to two parameters, which will be passed the second and third column values in the test table. In our example we will be using only one parameter – the locator id where the random email will be typed.

The following shows the code for the typeRandomEmail action.

 
Selenium.prototype.doTypeRandomEmail = function(locator) {
    /**
    * Sets the value of an input field to a random email id, 
    * as though you typed it in.
    *
    * @param locator an <a href="#locators">element locator</a>
    */
 
    // All locator-strategies are automatically handled by "findElement"
    var element = this.page().findElement(locator);
 
    /* The following block generates a random email string */
    var allowedChars = "abcdefghiklmnopqrstuvwxyz";
    var stringLength = 8;
    var randomstring = '';
 
    for (var i=0; i<stringLength; i++) {
        var rnum = Math.floor(Math.random() * allowedChars.length);
        randomstring += allowedChars.substring(rnum,rnum+1);
    }
 
    // Append a domain name
    randomstring += "@somedomain.com"
 
    // Replace the element text with the new text
    this.browserbot.replaceText(element, randomstring);
};

Importing your custom commands in Selenium

Now that we have completed writing our own action command, it is time to import it to the Selenium IDE. Your custom commands are usually added to the file ‘user-extensions.js’. By default the ‘user-extensions.js’ file does not exist, so you need to first create a blank file into which you will add the above code. Once that is done you then need to tell Selenium to load the particular extension file from the ‘Options’ menu.

Once you have added the file to the options page you need to restart the Selenium IDE for the changes to take effect.

Whenever you add some new code or make changes to the exiting one in the ‘user-extensions.js’, you need to restart the Selenium IDE for the changes to take effect.

Now once you have restarted the IDE, you can see that your command has been added to the drop-down.

Writing other Action commands

You may be wondering how to go about writing other Selenium Action commands; what the this.browserbot object means and where it is defined. Although no clear documentation exists, the Selenium source code can itself be a valuable tool. All the Selenium commands are stored in the ‘selenium-api.js’ file. I have included it here for easy download and reference. The original source file and other support files are located in the ‘selenium-ide.jar’ file in your Selenium installation directory. Unzip that file and you have all the Selenium source code at your disposal.

Editing the selenium-testrunner.js file

First you have to find the ‘selenium-testrunner.js’ file. It is located in your ‘Windows\Application Data’ directory. The rough path is given below:

Documents and Settings\Application Data\Mozilla\Firefox\
Profiles\extensions\{a6fd85ed-t567-s34f-a5af-ddf48bda539f}\content-files

Your exact directory path will be different. It is best do do a search for the file in your ‘Mozilla’ directory. Once you have found it, you can look for the following lines of code:

reset: function() {
        this.runInterval = this.speedController.value;
        this._switchContinueButtonToPause();
    },

and replace it with:

reset: function() {
        this.runInterval = 2000;
        this._switchContinueButtonToPause();
    },

This will by default add a 2 second delay after every command execution. Note that as we have made hardcoded changes to the speed variables, the speed slider in the TestRunner window will no longer have any effect on the execution.

Setting the default speed controller delay to a high value

In view of a recent comment, you can also set the default high delay for your slider by replacing the following lines in ‘selenium-testrunner.js’.

this.speedController = new Control.Slider('speedHandle', 'speedTrack', {
            range: $R(0, 1000),
            onSlide: fnBindAsEventListener(this.setRunInterval, this),
            onChange: fnBindAsEventListener(this.setRunInterval, this)
        });

with

this.speedController = new Control.Slider('speedHandle', 'speedTrack', {
            range: $R(100, 5000),
            onSlide: fnBindAsEventListener(this.setRunInterval, this),
            onChange: fnBindAsEventListener(this.setRunInterval, this)
        });

Which will set the default delay to 100 milliseconds and the maximum to 5 seconds. Now you can also use the speed slider.

In part 1 of this tutorial you have seen how to write a simple web test using Selenium. In this part we will see how to use the test generated using the IDE with Selenium RC and PHPUnit.

In this part we will use Delicious as our test target. I’ve already created a small Selenium test that you can use. You can download the HTML source from here.

Starting up.
Restart the Selenium IDE. In the source tab replace the default HTML with the one from the above file. Set the Base URL to http://delicious.com/. After doing this your IDE should like below.

If you are on a slow internet connection than it may help to slow the test speed.

So what exactly does this test do? Simple:

1. First it opens the delicious home page
2. Then it searches by the keyword ‘selenium’
3. Reads the total number of bookmarks from the results page as shown below

Now this may not look like a test for you , but it is just an exercise in using Selenium, you will surely apply it to a good test case. Onwards…

Before running this test make sure that you are logged out of Delicious.
Now run the selenium IDE test. After the test is successfully completed this is what you should see in the log pane.

Is that all?
If this was all there was I wouldn’t be really writing this post. The interesting part comes now – running the same test from PHP. From the file menu select ‘Export Test Case As…’ and as we are using PHP, select ‘PHP – Selenium RC’. Save the file by the name ‘Example.php’.

This is what we will get in the ‘Example.php’ file.

<?php
 
require_once 'PHPUnit/Extensions/SeleniumTestCase.php';
 
class Example extends PHPUnit_Extensions_SeleniumTestCase
{
  function setUp()
  {
    $this->setBrowser("*chrome");
    $this->setBrowserUrl("http://delicious.com/");
  }
 
  function testMyTestCase()
  {
    $this->open("/");
    $this->type("homepage-searchinput", "selenium");
    $this->click("homepage-searchsubmit");
    $this->waitForPageToLoad("30000");
    $this->getText("xpath=/html/body[@id='index']/div
                         [@id='doc3']/div[@id='bd']/div
                         [@id='yui-main']/div[@id='content']/h3/div/em");
  }
}
?>

A short notice.
Before we proceed a few points to consider. Make sure that the file name and the class name are the same, here ‘Example’. Say if you change the class name to ‘Delicious’ make sure that you also change the file name to ‘Delicious.php’.

What the code basically does is it initializes the browser to ‘chrome’ (you can set the browser to your preference by changing to ‘*iexplore’ or ‘*firefox’); sets the baseurl to ‘http://delicious.com/’ and runs the test.

Whats the complex looking line!?
Everything may look fine to you except maybe the last line – ‘$this->getText…’. The function ‘getText’ returns the text found at the element specified in the expression. The complex looking line is an xpath expression to the results element:

You don’t have to rake your brains to find an xpath to an element. An easy way is to use the XPather Firefox addon to get the xpath of any element on a page. After you download and install the addon, restart Firefox, right-click on any element and from the context menu select ‘Show in XPather’. XPather retrieves the xpath to the specified element, which you can than use in your test code.

Note: This site uses ‘delicious’ as an example, so even some minor changes made by them to their site will render the xpath invalid, throwing an ‘element not found’ error in selenium. If this happens please notify me or you can find the new xpath using the Xpather plugin.

Downloading and installing Selenium RC
Selenium RC is a Java based command line server that starts browsers and runs commands you pass from your tests.

1. First make sure you have a Java runtime installed on your machine.
2. Download Selenium RC from here.
3. After extracting the files from the archive copy the ‘selenium-server.jar’ file to any directory you feel appropriate. I copied it to my PHP installations bin directory.
4. Start the Selenium RC server from the command-line by issuing the following command:

java -jar selenium-server.jar

This will start the server on port 4444.
5. Now the server is ready to accept test commands from your PHP script. Make sure you keep this server running till you finish testing.

Installing PHPUnit
1. An easy way to install PHPUnit is to use the PEAR installer. The PEAR channel (pear.phpunit.de) is used to distribute PHPUnit so make sure that it is registered with your local PEAR environment:

pear channel-discover pear.phpunit.de

After the channel is registered install PHPUnit:

pear install phpunit/PHPUnit

Actual testing
Now that PHPUnit is installed and the Selenium RC server is up and running, its time to run our test we saved before in our ‘Example.php’ file. Type the following on your command-line:

phpunit Example

This will start the test. The PHPUnit Selenium driver will execute each test command from your file and send it to the Selenium server, which does the job of launching the appropriate browser, opening web pages, and performing various specified actions; and closing the browser after the test completes.

Now the above test does basically nothing important. So we will add some simple conditional statements to the code.

.
.
    $bookmarks = $this->getText("xpath=/html/body[@id='index']/div
                       [@id='doc3']/div[@id='bd']/div
                       [@id='yui-main']/div[@id='content']/h3/div/em");
 
    echo ($bookmarks > 3000)? "On the top" : "Still not there";
  }
}
 
?>

This is what PHPUnit has to say about the above test.

Or we can use an assertion as below, deliberately rigged to fail the test:

.
.
    $bookmarks = $this->getText("xpath=/html/body[@id='index']/div
                       [@id='doc3']/div[@id='bd']/div
                       [@id='yui-main']/div[@id='content']/h3/div/em");
 
    $this->assertGreaterThan(33000, $bookmarks);
 
 
 
 
 
    }
}
 
?>

Now PHPUnit will shout failure:

You can look at more functions to implement in your tests here and here.

This concludes the second part of the tutorial.

Selenium IDE is an integrated development environment for performing Selenium tests.  Selenium tests can be written as HTML tables or coded in various languages like C#, PHP, Perl, Python and can be run directly in most modern browsers.The IDE can help you to record, edit and debug tests. Currently the IDE is only available for Firefox (as if we developers will use any other) as a addon.

Here is a possible scenario for using Selenium. Imagine you have created a HTML form with about twenty fields and you have to repeatedly test the form. Filling the form every time can quickly become tedious. With Selenium you can automate the whole process and run the test as required. In this part we will see how to create a simple test in Selenium. So let’s get started.

STEP 1 – installation :

You can download Selenium IDE from this locations.
http://selenium-ide.openqa.org/download.jsp
https://addons.mozilla.org/en-US/firefox/addon/2079
Once the addon is installed make sure you do not forget to restart Firefox.

STEP 2 – running a simple test :

a. Start Selenium IDE  in Firefox: Tools->Selenium IDE. You will see the following popup.

b. Click on the red record button on the right.
c. Browse to Google.com and enter ‘selenium’ in the search box and click enter.
d. Click on the first result, which is that of selenium.openqa.org.
e. Stop the recording by clicking on the record button.

You should see something like below. If you click on the ‘ Source’ tab you can see the test html generated by selenium.

The ‘table’ tab shows the commands recorded by Selenium.

f. Open a new tab in Firefox and click on the Selenium IDE’s play button to run the recorded test.

The IDE should play your recorded test. After the test is complete you should have landed on the selenium page (http://selenium.openqa.org/). The IDE after the test run is shown below. In the ‘Log section’ you can see the various events run by the test. In the table tab you can see that all the rows are green, which means that the test ran successfully.

Now lets add a small assertion to the above test.

a. Click on the blank line below after the last ‘clickAndWait’ command and insert ‘assertTextPresent’ command from the drop down box as shown below. You should see something like this.

This test checks to see if the text ‘Selenium News’ is present in the last rendered page. Run the test again and you should see that the test has run successfully. No try replacing the text with something that is not present on the page, take for example ‘elvis’ and run the test again. Now the test fails and you should get the screen below.

You have just completed your first test run. And it was so simple.

‘assertTextPresent’ is one of the hundreds of commands available for your testing needs. Just browse throught the command drop down to get a feel of what you can you get.

In the next part we will see more advanced features of Selenium.