Testing a web-app with Selenium (part1)

Today I want to deal with application testing.
I have split my post into several parts.
The first part deals with the definition of a simple test for an existing application already installed (e.g. in a test environment).
The second part is about how to perform integration testing during the build with Maven.

The problem: how to create automatic repetible integration tests for web apps?

The solution: write  test cases using Selenium.

Let’s start with a simple web-app. Notice that at this level the language used to write it is not relevant.
In this case I used wicket as ajax framework and maven to build it.
Our web-app is simple calculator performing a sum between two number. It’s composed by a panel with two text-box, a ajax button and a label for the result. It’s deployed on JBoss.

 

Our automatic test has to fill the two text boxes, click the “Add” button and assert the correct result.
Moreover, we can assert if all the widgets are presents on the user interface as well.
There are several ways to create an automatic test with Selenium:

  • using Selenium IDE (a powerful plug-in for Firefox) to record interactions with a browser
  • using Selenium WebDriver  to drive a browser programatically

Usually, for the beginners I suggest to start using SeleniumIDE to record a specific test case. After that  it’s always possible to convert the test case recorded in a specific language (JAVA, C#, Python) for use it in Selenium WebDriver.

Let’s start with the Selenium IDE:
To install it take a look at the IDE documentation (http://seleniumhq.org/projects/ide/).
Now, open Firefox at the application url. From the Firefox menù click on Tools -> Selenium IDE:

just click on the red button on the command bar and we are ready to record the test steps:

  1. in the first text box write the value “1”
  2. in the second write the value “5”
  3. click ADD

 

Notice in the IDE  the steps recorded. As last step we have to define the assert of correct result.
To do that, right click on the label containig the result –> click on Show All Available Commands –> wait for text present 6

Done! This is our first test case….
Save it with the name “TestSum”  and close both Firefox and Selenium.
Reopening Firefox (and Selenium), we load the test case to run it clicking on run on the command bar. Notice that Selenium open automatically the correct page, fills the fields and assert the result. If all is ok, you will see a green strip, otherwise a red one.

Now we have a test case that can be run on several environments (dev, test, pre-production…) just changing the Base URL on Selenium IDE.

With the same process we can record a test case to assert the components on our user interface. More test cases saved together form a Test Suite. In other words, I can define a test suite loading more test cases and save it together with the SeleniumIDE.

How to convert the test case in JAVA?
After we have recorded our test case, we want to convert it in java to perform more complex actions.
The first thing to do is export the test case directly from SeleniumIDE.
I export it as Java /JUnit4/Web driver.  I get in this way a simple java file that i import in an aclipse project.

This is the snippet:

public class TestSum {
 private WebDriver driver;
 private String baseUrl;
 private StringBuffer verificationErrors = new StringBuffer();
 @Before
 public void setUp() throws Exception {
  driver = new FirefoxDriver();
  baseUrl = "http://localhost:8080/";
  driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
 }
 @Test
 public void testSum() throws Exception {
  driver.get(baseUrl + "/");
  driver.findElement(By.xpath("//td/input")).clear();
  driver.findElement(By.xpath("//td/input")).sendKeys("1");
  driver.findElement(By.xpath("//td[2]/input")).clear();
  driver.findElement(By.xpath("//td[2]/input")).sendKeys("5");
  driver.findElement(By.xpath("//tr[2]/td/input")).click();
  for (int second = 0;; second++) {
   if (second >= 60) fail("timeout");
   try { if (driver.findElement(By.cssSelector("BODY")).getText().matches("^[sS]*6[sS]*$")) break; } catch (Exception e) {}
   Thread.sleep(1000);
  }
}

This is a simple JUnit class that uses WebDriver to drive the browser.
We import this in an eclipse project and we download the libs to compile it from http://seleniumhq.org/download/
Since we deal with a java class we have to download the java libs.

Let’s a look at the code: In this case the browser is Firefox, since i’m using  a FirefoxDriver, but you can choose more driver (InternetExplorerDriver, ChromeDriver and so on… ) The unique thing to check is your command path has to contain the path to the executable file of your browser.
Each element on the page is find by using XPath.

But what’s happen if we attempt to run this class?

As if by magic Selenium WEBDriver opens automatically Firefox and executes the steps of the test!!!
So we have find a way to control a browser programmatically. This opens a wide scenario.
For istance, use the power of a language as Java to define several actions and define articulated tests, schedule integration test overnight on different environments… There is no limit!!

But this step is very important for the second part of this post. Since we have a JUnit class we can think to execute it during the build phase with maven!
But this will be trated in the near future….
That’s all for now.

Carmine.