Tuto #3 : Test a web application with Squash TA and Selenium

[Last update: 07/04/2012]

[Estimated duration : 45 min]

Pre-requisites

Before creating you first test, you need to :

• • Ensure all the required software components are installed on your workstation. If not, please refer to the Install the Squash-TA Toolbox.

  • Create a Squash-TA project as described in the Set up a Squash-TA project.

Note: If you have already done so in a previous tutorial, there is no need to create a new project. Just add your new tests besides the previous ones.

• • Ensure Mozilla Firefox (up to version 12.0) is installed on your workstation. If not, please install it.

  • Install Selenium IDE, as described here.

Setting up the System Under Test (SUT)

For this tutorial, we will use a PetStore web application.

Note: This is the webapp we used in Tutorial 2: 'How to test a web application with database checks, using Squash-TA and Sahi' . If you have already followed this tutorial, there is no need to install the PetStore application again.

If you have not done so already, please download the webapp here, then unzip it to a location of your choice.

To start it, launch the '<unzip-location>/startup_all.bat' script.

To stop it, launch the '<unzip-location>/stop_all.bat' script.

Once the PetStore application is running, it is available at the following URL: http://localhost:8080/

Creating a Squash-TA testcase

The first step is to create your Squash-TA testcase. To do so :

• • Start Eclipse by clicking on the Squash-TA Eclipse shortcut.

  • Confirm you want to use the workspace you have created when installing the toolbox.

  • Open your Squash-TA project, and create a new file named 'PetStoreSeleniumTest.ta' in the 'src/squashTA/tests' directory. To do so:

  • 'Right click' on the 'tests' subdirectory, in order to open its contextual menu. Select 'New > File'.

• • An empty file should appear in the Eclipse text Editor. If not, double-click on the PetStoreSeleniumTest.ta file in order to open it in the Eclipse text editor.

  • Add the following content to the file

SETUP :

TEST :

TEARDOWN :

Note: Each test is designed to have three phases that are executed in sequence:

• • The SETUP phase is used to put the SUT in a known state before interacting with it.

  • The TEST phase is used to:

    • • interact with the SUT, then

      • check the state of the SUT after interacting with it.

  • The TEARDOWN phase is used to clean up the SUT once the test has been completed, in order for the next test to start from a clean state.

In the upcoming sections, you will learn how to add instructions to your Squash-TA testcase in order to execute a selenium script, and interact with the SUT database.

Creating a Selenium Webdriver script and executing it with Squash-TA

Capturing the user actions with Selenium IDE

• • First of all, start the PetStore webapp by executing the 'startup_all.bat' script from the PetStore demo installation directory.

  • Make sure the web application is up. To do so, navigate to http://localhost:8080/ with Mozilla Firefox. The PetStore welcome page should be displayed.

• • To open the Selenium-IDE, simply select it from the 'Firefox Tools menu'. It opens as follows :

• • Now you can start recording your Selenium testcase :

  • Go back to the PetStore welcome page, and click on the 'Enter the store' link. The PetStore main menu is displayed, and the first commands of the Selenium testcase are displayed in Selenium IDE testcase pan

Exporting the test as a Selenium Webdriver / JUnit4 script

• • Using Selenium IDE, export the Selenium testcase you have just recorded as a Selenium Webdriver/JUnit4 script. To do so, select 'File > Export Test Case As... > JUnit 4 (WebDriver)'.

• • Save the testcase as PetStoreSeleniumTest, in the location of your choice.

  • Ensure the file 'PetStoreSeleniumTest.java' has been created in the location you choose.

  • You can close Firefox and Selenium IDE for now, you will not need them anymore for this tutorial.

Integrating the Selenium WebDriver script in the Squash-TA project

Remark : At this day, the last version of Firefox (20.0) is not compatible with the Selenium Webdriver (Selenium-WebDriver makes direct calls to the browser using each browser’s native support for automation. To make work our Test-case, we need to have a version of firefox compatible with the Selenium Webdriver. For that, we're gonna use Firefox 12.0 that you can find here and install it in a different directory of the Firefox version you're using (For example, in the directory of the Squash-TA Toolbox : 'C:\Squash-TA\Firefox12\firefox.exe')

• • Go back to Eclipse.

  • In your Squash-TA project, in the 'src/squashTA/resources', create a subdirectory named 'selenium'. This directory will hold all your Selenium scripts (as JUnit3 or JUnit4 classes), as well as their dependencies (file resources and java source code).

  • In the 'selenium' directory, create a subdirectory named 'java'. This directory will hold all the java code (Selenium scripts and their source code dependencies).

  • In the java directory, paste the 'PetStoreSeleniumTest.java' file you have exported from Selenium IDE.

• • Open the 'PetStoreSeleniumTest.java' file in the Eclipse Text Editor.

Delete the first line of the script, i.e.:

package com.example.tests;

• • Find the first instruction of the testPetStoreSeleniumTest method, i.e.:

driver.get(baseUrl + "/");

then replace it with the following instruction :

driver.get(baseUrl);

Otherwise, Selenium will try to navigate to URL http://localhost:8080// instead of http://localhost:8080/, and your test will fail.

• • As said in the remark at the beginning of this part, we need to use a compatible version of firefox with the Selenium Webdriver. For that, add this lines in the 'PetStoreSeleniumTest.java' file :

[...]

import org.openqa.selenium.firefox.FirefoxBinary;

import org.openqa.selenium.firefox.FirefoxProfile;

import java.io.File;

[...]

public class PetStoreSeleniumTest {

private FirefoxBinary binary = new FirefoxBinary(new File("C:/Squash-TA/Firefox12/firefox.exe"));

private FirefoxProfile profile = new FirefoxProfile();

private WebDriver driver;

[...]

@Before

public void setUp() throws Exception {

driver = new FirefoxDriver(binary,profile);

[...]

• • Your 'PetStoreSeleniumTest.java' file content should now look as follows :

import java.util.regex.Pattern;

import java.util.concurrent.TimeUnit;

import org.junit.*;

import static org.junit.Assert.*;

import static org.hamcrest.CoreMatchers.*;

import org.openqa.selenium.*;

import org.openqa.selenium.firefox.FirefoxDriver;

import org.openqa.selenium.firefox.FirefoxBinary;

import org.openqa.selenium.firefox.FirefoxProfile;

import java.io.File;

import org.openqa.selenium.support.ui.Select;

public class PetStoreSeleniumTest {

private FirefoxBinary binary = new FirefoxBinary(new File("C:/Squash-TA/Firefox12/firefox.exe"));

private FirefoxProfile profile = new FirefoxProfile();

private WebDriver driver;

private String baseUrl;

private boolean acceptNextAlert = true;

private StringBuffer verificationErrors = new StringBuffer();

@Before

public void setUp() throws Exception {

driver = new FirefoxDriver(binary,profile);

baseUrl = "http://localhost:8080/";

driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);

}

@Test

public void testPetStoreSelenium() throws Exception {

driver.get(baseUrl);

driver.findElement(By.linkText("Enter the Store")).click();

driver.findElement(By.xpath("//tr[5]/td/a/img")).click();

driver.findElement(By.xpath("//tr[3]/td/b/a/font")).click();

driver.findElement(By.xpath("//tr[3]/td[5]/a/img")).click();

driver.findElement(By.xpath("//td[2]/center/a/img")).click();

driver.findElement(By.xpath("//center[2]/a/img")).click();

driver.findElement(By.name("username")).clear();

driver.findElement(By.name("username")).sendKeys("j2ee");

driver.findElement(By.name("password")).clear();

driver.findElement(By.name("password")).sendKeys("j2ee");

driver.findElement(By.name("update")).click();

driver.findElement(By.cssSelector("p > input[type=\"image\"]")).click();

driver.findElement(By.xpath("//center[3]/a/img")).click();

}

@After

public void tearDown() throws Exception {

driver.quit();

String verificationErrorString = verificationErrors.toString();

if (!"".equals(verificationErrorString)) {

fail(verificationErrorString);

}

}

private boolean isElementPresent(By by) {

try {

driver.findElement(by);

return true;

} catch (NoSuchElementException e) {

return false;

}

}

}

• • Open the 'PetStoreSeleniumTest.ta' file in a text editor.

  • Add the following instruction under the 'TEST :' section :

SETUP :

TEST :

# EXECUTE_SELENIUM2 selenium WITH MAIN CLASS PetStoreSeleniumTest

TEARDOWN :

This instruction tells the Squash-TA engine to execute the PetStoreSeleniumTest.java class located in the selenium directory.

Note : If you need your Selenium class to use resource files or java source code dependencies, these should also be located in the selenium directory, in order for the Squash-TA engine to find them.

Executing the Squash-TA testcase

Before adding any other instruction to the testcase, let's try to execute it using Squash-TA. To do so :

• • Select the 'PetStoreSeleniumTest.ta' file by clicking on it.

  • Select 'Run > Run Configurations' from the Eclipse workbench menu bar.

• • This opens the following dialog, that lets you create, modify, and delete launch configurations :

• • Select 'Maven Build > Run selected test(s)', in the left hand list of launch configuration types. This run configuration lets you run the test you have selected in your Squash-TA project (here 'PetStoreSeleniumTest.ta').

  • Click on 'Run' to launch the execution.

  • An instance of Mozilla Firefox should open and your Selenium testcase should be played back.

  • Once the execution is completed, you should see a 'BUILD SUCCESS' message in the Eclipse Consoletab, as follows:

[INFO ] impl.EcosystemRunnerImpl - Beginning execution of ecosystem tests

[INFO ] impl.TestRunnerImpl - Beginning execution of test setup.ta

[INFO ] impl.TestRunnerImpl - Beginning execution of test PetStoreSeleniumTest.ta

[INFO ] impl.TestRunnerImpl - Beginning execution of test teardown.ta

[INFO] Exporting results

[INFO] Cleaning resources

[INFO] Squash TA : build complete.

[INFO] ------------------------------------------------------------------------

[INFO] BUILD SUCCESS

[INFO] ------------------------------------------------------------------------

[INFO] Total time: 26.000s

[INFO] Finished at: Tue Apr 02 17:00:06 CEST 2013

[INFO] Final Memory: 17M/44M

[INFO] ------------------------------------------------------------------------

• • You may also check the 'Squash-TA testcase execution report', as follows :

  • Refresh your Squash-TA project in Eclipse. To do so, you may either :

    • • Select the root of your project in Eclipse, then hit F5, or

      • Right-click on the 'tutorial3-petshop' directory to open its contextual menu, then click on 'Refresh'.

  • A 'target' directory should appear at the root of your project.

You have run your first Selenium testcase with Squash-TA.

In the upcoming sections, you will learn how to :

• • set up the database, so it is in a known state before interacting with the GUI,

  • check the database content after interacting with the GUI, then

  • clean up the database at the end of the test.

Note : There are several ways of interacting with a database using Squash-TA :

• • By executing SQL queries,

  • By executing SQL scripts,

  • By using Flat XML datasets (for those who know it, Squash-TA uses database testing tool DbUnit).

In this tutorial, we will be using Flat XML datasets.

Using Flat XML datasets

Setting up the database before interacting with the GUI

It is essential to put your database into a known state between test runs. Otherwise, one test case might corrupt the database and cause subsequent tests to fail. To do so, we will clean up the database, then populate it with the data required for the Selenium script to be executed.

Before doing so, we need to configure the Squash-TA project so it may connect to the SUT database.

Adding a JDBC driver to the Squash-TA project

First of all, we need to add a JDBC driver to the Squash-TA project. To do so :

Open the 'pom.xml' file in the Eclipse text editor.

In the plugin element corresponding to the squash-ta-maven-plugin, add a dependency to a MySQL JDBC driver as follows:

<project>

...

<build>

<plugins>

<plugin>

<groupId>org.squashtest.ta</groupId>

<artifactId>squash-ta-maven-plugin</artifactId>

<version>1.1.0-RELEASE</version>

<dependencies>

<dependency>

<groupId>hsqldb</groupId>

<artifactId>hsqldb</artifactId>

<version>1.8.0.7</version>

</dependency>

</dependencies>

...

Creating a database target in the Squash-TA project

Now we will configure the connection to the database.

• • Create a file named 'petshop_db.properties' in the 'targets' directory.

• • Paste the following content into the file:

squashtest.ta.database.driver=org.hsqldb.jdbcDriver

squashtest.ta.database.url=jdbc:hsqldb:hsql://localhost:9002

squashtest.ta.database.username=sa

squashtest.ta.database.password=

Cleaning up the database using a Flat XML dataset

First, we will clean up the database, before populating it again with the testcase initial data.

• • Create a 'datasets' subdirectory in the 'resources' directory. The datasets directory will hold all the flat XML datasets we will use to clean up, populate and check the database.

Download the cleaning-dataset.xml file, and paste it into the datasets directory. The 'cleaning-dataset.xml' is a flat XML dataset, containing the list of all the tables of the PetStore database, as follows:

‹?xml version="1.0" encoding="UTF-8"?›

‹dataset›

‹ACCOUNT›

‹SEQUENCE›

‹ORDERSTATUS›

‹SIGNON›

‹CATEGORY›

‹INVENTORY›

‹BANNERDATA›

‹ORDERS›

‹LINEITEM›

‹SUPPLIER›

‹PROFILE›

‹PRODUCT›

‹ITEM/›

‹/dataset›

• • Open the 'PetStoreSeleniumTest.ta' file in the Eclipse text editor.

  • Add the following instruction under the 'SETUP :' section :

SETUP :

# DELETE_ALL_DBUNIT datasets/cleaning-dataset.xml FROM petshop_db

TEST :

# EXECUTE_SELENIUM2 selenium WITH MAIN CLASS PetStoreSeleniumTest

TEARDOWN :

This instruction tells the Squash-TA engine to delete from the database all the data contained in all the table listed in the 'cleaning-dataset.xml' file.

Populating the database using a Flat XML dataset

Download the initial-dataset.xml file, and paste it into the datasets directory. The 'initial-dataset.xml' file is a flat XML dataset, containing all the data required for the Selenium script to be run.

Open the 'PetStoreSeleniumTest.ta' file in the Eclipse text editor.

Add the following instruction under the 'SETUP :' section :

SETUP :

# DELETE_ALL_DBUNIT datasets/cleaning-dataset.xml FROM petshop_db

# INSERT_DBUNIT datasets/initial-dataset.xml INTO petshop_db

TEST :

# EXECUTE_SELENIUM2 selenium WITH MAIN CLASS PetStoreSeleniumTest

TEARDOWN :

This instruction tells the Squash-TA engine to insert into the PetStore database all the data, which are contained in the 'initial-dataset.xml' file.

• • Execute the 'PetStoreSeleniumTest.ta' again (see section Executing the Squash-TA testcase). It should be successful again.

Checking the database contents after interacting with the GUI

• • After the execution of the Selenium WebDriver script, some data should have been inserted or updated in the PetStore database, i.e. :

  • there should be a new row in each of the following tables, containing the details of the order we have just made:

    • ORDERS (details of the user who made the order, shipping address, etc.)

    • ORDERSTATUS (status of the order we've just made)

    • LINEITEM (item that was ordered)

  • In the INVENTORY table, the quantity of ratleless rattlesnakes (i.e. item EST-12) should have decreased by 1, down to 9999.

Let's check that these data are actually in our database:

• • Download the verification-dataset.xml file, and paste it into the 'datasets' directory. The 'verification-dataset.xml' file is a flat XML dataset, containing the data that should have been inserted or updated in the PetStore database, as follows:

‹?xml version="1.0" encoding="UTF-8"?›

‹dataset›

‹ORDERS ORDERID="1002" USERID="j2ee" ORDERDATE="${now().format(yyyy-MM-dd)}" SHIPADDR1="901 San Antonio Road" ...›

‹ORDERSTATUS ORDERID="1002" LINENUM="1002" TIMESTAMP="${now().format(yyyy-MM-dd)}" STATUS="P"›

‹LINEITEM ORDERID="1002" LINENUM="1" ITEMID="EST-12" QUANTITY="1" UNITPRICE="18.5"›

‹INVENTORY ITEMID="EST-12" QTY="9999"›

‹/dataset›

You may have noticed the "${now().format(yyyy-MM-dd)}" formulae. Squash-TA will replace them with the date of the testcase execution (that is what the "now()" part stands for), using the "yyyy-MM-dd" format. This will ensure the testcase will not fail even if you play it back some days after you have created it.

• • Open the 'PetStoreSeleniumTest.ta' file in the Eclipse text editor.

  • Add the following instruction under the 'TEST :' section, after the EXECUTE_SELENIUM2 instruction :

SETUP :

# DELETE_ALL_DBUNIT datasets/cleaning-dataset.xml FROM petshop_db

# INSERT_DBUNIT datasets/initial-dataset.xml INTO petshop_db

TEST :

# EXECUTE_SELENIUM2 selenium WITH MAIN CLASS PetStoreSeleniumTest

# ASSERT_DBUNIT TARGET petshop_db CONTAINS datasets/verification-dataset.xml

TEARDOWN :

This instruction tells the Squash-TA engine to check that the PetStore database contains the data listed in the verification-dataset.xml file.

• • Execute the 'PetStoreSeleniumTest.ta' again. It should be successful again.

Cleaning up the database at the end of the test

At the end of the testcase, you might want to clean up the database, so the next testcase will start from a clean state.

Note : this step should not be necessary if you make sure you clean up the database at the beginning of every testcase. But well, better safe than sorry...

• • Open the 'PetStoreSeleniumTest.ta' file in the Eclipse text editor.

  • Add the following instruction under the 'TEARDOWN :' section :

SETUP :

# DELETE_ALL_DBUNIT datasets/cleaning-dataset.xml FROM petshop_db

# INSERT_DBUNIT datasets/initial-dataset.xml INTO petshop_db

TEST :

# EXECUTE_SELENIUM2 selenium WITH MAIN CLASS PetStoreSeleniumTest

# ASSERT_DBUNIT TARGET petshop_db CONTAINS datasets/verification-dataset.xml

TEARDOWN :

# DELETE_ALL_DBUNIT datasets/cleaning-dataset.xml FROM petshop_db

• • Execute the 'PetStoreSeleniumTest.ta' again.

That is it ! Please do not hesitate to post a message on our forum if you have any remarks or questions.