Testing Web Applications

Plan

• The presentation covers:

• Selenium framework

• Spring MVC Test framework

• HttpUnit framework

Selenium

What is Selenium?

• Selenium is a suite of tools to automate web application testing across many platforms

• Tests run directly in the browser

• Two major components:• Selenium IDE• Selenium WebDriver

Traditional approach for testing

Release

Development

Feature developed

Acceptance Testing

Bug found!

Regression Testing

Regression found!

Faster feedback

•Write test as you go

•Run them as often as you can

•Problems are found quickly

Release

Regression Testing

Acceptance Testing

Development

Why automated tests?

• Manual testing is slow, tedious and error-prone• Especially for regression!

• Either take long time or less thorough

• What now? Start again?

Regression Testing

3 months

With automated tests

• Consistently thorough

• Fast enough to start again and again and again…

Regression Testing

10 minutes

Selenium components

• Selenium IDE• an integrated development environment for Selenium tests

• Selenium WebDriver• a Java library• write Java code, WebDriver sends commands to a browser

• Selenium Server (Selenium Grid)• allows to run tests on different machines against different

browsers in parallel

Selenium usages

• Browser compatibility testing

Test your application to see if it works correctly on different browsers and operating systems. The same script can run on any Selenium platform.

• System functional testing

Create regression tests to verify application functionality and user acceptance.

How to start

• Download and install Selenium IDE

• It is implemented as a Firefox extension, and allows you to record, edit, and debug tests

http://seleniumhq.org/download/

• To launch Selenium IDE in Firefox select

Tools Selenium IDE

Selenium IDE

• Firefox extension

• Easy record and playback

• Not just a recorder

• Intelligent field selection

will use IDs, names,

or XPath as needed

Selenium IDE

• Auto-complete for all common Selenium commands

• Walk through tests

• Debug and set breakpoints

• Save tests as HTML, Ruby scripts, or any other format

Selenium test format

• Selenium saves all information in an HTML table format

• Each record consists of:

• Command – tells Selenium what to do using actions or assertions (e.g. “open”, “type”, “click”, “assertText”)

• Target – tells Selenium which HTML element a command refers to (e.g. textbox, header, table)

• Value – used for any command that might need a value of some kind (e.g. “Hello”)

Example: Selenium test

Test writing strategy

1. Start recording in Selenium IDE

2. Execute scenario on a running web application

3. Stop recording in Selenium IDE

4. Add assertions

Creating tests and test suite• Create several tests in Selenium IDE

• Save them as e.g. • \webapp\tests\discussions-suite\MyTest1.html• \webapp\tests\discussions-suite\MyTest2.html

• Create HTML file for test suite, e.g.\webapp\tests\discussions-suite\MyTestSuite.html

<table><tr><td>Music Test Suite</td></tr> <tr><td><a target="testFrame" href=“MyTest1.html">My Test 1</a></td></tr> <tr><td><a target="testFrame" href="MyTest2.html">My Test 2</a></td></tr></table>

Selenium Concepts• Element Locators

• Specify HTML elements• Patterns

• Used for pattern matching values• Action

• Manipulate the state of the application• Upon failure, testing stops

• Accessors• Store results in variables• Automatically generates assertions

• Assertion• Verify that the application generate the appropriate value

Element Locators• id=id

• Select the element with the specified @id attribute.

• name=name• Select the first element with the specified @name attribute.

• identifier=id• Select the element with the specified @id attribute• If no match is found, select the first element whose @name=id

• dom=javascriptExpression• Find an element using JavaScript traversal of the HTML

DOM. DOM locators must begin with "document."• dom=document.forms['myForm'].myDropdown• dom=document.images[56]

Element Locators

• xpath=xpathExpression• Locate an element using an XPath expression. XPath

locators must begin with "//".• xpath=//img[@alt='The image alt text']• xpath=//table[@id='table1']//tr[4]/td[2]

• link=textPattern• Select the link (anchor) element which contains text

matching the specified pattern.• link=The link text

Locator Defaults

Without a locator prefix, Selenium uses:• dom, for locators starting with "document."

• xpath, for locators starting with "//"

• identifier, otherwise

Actions

• Represent something a user would do

• Manipulate the state of the application

• Actions generally come in 2 forms: action and actionAndWait

• action performs the action

• actionAndWait assumes a server call and thus waits longer for a response

• open automatically waits

Command Actions

• open• Opens the target URL

• click*• Clicks on the target element

• type*• Enters the value specified by the value into the

specified target element

• select*• Selects a drop-down value specified by the value in

the specified target element

Command Actions• selectWindow

• Selects a popup window using the id specified by the target. If NULL, it returns to the main window

• goBack• Simulates user clicking back in the browser

• close• Simulates user clicking the close button of a popup

window

• pause• Pauses the execution of a script for an amount of

time in milliseconds specified in the target

Command Actions• fireEvent

• Simulate an event to trigger the onevent handler where the target specifies the element and the value specifies the event

• waitForValue• Waits for an input, specified by the target, to have a

certain value, specified by the value (Warning: If event doesn’t occur, apply previous fix to stop running script)

• store• Stores the value specified by the target into the

variable specified by the value

Command Actions

• chooseCancelOnNextConfirmation• Instructs Selenium to select cancel on the next

JavaScript dialog raised

• answerOnNextPrompt• Instructs Selenium to return the specified target in

response to the next prompt

Assertions

• Allows user to verify the state of the application

• Three modes:

• assert - upon failure, test is aborted

• verify - upon failure, the test continues running (logging the failure)

• waitFor• Waits timeout time for a condition’s truthiness

• Great for testing background Ajax behavior

Selenium IDE plugins

• ScreenShot on Fail

• Page Coverage

• Highlight Elements

• Power Debugger

• File Logging

• Stored Variables Viewer

• and many more…

Selenium WebDriver

• Selenium 2.0 has many new exciting features and improvements over Selenium 1

• The primary new feature is the integration of the WebDriver API

• The goal is to develop an object-oriented API that provides additional support for a larger number of browsers along with improved support for modern advanced web-app testing problems

http://seleniumhq.org/docs/03_webdriver.html

Selenium WebDriver

• WebDriver makes direct calls to the browser using each browser’s native support for automation

• Can be used equally well in a unit testing or from a plain old “main” method

• Java, C#, Python, Ruby, Perl, PHP bindings are provided

Selenium WebDriver

• Maven dependency:

• Now you can use WebDriver just as any normal library: it is entirely self-contained, and you do not need to start any additional processes or run any installers before using it

<dependency> <groupId>org.seleniumhq.selenium</groupId> <artifactId>selenium-java</artifactId> <version>2.37.1</version></dependency>

Selenium WebDriver Exampleimport org.openqa.selenium.*;

public class SeleniumExample { public static void main(String[] args) { WebDriver driver = new FirefoxDriver(); driver.get("http://www.google.com"); WebElement element = driver.findElement(By.name("q")); element.sendKeys("Cheese!"); element.submit(); System.out.println("Page title is: " + driver.getTitle()); // Google's search is rendered dynamically with JavaScript. // Wait for the page to load, timeout after 10 seconds (new WebDriverWait(driver, 10)).until(new

ExpectedCondition<Boolean>() { public Boolean apply(WebDriver d) { return d.getTitle().toLowerCase().startsWith("cheese!"); } });

System.out.println("Page title is: " + driver.getTitle()); driver.quit(); }} http://seleniumhq.org/docs/03_webdriver.html

Selenium-Grid

Selenium-Grid allows to run your tests on different machines against different browsers in parallel

http://seleniumhq.org/docs/07_selenium_grid.html

Selenium-Grid

Reasons to use Selenium-Grid:

•To run your tests against multiple browsers, multiple versions of browser, and browsers running on different operating systems

•To reduce the time it takes for the test suite to complete a test pass

Selenium Resources

• Selenium Home Pagehttp://seleniumhq.org/

• Selenium dokumentācijahttp://seleniumhq.org/docs/

• Par Selenium latviski (var būt novecojis) http://www.ante.lv/xwiki/bin/view/TrainingWebProgramming/Selenium

Spring MVC Test Framework

Spring support for testing MVC

• Two levels of support:• Unit-testing

• Integration testing

• Unit-testing• org.springframework.test.web.ModelAndViewAssert

• Package: org.springframework.mock.web

• Integration testing• Support for testing client and server-side Spring

MVC code through a fluent API

Spring MVC Test Framework

• Loads the actual Spring configuration through the TestContext framework 

• Always uses the DispatcherServlet to process requests

• No need for running in a Servlet container

• Builds on the familiar "mock" implementations of the Servlet API

Example

http://docs.spring.io/spring/docs/3.2.5.RELEASE/spring-framework-reference/htmlsingle/#unit-testing-spring-mvc

HttpUnit

HttpUnit framework

• HttpUnit is an open source software testing framework used to perform testing of web sites without the need for a web browser

http://httpunit.sourceforge.net/

Obtaining a web page response

• The center of HttpUnit is the WebConversation class, which takes the place of a browser talking to a single site

• Responsible for maintaining session context, which it does via cookies returned by the server

• Must create a request and ask the WebConversation for a response

Starting the conversation

• The response may now be manipulated either as pure text, as a DOM, or by using the various other methods

WebConversation wc = new WebConversation();WebRequest req = new GetMethodWebRequest( "http://www.meterware.com/testpage.html");WebResponse resp = wc.getResponse(req);

Examining and following links

• The simplest and most common form of navigation among web pages is via links

• HttpUnit allows users to find links by the text within them, and to use those links as new page requests

WebConversation wc = new WebConversation();WebResponse resp = wc.getResponse( "http://www.httpunit.org/doc/cookbook.html");WebLink link = resp.getLinkWith("response");link.click();WebResponse jdoc = wc.getCurrentPage();

Using the table structure of a web page

• The getTables() method will return an array of the top-level tables in the page, in the order in which they appear in the document

• Given a table, you can ask for one of its cells, and treat the result either as text or a DOM or ask for and tables, links, or forms nested within it

Table manipulation example

• The following code will confirm that the first table in the page has 4 rows and 3 columns, and that there is a single link in the last cell of the first row:

WebTable table = resp.getTables()[0];assertEquals("rows", 4, table.getRowCount());assertEquals("columns", 3,table.getColumnCount());assertEquals("links", 1, table.getTableCell(0,2).getLinks().length );

Working with forms

• There are a few basic things that a tester is likely to want to do with a form

• The most obvious first step is to verify the controls and their default values

• If they are correct, the tester will generally make some changes and submit the form to see how the system responds

Testing a form

WebForm form = resp.getForms()[0];assertEquals("La Cerentolla",

form.getParameterValue( "Name" ));assertEquals("Chinese",

form.getParameterValue( "Food" ));assertEquals("Manayunk",

form.getParameterValue( "Location" ));assertEquals("on",

form.getParameterValue( "CreditCard" ));

form.setParameter( "Food", "Italian" );form.removeParameter( "CreditCard" );form.submit();

HttpUnit Resources

• HttpUnit home pagehttp://httpunit.sourceforge.net/