Writing System Tests for Joomla! - Part 1

Introduction

As documented at Running Automated Tests for Version 1.6, Joomla! 1.6 now includes a library of system tests. This document details the steps necessary to create system tests using Selenium IDE. This article is split into two parts. The first part covers recording tests using the Selenium IDE. The second part covers more advanced topics, including converting recorded tests into PHP system tests that can be run automatically.

For background information about System Testing, please see the System Testing article.

NOTE: This article assumes that you have read the aforementioned articles and have PHPUnit and Selenium set up and working properly.

Overview

This is the first in a series of documents that show you how to write automated system tests for Joomla! using the Selenium IDE add-on for Firefox and the Selenium RC program. This document covers creating recorded tests using the Selenium IDE. The second document, Writing System Tests for Joomla! - Part 2, covers more advanced topics.

Creating a system test is not difficult once you are familiar with the steps. It is also important to remember that, unlike a manual test, once you have created an automated test it can be run hundreds or thousands of times with no effort.

The major steps to create a system test are as follows:

1. Plan the test. This involves the following:
   1. Figure out the purpose of the test. Each test ideally will test one area of the CMS.
   2. Plan what screens you will visit and what data you will enter.
   3. Plan what checks you will perform to ensure that you have gotten the expected results.
2. Record the test using the Selenium IDE. This creates most of the PHP code for the test automatically.
3. Create the file for the test in your Joomla! project (for example, in Eclipse) and paste in the PHP code from step (2) above.
4. Debug the test and revise as needed.
5. Add the test to the TestSuite.php file if desired.

Planning the Test

For a simple test, this step can be very quick. Just figure out what you want to test and decide how you would test this manually. Here are some important tips when planning a test.

• Always start with the base sample data and always end the test with the sample data in the same state you started with. This way you can run a series of tests knowing that the data will be in a known state.
• Keep tests small and focused on one area. Generally it is easier to maintain a series of small tests than one large test.

An example of a plan for a test could be as follows:

• Log in to back end.
• Navigate to Article Manager.
• Add a new article called Test Article.
• Publish the article to the front page.
• Navigate to the front end.
• Test that new article is shown.
• Navigate to the back end.
• Delete the new article.
• Navigate to the front end.
• Test that the new article is not shown.
• Log out of back end.

Recording System Tests with Selenium IDE

Selenium IDE makes it fairly easy to write system tests. It is a Firefox add-on that operates as an Integrated Development Environment (IDE) for creating system tests. In essence, it records your clicks as you navigate in your browser and encodes them into a series of commands that can control the browser. Tests recorded with Selenium IDE can be converted to PHP code. This code can then be used to create PHP system tests for the Joomla repository and integrated into the test suite.

Getting Selenium IDE

At of May 27, 2010, the latest version of Selenium IDE is 1.0.7. You can get it at http://seleniumhq.org/download/. Click on the download link and install like you would any Firefox add-on.

Preparing your Environment

To get started, create a clean install of Joomla! with the standard sample data or update your local copy to the latest build and perform a re-installation.

Creating a Basic Test

1. To start, open Firefox and browse to the home page of your Joomla! install. For example, I setup my install on my localhost, and so the URL is http://127.0.0.1/selsampledata.
2. Click on Tools -> Selenium IDE. You will notice that on the right of the window that appears near the top, that there is a red circle that is highlighted. This is the start/stop recording button. When you start Selenium IDE, recording starts right away.
   • For our first test, we are going to load the home page and check to make sure that all the items in the Main Menu are present.
   • The commands that we use to check that items are present are called assertions. Basically, you perform your actions and make assertions about the results.
   • In our case, we are going to use the command assertText. This command will read the text of a specified element and ensure it matches a particular value.
3. Ensure that the Base URL displayed in the Selenium IDE window is the home page of your Joomla! install.
4. Switch to the browser window that has your Joomla install open.
5. Right click on each menu item and select 'Assert Text'.
6. Switch to your Selenium IDE window and click the Red Button to stop recording.

You should see two tabs in your Selenium IDE window - one labeled Table, and one labeled Source. At this point you don't really need to look at the Source window.

Our first test is done.

To run your test, you use the icons on the bar between the Base URL address bar and the Table and Source tabs. The two important buttons are the buttons with the Green Triangle with Three Solid rectangles and the one with the Green Triangle and One Solid Rectangle. The first one will execute the entire test suite and the second one will run the currently selected test case. Since we currently have only one test case, both of these currently do the same thing.

To run your test, press one of these buttons.

As you watch the Selenium IDE, you will see a yellow bar move down your list of steps. Once a step is completed, a successfully executed action (i.e. a button was successfully located and clicked) should show up in light green and a successful assertion should show up in darker green. Failed actions show up in light red and failed assertions show up in darker red.

Click on the Window Expander on the left to unhide the Test Case browser.

If your test completed successfully, you should see Runs: 1, Failures: 0 at the bottom of the Test Case browser.

Once recorded, you can export your test to a file for later use. In this example, we choose HTML so that we can easily share it with others. This is the recommended format to use for saving a Selenium Test.

Converting Selenium IDE Tests

Tests recorded with Selenium IDE can be converted for inclusion in the /tests/system folder as well as integration in to the test suite.

We'll continue our example from above and convert the Selenium IDE test to a PHP file for inclusion in the /tests/system folder.

Since the test was exported in the HTML format, we can easily open it and re-play it in Selenium IDE.

Assuming that the test behaves as expected, we will convert it to PHP by selecting Options -> Format -> PHP - Selenium RC.

The test can now be be exported as PHP by selecting File -> Export Test Case As -> PHP - Selenium RC.

The converted Selenium IDE test now looks like:

<?php

require_once 'PHPUnit/Extensions/SeleniumTestCase.php';

class Example extends PHPUnit_Extensions_SeleniumTestCase
{
  function setUp()
  {
    $this->setBrowser("*chrome");
    $this->setBrowserUrl("http://127.0.0.1/selsampledata/");
  }

  function testMyTestCase()
  {
    $this->open("/workspace/joomla-1-6-source/");
    $this->click("link=Using Joomla!");
    $this->waitForPageToLoad("30000");
    $this->assertEquals("Getting started", $this->getText("link=Getting started"));
    $this->assertTrue($this->isElementPresent("link=Extensions"));
    $this->click("link=The Joomla! Community");
    $this->waitForPageToLoad("30000");
    $this->assertEquals("The Joomla! Project", $this->getText("link=The Joomla! Project"));
    $this->click("//div[@id='breadcrumbs']/p/span/a");
    $this->waitForPageToLoad("30000");
  }
}

It is nearly ready to be added to /tests/system, but needs a few modifications before doing so.

• We need to add a comment block to the top

<?php
/**
 * @version     $Id: exmaple0001Test.php
 * @package Joomla.SystemTest
 * @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
 * @license GNU General Public License version 2 or later; see LICENSE.txt
 * Tests creating a test
 */

• We need to change require_once 'PHPUnit/Extensions/SeleniumTestCase.php'; to require_once 'SeleniumJoomlaTestCase.php';

require_once 'SeleniumJoomlaTestCase.php';

• Change the class Selenium IDE uses to a new class, that extends SeleniumJoomlaTestCase, using the naming convention, written in CamelCase, of subject + test number in the series (4 digits) + "Test".
  • For example, our test that we are calling example would be: Example + 0001 + Test resulting in Example0001Test

class Example0001Test extends SeleniumJoomlaTestCase

• Remove the function setUp()

function setUp()
{
    $this->setBrowser("*chrome");
    $this->setBrowserUrl("http://127.0.0.1/selsampledata/");
}

created by Selenium IDE and add

$this->setUp();

to our test function.

The converted test now looks like:

<?php
/**
 * @version     $Id: exmaple0001Test.php
 * @package Joomla.SystemTest
 * @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
 * @license GNU General Public License version 2 or later; see LICENSE.txt
 * Tests creating a test
 */

require_once 'SeleniumJoomlaTestCase.php';

class Example0001Test extends SeleniumJoomlaTestCase
{
    function testCreatDeleteGroup()
    {
        $this->setUp();
        $this->open("/workspace/joomla-1-6-source/");
        $this->click("link=Using Joomla!");
        $this->waitForPageToLoad("30000");
        $this->assertEquals("Getting started", $this->getText("link=Getting started"));
        $this->assertTrue($this->isElementPresent("link=Extensions"));
        $this->click("link=The Joomla! Community");
        $this->waitForPageToLoad("30000");
        $this->assertEquals("The Joomla! Project", $this->getText("link=The Joomla! Project"));
        $this->click("//div[@id='breadcrumbs']/p/span/a");
        $this->waitForPageToLoad("30000");
    }
}

Your test can now be saved to the /tests/system folder within Joomla and run as a member of the test suite. See Running_Automated_Tests_for_Version_1.6

Creating a Basic System Test

By leveraging the Selenium_Test_Case_Methods, we can streamline automated system test with just a few lines of code.

For example, to test logging into and then out of the back end, we could use the following code:

<?php
require_once 'SeleniumJoomlaTestCase.php';

class ControlPanelExample extends SeleniumJoomlaTestCase
{
    function testExample()
    {
        $this->setUp();
        $this->doAdminLogin();
        $this->doAdminLogout();
    }
}
?>

• require_once 'SeleniumJoomlaTestCase.php';? allows use to utilize the methods that belong to the Selenium Joomla Test Case class
• class ControlPanelExample extends SeleniumJoomlaTestCase extends a class into our SeleniumJoomlaTestCase to implement the client/server protocol to talk to Selenium RC as well as specialized assertion methods for web testing.
• Each test is written as a function.
• $this->setUp(); envokes our configuration from tests/system/servers/configdef.php see Running_Automated_Tests_for_Version_1.6#Create_a_Selenium_Configuration_File
• $this->doAdminLogin(); is a Selenium Joomla Test Case method that logs into the back end.
• $this->doAdminLogoutn(); is a Selenium Joomla Test Case method that logs out of the back end.

More Advanced Topics

To learn about more advanced topics related to system testing, please see the article Writing System Tests for Joomla! Part 2.