Designing Top-Class Test Suites for Web Applications

Designing Top-Class Test SuitesDesigning Top-Class Test SuitesFOR WEB APPLICATIONSFOR WEB APPLICATIONS

Lukas Fryc

Lukas Fryc

@LFryc

$ whoami

JBoss Software EngineerArquillian Commiter

Agenda

● Agility in Testing● Testing: Basics & Principles● Client-Side Testing

● Unit Testing● UI Automation

● Foundations of Real Tests● JSFUnit.NG

● Speeding up Development● JRebel extension

TestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTesting

#Agile

#TDD

“You can hear about testingfrom everywhere!”

Testing = ?

“How would you complete equation?

What word do you imagine when someone says testing?”

Testing = Pain

Testing = Enjoyable!

“What about changing that equation a little bit?”

Enterprise Java Web Application

“But testing of large enterprise application can hardly can be enjoyable.”

“You need to write all the test harness at own and study all the tools.”

Reinventing the Wheel

No one saves the World?

“There is one: his name is Ike. He comes from far, deep space from planet Arquillian...”

“Ike brings heavy gear for fighting with alien bugs...”

“...and he is proud to share his powerful gear with us!”

“At first, he comes withAbility to split one big

deployment into many small - testing as little as components as possible

in separation.”

“And he makes sure these deployments work

on various of Earth's application servers.”

“...and once he deploys the deployment into

container, he makes sure you have all the goodness

from inside available using dependency

injection.”

“...and that all backed with strong development

tools.”

TestNGJUnit

“You can run it just from your IDE, re-using what

you already know.”

Testing Revolution

Ike brings tests to the Server

But what about the Client?

The little bit of Theory...

“Let's have ideal testing pyramid in mind, otherwise...”

Enough Theory!

Let's bring tests to the Client

TestNGJUnit

“But it isn't as simple as in Java - many different environments.”

“Fortunately there is tool which allows you to write tests in unified API for all those browsers.”

“And the even supports mocked browsers with same API.”

W3C: Browser Automation Spec

Oh, such a great tool!

Let's invade client!

“Ouch, we need some

abstraction!”

JavaC#

PythonRubyPHPPerl

“Even if we use favorite programming language, we can end up with many tests which take days to pass and may quickly turn out into maintenance burden!”

At least, the app is covered...

“But this is what actually Selenium see.”

Black Box

State Transitions

“Selenium is able to test transitions between pages.”

A little bit of...DOM / JavaScript / CSS

“...and a portion of all the page source code – JavaScript handlers, selected CSS and DOM changes as reaction to user interaction.”

Let's change the game...

Right tool for the Job

“Let's take an outstanding UI automation tool...”

“and add your favorite language.”

“and little bit of Alien technology.”

Arquillian DroneIke's Hard-Worker

“Drone comes to bring the browser to your test.”

Help Devs get along with QA Developers focused on tests

QA focused on automation

arquillian.xml configuration for cross-browser testing

Let Ike invade the Client

“But something else is needed to make your tests green.”

“Something enough strong to handle all the inconsistencies.”

“Let's deploy that to the browser page and see what happens!”

Arquillian GrapheneShielding Ike from Maintenance Burden

Strongly type-safeProven to handle AJAX

Request Guards

jQuery Selectors

guardXhr(button).click();guardHttp(button).click();

Strongly type-safeProven to handle AJAX

Request Guards

jQuery Selectors

Page Extensions – Script InjectionCross-cutting concerns

Interceptors

@JavaScript(“document”)public interface Document() { String getTitle();}

@InjectDocument document;

// calls 'return document.title;'document.getTitle();

Isn't that too low-level?

Reusable Abstractions

“Let's look for something on higher level.”

Page Objects

“Introducing well-known Selenium pattern:”

“Imagine you have page with all the elements and you express them as fields in the class.”

“Page Objects allows you to abstract page-oriented logic into objects.”

“But for modern AJAX-based application, it's simply not enough.”

“In enterprise applications, you use UI components that encapsulates low-level logic.”

“We could create the model of these components from their user's point of view?”

@FindBy(id=”form:calendar”)Calendar calendar;

calendar.setDate(new Date());

@Componentpublic class Calendar {

@Root WebElement driver;

@FindBy(css=”.dateButton”) WebElement button;

public void setDate() { input.click(); }}

Component ObjectsWill be part of Arquillian Graphene 2.x

Call to Action:Write & Share Component Objects

“When each framework and library providing UI components will design component objects the same as it share their code, it will be testing much more simpler.”

Let's do the review...

“Now, we can simply write tests on proper level of abstraction with minimum efforts.”

3MissingPieces

TestNGJUnit

“What is missing here?

No manual coverage and no unit and integration

tests for client-side!”

How to avoid manual testing?

Screen-shot Comparison

“We can automatically snap screen-shots of the

whole pages and compare them with historical data – it's

proven that rendering on one particular browser

and platform, images will be binary same.”

Automated Visual Verification

The Music of the Future?

Arquillian RushEyeGoogle Summer of Code 2012

TestNGJUnit

“Server is already covered with unit and integration tests, but what about the same goodness for client?”

Unit Testing Client

“Unit testing of client is even more important than unit testing of server, since it suffers from environment diversity.”

Unit Testing FrameworksQUnit, Jasmine, JsMockito

Test RunnersJSTD, Selenium, Maven

Yet another tool to configure?

“But once those unit tests are written, how to automate them?

Without automation, they are not tests.”

Reuse the Automation Setup

ArquillianDrone + QUnit | JSTDMaven / Jenkins / IDE

“For writing actual tests, you can use your favorite JS client testing tool.

We are actually working on integration with QUnit.”

“JavaScript testing does not scale!”

~John Resig

http://ejohn.org/blog/javascript-testing-does-not-scale/

TestSwarmCrowd-sourcing for Browser Coverage

Jenkins integration

“But it is rather for open source projects, right?”

Browser Tests in the CloudSauceLabs On Demand

Integration with Arquillian comming

“For corporates, it is more suitable to use cloud services:”

TestNGJUnit

“And once the client is covered too, only

integration tests for client are missing.”

Client + Server Integration

“The integration testing of client is actually making sure it communicates with server as expected.”

“We have browser and test on one side and

server on opposite side.”

“With UI automation, we are sending request from

client to the server.”

“And server generates response.”

Black Box

“On the other hand, when we are testing server from its JVM, we are

mocking requests, which invokes verification

code.”

Don't mock me

The Tour to the ServerThere and Back Again

“Let's make the connection between client

and server live.”

“Once the requests goes to the server, the test code is serialized and

sent as part of the request.”

“Server de-serializes the testing code from request and uses it for verification

of the server state in several lifecycle phases.”

“Offering all the gear which Arquillian offers,

including test enrichment for injection of test

dependencies.”

“Then the testing object is serialized again and sent back to the client, which can validate it.”

“Client can verify the response and send

subsequent request.”

Crazy idea?

JSFUnit

“But it is already possible!”

JSFUnitHtmlUnit

Asserts end of the Request State

JSF only

JSFUnit .NG (next generation)Selenium / any other HTTP client

Lifecycle

Any injectable resource

Any Servlet based framework

TestNGJUnit

“Now, we are covered!”

Client Invasion

That's it...

No, It can't be without....

Mobile

“Drone can instantiate browser emulator or

connect to real device.”

“And create the browser within the

emulator/device.”

Arquillian AndroidEmulating Mobile Platform

Development on Steroids

Speeding up Development Reusable Browser Session

Arquillian JRebel Extension

Arquillian

Experience the Future Now

I must know more...

http://bit.ly/arq-preview

http://bit.ly/arq-users

Getting Involved

http://github.com/arquillian

http://bit.ly/arq-devs

http://bit.ly/jboss-testing

#jbosstesting @ irc.freenode.net

#Arquillian

Enjoy the Testing!

@LFryc

http://bit.ly/lfryc

Questions for Ike?

http://bit.ly/arq-blog

http://www.flickr.com/photos/nickrussill/150410613/http://www.flickr.com/photos/audreyjm529/1240909256/http://www.flickr.com/photos/jo-h/6200225665/http://www.flickr.com/photos/stevendepolo/3796415185/http://watirmelon.com/2012/01/31/introducing-the-software-testing-ice-cream-cone/

Some photographs and pictures used in this presentation are authored by various authors

and released under the Creative Commons license