Develop web testcases using Selenium IDE in Firefox for Joomla!

Selenium is a test tool for web applications. Selenium tests run directly in a browser, just like real users do. It runs in Internet Explorer, Mozilla and Firefox on Windows, #Linux, and Macintosh, Safari on the Mac.  They have plans to target Safari on the iPhone in some months. The tool is free and available under Apache 2.0.

Since I have clearly quality issues during the development/releasing of my components for #Joomla!, I am trying now to use the same tooling I daily use in java EE solutions for PHP…In this series I will present you some ideas (Unit testing, Continuous integration, code quality) that you may want to put in use as well.

The quickest way to learn Selenium is via a Firefox plugin called Selenium IDE. It is quite compelling
for developing tests in and quickly trying out Selenium before choosing Selenium for your project.

There are two modes of operation for Selenium – Core and Remote Control (RC).  Remote Control
mode also has a related capability called Selenium Grid that allows you to throw hardware at tests
to make it all faster.

This tools is able to:

• Simulate any action a human user may do either with the help of the keyboard or the mouse,
  this go from entering a text to select values in select list.
• These workflow can be save and replay at any time and any speed.
• You may group a set of tests and form a test suite very easily.
• Export tests to Ruby, Python, Perl, #Java .Net to run them in a non graphical environment ().

Selenium is made of 3 components:

• Selenium Core : the core must be installed on your server where the web applications are running.
• Selenium IDE : is a Firefox/IE/Mozilla extension Firefox able to record, execute tests and test suites
• Selenium Remote Control is a server which let you execute tests targeting many different browser,
  Firefox, Internet Explorer, opera and different operating system GNU/Linux,Mac OS and  MS Windows
  in also many different languages Ruby, Python, Perl, Java .Net.

Also don’t use Selenium for load testing web applications!, use Apache JMETER  instead. Attention Selenium
has some issues when he has to work on 2 windows at the same time (pop -up).

Today let just try Selenium IDE

To make it work with Joomla!, or with any other web applications, just install the Firefox plugins, and start
it by going to the tools menu of Firefox.

Lets say that we want to test the contact page of my site for proper operations…In Firefox, go to the menu Tools

This will open a floating windows, which let you define a script step by step in the windows Script

You may come with a test case similar to the one presented here:

The number of commands is huge, but well documented in the tab reference (B)

The base URL is my site (http://www.waltercedric.com), the test case, open the contact page, check the
title of the page, enter some values in form, check for button and texts and submit the form.

The menu   let you run the test by clicking on you can see the
result, if everything is green then the test has succeed.

and you see every step of the test case in the browser windows:

As you see it is quite easy to develop a script to test a page, test can be saved on disk  in different format,
so you can execute them in Selenium Core

So the test developed for testing the contact page of Joomla! now look like:

   1:  package com.example.tests;

   2:   

   3:  import com.thoughtworks.selenium.*;

   4:  import java.util.regex.Pattern;

   5:   

   6:  public class NewTest extends SeleneseTestCase {

   7:      public void setUp() throws Exception {

   8:          setUp("http://www.waltercedric.com/", "*chrome");

   9:      }

  10:      public void testNew() throws Exception {

  11:          // selenium.("http://www.waltercedric.com/-contact-me.html");

  12:          assertEquals("Contact - Cedric Walter", selenium.getTitle());

  13:          selenium.type("contact_name", "cedric");

  14:          selenium.type("contact_email", "[email protected]");

  15:          selenium.type("contact_subject", "Selenium is great, try it");

  16:          verifyTrue(selenium.isTextPresent("Enter your Message:"));

  17:          selenium.type("contact_text", "Hi Cedric. selenium would be cool for testing securityimages!");

  18:          verifyTrue(selenium.isTextPresent("Send"));

  19:          selenium.submit("emailForm");

  20:          selenium.waitForPageToLoad("30000");

  21:      }

  22:  }

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

Or better in PHP so you can reuse it in XINC continuous integration server (more to come on XINC in a future article)

   1:  <?php

   2:   

   3:  require_once 'PHPUnit/Extensions/SeleniumTestCase.php';

   4:   

   5:  class Example extends PHPUnit_Extensions_SeleniumTestCase

   6:  {

   7:    function setUp()

   8:    {

   9:      $this->setBrowser("*chrome");

  10:      $this->setBrowserUrl("http://www.waltercedric.com/");

  11:    }

  12:   

  13:    function testMyTestCase()

  14:    {

  15:      // $this->("http://www.waltercedric.com/-contact-me.html");

  16:      $this->assertEquals("Contact - Cedric Walter", $this->getTitle());

  17:      $this->type("contact_name", "cedric");

  18:      $this->type("contact_email", "[email protected]");

  19:      $this->type("contact_subject", "Selenium is great, try it");

  20:      try {

  21:          $this->assertTrue($this->isTextPresent("Enter your Message:"));

  22:      } catch (PHPUnit_Framework_AssertionFailedError $e) {

  23:          array_push($this->verificationErrors, $e->toString());

  24:      }

  25:      $this->type("contact_text", "Hi Cedric. selenium would be cool for testing securityimages!");

  26:      try {

  27:          $this->assertTrue($this->isTextPresent("Send"));

  28:      } catch (PHPUnit_Framework_AssertionFailedError $e) {

  29:          array_push($this->verificationErrors, $e->toString());

  30:      }

  31:      $this->submit("emailForm");

  32:      $this->waitForPageToLoad("30000");

  33:    }

  34:  }

  35:  ?>

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

As soon as You have a set of tests, this can form a Test Suite.

SecurityImages for Joomla create Captcha, so it is quite difficult for a tool to pass the Turin test
(aka recognize the scrambled images), this point apart, I am now developing testcases to test the
admin backend, frontend Joomla! patches. These test will be available in the component itself, so
anybody can run them with little efforts.

Read more at:

• Selenium homepage http://selenium-ide.openqa.org/
• Selenium Documentation
• Selenium Wiki
• Selenium User Forums