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.

+

As documented at [[Running Automated Tests for the Joomla CMS]], Joomla! 2.5+ 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.

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

−

NOTE: To use Selenium IDE you just need to have Firefox installed. To run system tests in PHP, you need to have PHPUnit and Selenium RC set up and working properly, as documented in [[Running Automated Tests for Version 1.6]].

+

NOTE: To use Selenium IDE you just need to have Firefox installed. To run system tests in PHP, you need to have PHPUnit and Selenium RC set up and working properly, as documented in [[Running Automated Tests for the Joomla CMS]].

== Overview ==

== Overview ==

Line 47:

Line 47:

=== Getting Selenium IDE ===

=== 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 Firefox will install it automatically and then re-start.

+

As of May 17, 2013, the latest version of Selenium IDE is 2.0.0. You can get it at http://seleniumhq.org/download/. Click on the download link and Firefox will install it automatically and then re-start.

=== Preparing your Environment ===

=== Preparing your Environment ===

Line 95:

Line 95:

##* Since entering a password is very similar to entering a username, we are going to copy and modify the username step.

##* Since entering a password is very similar to entering a username, we are going to copy and modify the username step.

## Right-click on the username step and select copy. Right-click directly below the username step and select paste. You will now see the same step repeated twice.

## Right-click on the username step and select copy. Right-click directly below the username step and select paste. You will now see the same step repeated twice.

−

## Left-click on the second username entry. Using [[Tutorial:Using_Firebug_With_Your_Joomla_Website|Firebug]] I can see that the target needs to changed to <code>mod-login-password</code> and the value needs to be changed to reflect my password.

+

## Left-click on the second username entry. Using [[Using_Firebug_With_Your_Joomla_Website|Firebug]] I can see that the target needs to changed to <code>mod-login-password</code> and the value needs to be changed to reflect my password.

## Left-click directly below the password step that we just created and click the start/stop button to resume recording.

## Left-click directly below the password step that we just created and click the start/stop button to resume recording.

# Click on the Log in button.

# Click on the Log in button.

Line 199:

Line 199:

</body>

</body>

</html></source>

</html></source>

+

+

You can download the basic and intermediate HTML files [http://community.joomla.org/videos/bug_squad/selenium_ide_test_files.zip here]. To run them on your system you will need to edit the URL's in the "open" statements to match your test URL.

== Converting Selenium IDE Tests to PHP ==

== Converting Selenium IDE Tests to PHP ==

Line 333:

Line 335:

== More Advanced Topics ==

== More Advanced Topics ==

−

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

+

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

Introduction

As documented at Running Automated Tests for the Joomla CMS, Joomla! 2.5+ 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: To use Selenium IDE you just need to have Firefox installed. To run system tests in PHP, you need to have PHPUnit and Selenium RC set up and working properly, as documented in Running Automated Tests for the Joomla CMS.

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:

Plan the test. This involves the following:

Figure out the purpose of the test. Each test ideally will test one area of the CMS.

Plan what screens you will visit and what data you will enter.

Plan what checks you will perform to ensure that you have gotten the expected results.

Record the test using the Selenium IDE. This creates most of the PHP code for the test automatically.

Create the file for the test in your Joomla! project (for example, in Eclipse) and paste in the PHP code from step (2) above.

Debug the test and revise as needed.

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.

Writing 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

As of May 17, 2013, the latest version of Selenium IDE is 2.0.0. You can get it at http://seleniumhq.org/download/. Click on the download link and Firefox will install it automatically and then re-start.

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. It is important to start and end each test with the unaltered sample data. That way, tests can be performed in any sequence.

Writing a Basic Test with Selenium IDE

For our first test, we are going to load the home page of our local test site and check to make sure that some of the menu items are functioning and verify the presence of text on their corresponding pages. 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 this example, 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.

To start, open Firefox and browse to the home page of your Joomla! installation. For example, I set up my installation on my localhost, and so the URL is http://127.0.0.1/selsampledata.

Click on Tools -> Selenium IDE. You will notice that a window will pop-up, and on the top right corner of that window, there is a red circle that is highlighted. This is the start/stop recording button. When you start Selenium IDE, recording starts automatically.

Ensure that the Base URL displayed in the Selenium IDE window is that of the home page of your Joomla! installation.

Switch to the browser window that has your Joomla! installation open.

Left click on the Home menu item to load / re-load the home page, then right-click and select 'Assert Text' on the title of the leading article. You will notice the addition of each of those actions to Selenium IDE as you make them.

Repeat the above step for the remaining menu items and leading article on each page, or in the case of a form, you can right-click on the submit button and select "Assert Text".

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, use the icons on the bar between the Base URL address bar and the Table and Source tabs. The two important buttons is the button 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.

Writing an Intermediate Test with Selenium IDE

This example is based on the sample data included with Joomla 1.6 Beta2. In this example, we will:

Log in to the back-end of our test site

Create a test article and publish it to the front page

Navigate to the front page and verify that the article is published

Navigate to the back end and unpublish the article

Navigate to the front end and verify that the article is unpublished.

This example will also help us illustrate working with a few quirks of Selenium IDE.

Start by opening Firefox and browsing to the back end of your Joomla installation.

Click on Tools -> Selenium IDE to start recording.

Enter your administrative username in the username input.

Due some quirks with Selenium, it will not record your password and we will need to create that step manually.

Press the start/stop button to stop recording.

Since entering a password is very similar to entering a username, we are going to copy and modify the username step.

Right-click on the username step and select copy. Right-click directly below the username step and select paste. You will now see the same step repeated twice.

Left-click on the second username entry. Using Firebug I can see that the target needs to changed to mod-login-password and the value needs to be changed to reflect my password.

Left-click directly below the password step that we just created and click the start/stop button to resume recording.

Click on the Log in button.

Since Selenium IDE has difficulty with correctly interfacing with WYSIWYG editors, we are going to disable the editor for this test.

Click on the User Manager

Click on the admin account that you just logged in with, in this case Super User.

In the Basic Settings area, select Editor - None next to Editor.

Click Save & Close

Under the Content menu, click on Add New Article.

Enter a name for the test article.

Enter an article alias.

Select a category.

Select the Published State.

Select Yes next to Featured.

Enter the following in the article textarea:

<p id="body-text">Test paragraph</p>

Click Save & Close.

To make it easier to navigate to the front end of our site, we will go ahead and logout of the back end and click the Go to site home page link next to the login form.

You should now see the test article on the home page. Right-click on the title and select the Assert Text command.

Left-click on the article title.

Once the test article has loaded, right click on the test paragraph and click the Assert Text command.

Click on the Home link to go back to the home page.

Since our site is configured to open the Site Administrator menu item in a new browser, we will need to manually create the step to go to the back end.

Click the start/stop button to stop recording.

Right click on the first step of our test: and then select copy.

open

/127.0.0.1/selsampledata/administrator/

Right click below the last step of our test and select paste.

Do the same with the username and passwords steps:

type

mod-login-username

admin

type

mod-login-password

password

Click the start/stop button to resume recording.

Click on the Log in button.

Click the article manager button.

Left-click in the filter input and enter "test article".

Click on the Search button.

Click the check all checkbook to select all articles.

Click the Unpublish toolbar button.

Log out of the back end and click the Go to site home page link.

To include verification in our test that the article does not appear on the front end, we will copy the following step, paste it at the end of our test and then modify it.

assertText

link=Test Article

Test Article

Once pasted at the end of our test, click the drop down arrow next to command, scroll down to assertTextNotPresent and click it.

Click the start/stop button to stop recording.

Select File -> Export Test Case As -> HTML to save your test locally.

Your test is now ready to run as well as share with others for them to run as well.

Exporting / Saving Selenium IDE Tests

Once recorded, you can export a Selenium IDE test for later use or to share with someone else to run. 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.

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.