Note: 1^st published at SCN on 2.5.2012

Before an application can go into production, it needs to be tested. For Java there are several widely adopted test frameworks available like jUnit or TestNG. As these are used to test Java applications, what about web applications? How to test the UI that actually is constructed by using HTML, CSS, JSP and JavaScript? This is not easy as you have to simulate user input and validate the generated response, including different browsers. The example in this blog is about testing a simple HTMLB checkbox.

A tool that can help you creating test cases for web applications is Selenium. Selenium offers a Firefox plugin called Selenium IDE that records what the user is clicking and translates these actions into HTML code. To test an application with Selenium the following steps are needed:

1. Record the user action
2. Select a test framework and save the recorded actions in Java code
3. Import the generated code into your Java project

For the 1^st step, Selenium offers a Firefox plugin called Selenium IDE. This means while the user actions can be replayed by several browsers (IE, Opera, FF, mobile, etc.), with the IDE only the user actions from a Firefox user can be recorded.

In the generated HTML code of Selenium, these values are shown as HTML:

<tr>
    <td>verifyText</td>
    <td>//html/body/table/tbody/tr/td/form/span[2]/label</td>
    <td>Simple checkbox checked</td>
</tr>
<tr>
    <td>verifyElementPresent</td>
    <td>//html/body/table/tbody/tr/td/form/span[2]/label/img[@class='urCImgOn']</td>
    <td></td>
</tr>
 

It is easy to see a possible problem here: how Selenium will find the actual HTML UI to test. In the above example the absolute path is used. When the portlet is not run as a single application but inside the portal the path will change. So make sure that the HTML code of the application is surrounded by a unique HTML that can serve as a starting point of the path. As the HTML isn’t really useful, you’ll have to export the actions to a framework of your choice (I created my own export template called SAPHtmlbTestNG).

For those who already know Selenium: the IDE does not come with an export to TestNG and WebDriver, so you are bound to use Selenium RC. After exporting the test case you get Java code that actually can be used to run the tests:

public
class test extends Tests {

    @Parameters({“seleniumServer”, “seleniumPort”, “seleniumBrowser”, “testBaseUrl”})

    public
test(String seleniumServer, int seleniumPort, String seleniumBrowser, String testBaseUrl) {

        super (seleniumServer, seleniumPort, seleniumBrowser, testBaseUrl);

    }

    @BeforeClass

    public
void setUp() throws Exception {

        selenium.start();

    }

    @Test
public
void testTest() throws Exception {

        selenium.open(“/irj/servlet/prt/portal/prtroot/com.tobias.test.testSelenium.testCheckbox”);

    […]

        verifyTrue(selenium.isElementPresent(“//html/body/table/tbody/tr/td/form/span[2]/label/img[@class=’urCImgOn’]”));

        selenium.click(“//html/body/table/tbody/tr/td/form/span[2]/label/img”);

    […]

    }

    @AfterClass

    public
void tearDown() throws Exception {

        selenium.stop();

    }

}

What does that actually mean? In the Selenium IDE I added a test that checks if a HTML element (e.g. a UI element like a button, checkbox or any other HTML element) is in the HTML code retrieved from the application:

verifyElementPresent

For this Selenium identified the actual location of the element in question in the HTML source code:

//html/body/table/tbody/tr/td/form/span[2]/label/img[@class=’urCImgOn’]

Transformed into Java code, this reads as:

verifyTrue(selenium.isElementPresent(“//html/body/table/tbody/tr/td/form/span[2]/label/img[@class=’urCImgOn’]”));

As for Selenium and testing: the actual Java code for executing the tests is Selenium. TestNG only serves as the framework running the Selenium Java code. That’s why there are testing annotations like @BeforeClass. TestNG will control the flow of the tests (starting selenium, running the tests, stopping selenium).

Running the Selenium test with TestNG

To run the tests a few things have to be considered:

1. A Selenium server needs to be up and running
2. TestNG can be controlled over a XML file

Starting the Selenium server can be done via a (ant/maven) script or manually. What is more interesting is the XML file that controls TestNG. There the actual tests to be performed together with parameters are defined:

<?xml
version=“1.0”
encoding=“UTF-8”?>

<!DOCTYPE suite
SYSTEM
“http://testng.org/testng-1.0.dtd”>

<suite
name=“Suite”
parallel=“none”>

    <parameter
name=“seleniumServer”
value=“localhost”
/>

    <parameter
name=“seleniumPort”
value=“4444”
/>

    <parameter
name=“seleniumBrowser”
value=“*chrome”
/>

    <parameter
name=“testBaseUrl”
value=“http://server:port/”
/>

    <parameter
name=“logonUser”
value=“test”
/>

    <parameter
name=“logonPassword”
value=“abc”
/>

    <listeners>

        <listener
class-name=“com.tobias.test.selenium.Screenshot”
/>

    </listeners>

     <test
name=“Test”
preserve-order=“true”>

     <classes>

     <class
name=“com.tobias.test.selenium.checkbox.Checkbox”/>

     </classes>

     </test>

</suite>

The parameters are read by the annotation @Parameters and are used to define the selenium server. I added a listener that allows me to take a screenshot when a test fails and in the <test> section the actual tests are listened. There is only one test listened; to add more tests just add them by <class> definitions.

Run the test

After the tests are prepared and the tests and parameters are defined in the XML, the tests can run: either by invoking them directly in Eclipse or by running a script. TestNG will create HTML reports of the tests results.

Adding new test cases isn`t really hard when using the Selenium IDE. Where the IDE doesn`t help creating test cases, the developer can create them directly in Java. A benefit of Selenium is that you`ll end up having functional tests, as a real browser will make the calls to the application and validate the result.

From the 21 tests in my test suite, 2 failed.

Because of my screenshot class added to my test suite, TestNG made a screenshot when the test failed.

Selenium with a test framework like TestNG allows for functional testing of SAP web application. This is not bound to SAP Portal or WDJ apps, everything that has a HTML based UI can be tested. You have to keep in mind as UI testing is important, you should not focus solely on it. Unit and service tests should make the largest part in your test efforts.