Difference between revisions of "RapUITesting"

Revision as of 13:08, 24 March 2009

| RAP wiki home | RAP project home |

Note: This article is outdated. RAP now provides a simple way to render custom widget ids to the client without patching the code. Please refer to the Javadoc of the constants ENABLE_UI_TESTS and CUSTOM_WIDGET_ID in org.eclipse.rwt.lifecycle.WidgetUtil.

THIS IS EXPERIMENTAL! WE MAKE OUR RESEARCH RESULTS AVAILABLE TO ENABLE FEEDBACK

Writing UI Tests for RAP applications

This document will describe one possible way to do UI tests for RAP applications. With this approach we use the combination of JUnit, Selenium and Selenium RC to have automated UI tests which can be integrated into your JUnit testsuite.

Below is a simple example application to demonstrate the usage of the tool chain.

Requirements

If you don't have it, you need at least these files in order to follow the tutorial:

• Selenium Core & Remote Control
• Qooxdoo Simulator (Selenium Extension)

Extract these files in a directory of your choice.

Creating the sample application

First we need something to test. Therefor I put together a little example application to demonstrate the UI testing approach.

Just create a new plugin project, add org.eclipse.rap.ui.workbench as a dependency and create the following class:

package org.eclipse.rap.demo.ui.tests;

import org.eclipse.jface.dialogs.MessageDialog;
import org.eclipse.swt.SWT;
import org.eclipse.swt.events.SelectionAdapter;
import org.eclipse.swt.events.SelectionEvent;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.lifecycle.IEntryPoint;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

public class TestApp implements IEntryPoint {

	public Display createUI() {
		Display d = new Display();
		final Shell s = new Shell(d, SWT.SHELL_TRIM);
		s.setLayout(new GridLayout());
		s.setText("App Title");
		final Button b1 = new Button(s, SWT.PUSH);
		b1.setText("Before");
		b1.addSelectionListener(new SelectionAdapter() {
			public void widgetSelected(SelectionEvent e) {
				MessageDialog.openInformation(s, "MessageBox",
						"Changing the button text now...", null);
				b1.setText("After");
			}
		});
		b1.setData( WidgetUtil.CUSTOM_WIDGET_ID, "myButton" );
		s.pack();
		s.open();
		return d;
	}

}

As you can see, this is a really tiny RAP example - but big enough to be worth to test it.

At the moment, all widget ids are looking like "w1", "w2", "w3". As these ids are generated in the order the widgets are created, it isn't a very good way to handle it. Imagine: You wrote hundred of testcases and then you see: Ah, my application needs an additional label somewhere, all the widgets created after this label have another ID. That's why we use WidgetUtil.CUSTOM_WIDGET_ID as key for custom widget data. This way we can easily set a human-readable name for each of the widgets under test.

Preparing the tests

Now create a new java project and add the JUnit library. Additionally, you need to add the selenium-java-client-driver.jar to your project in order to use the Selenium Remote Control.

As RAP applications have a little bit other nature than normal web applications, we need to work around some techniques of selenium. First, you can use commands like click against a target element on your page. The target defined as in id element of your (x)html source. As Qooxdoo doesn't provide ids for their widgets, we need the mentioned Selenium User Extension for Qooxdoo. With this, all targets prefixed with "qx=" will now use another "find-the-target" algorithm based on UserData provided by Qooxdoo widgets.

To not prefix all your IDs with the "qx=" special locator, copy this class to your test project to use it as your Selenium connector:

package org.eclipse.rap.demo.ui.tests;

import com.thoughtworks.selenium.CommandProcessor;
import com.thoughtworks.selenium.DefaultSelenium;


public class RAPSelenium extends DefaultSelenium {

	public RAPSelenium(CommandProcessor processor) {
		super(processor);
	}

	public RAPSelenium(String serverHost, int serverPort,
			String browserStartCommand, String browserURL) {
		super(serverHost, serverPort, browserStartCommand, browserURL);
	}

	public void click(String locator) {
		commandProcessor.doCommand("qxClickAt", new String[] { "id=" + locator});
	}
	
	public String getText(String locator) {
		return super.getText("id=" + locator);
	}
	
	public void waitForElementPresent(String locator) {
		for (int second = 0;; second++) {
			if (second >= 60) System.out.println("timeout");
			try { if (isElementPresent("id=" + locator)) break; } catch (Exception e) {}
			try {
				Thread.sleep(1000);
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
		}
	}
	
	public void clickAndWait(String locator) {
		click(locator);
		try {
			Thread.sleep(1*1000);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
	}
}

This class is a simple wrapper around the existing Selenium class which helps you with some sort of problems. Be careful: As it's extends the base Selenium class, you're able to use other methods of the original class which are not overridden by the RAPSelenium class. If you forget to add the "id=" locator yourself, you'll not get any useful return result.

Now we are ready to take off and write the first testcase...

First RAP UI Testcase

import junit.framework.TestCase;

public class AppTest extends TestCase {

	private RAPSelenium sel;

	private static final String BUTTON = "myButton";

	protected void setUp() throws Exception {
		sel = new RAPSelenium("localhost", 4444,
				"*firefox /usr/lib/firefox/firefox-bin",
				"http://localhost:8080/rap");
		sel.start();
	}

	public void testButton() {
		sel.open("http://localhost:8080/rap?startup=foo");

		sel.waitForElementPresent(BUTTON);

		// checking button
		assertEquals("Before", sel.getText(BUTTON));

		// checking message dialog
		sel.clickAndWait(BUTTON);
		
		// check button afterwards
		assertEquals("After", sel.getText(BUTTON));
	}

	protected void tearDown() throws Exception {
		sel.stop();
	}

}

Running the Selenium RC server

The Selenium RC server is a little server written in Java which cares about the interaction between your JUnit tests and the browser instances. As it offers some webservices for us, we need to start it before running our tests.

Just call this on our favorite shell/commandline:

 $ cd <path-to-selenium-rc>/server
 $ java -jar selenium-server.jar -userExtensions <path-to-qooxdoo-user-extension.js>
...
...
INFO: Started SocketListener on 0.0.0.0:4444
May 29, 2007 5:42:01 PM org.mortbay.util.Container start
INFO: Started org.mortbay.jetty.Server@a62fc3

If you don't get an output like this in the last lines, be sure you have access to the port 4444 or change it with the commandline paramter of the selenium server. See Command Line Options

And now?

As you see, all that stuff is really hacky and should be used carefully. As this was the first try to combine RAP applications and UI Tests, there is much work to do in this area. When we have some time in the future, we will consider working on an own RAP User Extensions for Selenium with some improvements and also on a - at least - simple infrastructure for your UI tests.

• AFAIK the Selenium "type" command is not yet working with qooxdoo textboxes. So be patient...

If you have great ideas or thoughts how we could improve the whole story, don't hesitate to contact us in the RAP newsgroup or add your thoughts to the Ideas section of this page.