137
Designing Top-Class Test Suites Designing Top-Class Test Suites FOR WEB APPLICATIONS FOR WEB APPLICATIONS Lukas Fryc

Designing Top-Class Test Suites for Web Applications

Embed Size (px)

DESCRIPTION

The evolution which came with the Arquillian, award-winning integration test framework, and Selenium, outstanding tool for UI automation, allows to write high-quality tests. But these technologies can’t save the world by themselves, since they are leaving too many questions open:* Does Selenium cover everything? It covers page transitions, a simple JavaScript interaction and a portion of DOM. Is it really enough?* Mocking requests for testing server-side code is pain. Is it necessary?* Are you able to detect that your component’s visual representation changes?* Does investigating these changes involve a disproportionate amount of effort?* Isn’t manual test development too expensive?What if you could fill all the above gaps?

Citation preview

Page 1: Designing Top-Class Test Suites for Web Applications

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

Lukas Fryc

Page 2: Designing Top-Class Test Suites for Web Applications

Lukas Fryc

@LFryc

$ whoami

JBoss Software EngineerArquillian Commiter

Page 3: Designing Top-Class Test Suites for Web Applications

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

Page 4: Designing Top-Class Test Suites for Web Applications

TestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTesting

#Agile

#TDD

“You can hear about testingfrom everywhere!”

Page 5: Designing Top-Class Test Suites for Web Applications

Testing = ?

“How would you complete equation?

What word do you imagine when someone says testing?”

Page 6: Designing Top-Class Test Suites for Web Applications

Testing = Pain

Page 7: Designing Top-Class Test Suites for Web Applications

Testing = Enjoyable!

“What about changing that equation a little bit?”

Page 8: Designing Top-Class Test Suites for Web Applications

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.”

Page 9: Designing Top-Class Test Suites for Web Applications

Reinventing the Wheel

Page 10: Designing Top-Class Test Suites for Web Applications

No one saves the World?

Page 11: Designing Top-Class Test Suites for Web Applications

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

Page 12: Designing Top-Class Test Suites for Web Applications

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

Page 13: Designing Top-Class Test Suites for Web Applications

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

Page 14: Designing Top-Class Test Suites for Web Applications

“At first, he comes withAbility to split one big

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

in separation.”

Page 15: Designing Top-Class Test Suites for Web Applications

“And he makes sure these deployments work

on various of Earth's application servers.”

Page 16: Designing Top-Class Test Suites for Web Applications

“...and once he deploys the deployment into

container, he makes sure you have all the goodness

from inside available using dependency

injection.”

Page 17: Designing Top-Class Test Suites for Web Applications

“...and that all backed with strong development

tools.”

Page 18: Designing Top-Class Test Suites for Web Applications

TestNGJUnit

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

you already know.”

Page 19: Designing Top-Class Test Suites for Web Applications

Testing Revolution

Page 20: Designing Top-Class Test Suites for Web Applications

Ike brings tests to the Server

Page 21: Designing Top-Class Test Suites for Web Applications

But what about the Client?

Page 22: Designing Top-Class Test Suites for Web Applications

The little bit of Theory...

Page 23: Designing Top-Class Test Suites for Web Applications
Page 24: Designing Top-Class Test Suites for Web Applications
Page 25: Designing Top-Class Test Suites for Web Applications
Page 26: Designing Top-Class Test Suites for Web Applications
Page 27: Designing Top-Class Test Suites for Web Applications

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

Page 28: Designing Top-Class Test Suites for Web Applications

Enough Theory!

Page 29: Designing Top-Class Test Suites for Web Applications

Let's bring tests to the Client

Page 30: Designing Top-Class Test Suites for Web Applications

TestNGJUnit

Page 31: Designing Top-Class Test Suites for Web Applications

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

Page 32: Designing Top-Class Test Suites for Web Applications

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

Page 33: Designing Top-Class Test Suites for Web Applications

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

Page 34: Designing Top-Class Test Suites for Web Applications

W3C: Browser Automation Spec

Page 35: Designing Top-Class Test Suites for Web Applications

Oh, such a great tool!

Page 36: Designing Top-Class Test Suites for Web Applications

Let's invade client!

Page 37: Designing Top-Class Test Suites for Web Applications

“Ouch, we need some

abstraction!”

Page 38: Designing Top-Class Test Suites for Web Applications

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!”

Page 39: Designing Top-Class Test Suites for Web Applications

At least, the app is covered...

Page 40: Designing Top-Class Test Suites for Web Applications

“But this is what actually Selenium see.”

Page 41: Designing Top-Class Test Suites for Web Applications

Black Box

Page 42: Designing Top-Class Test Suites for Web Applications

State Transitions

“Selenium is able to test transitions between pages.”

Page 43: Designing Top-Class Test Suites for Web Applications

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.”

Page 44: Designing Top-Class Test Suites for Web Applications

Let's change the game...

Page 45: Designing Top-Class Test Suites for Web Applications

Right tool for the Job

Page 46: Designing Top-Class Test Suites for Web Applications

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

Page 47: Designing Top-Class Test Suites for Web Applications

“and add your favorite language.”

Page 48: Designing Top-Class Test Suites for Web Applications

“and little bit of Alien technology.”

Page 49: Designing Top-Class Test Suites for Web Applications

Arquillian DroneIke's Hard-Worker

Page 50: Designing Top-Class Test Suites for Web Applications
Page 51: Designing Top-Class Test Suites for Web Applications

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

Page 52: Designing Top-Class Test Suites for Web Applications

Help Devs get along with QA Developers focused on tests

QA focused on automation

arquillian.xml configuration for cross-browser testing

Page 53: Designing Top-Class Test Suites for Web Applications

Let Ike invade the Client

Page 54: Designing Top-Class Test Suites for Web Applications

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

Page 55: Designing Top-Class Test Suites for Web Applications

“Something enough strong to handle all the inconsistencies.”

Page 56: Designing Top-Class Test Suites for Web Applications

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

Page 57: Designing Top-Class Test Suites for Web Applications

Arquillian GrapheneShielding Ike from Maintenance Burden

Page 58: Designing Top-Class Test Suites for Web Applications

Strongly type-safeProven to handle AJAX

Request Guards

jQuery Selectors

Page 59: Designing Top-Class Test Suites for Web Applications

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

Page 60: Designing Top-Class Test Suites for Web Applications

Strongly type-safeProven to handle AJAX

Request Guards

jQuery Selectors

Page Extensions – Script InjectionCross-cutting concerns

Interceptors

Page 61: Designing Top-Class Test Suites for Web Applications

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

@InjectDocument document;

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

Page 62: Designing Top-Class Test Suites for Web Applications

Isn't that too low-level?

Page 63: Designing Top-Class Test Suites for Web Applications

Reusable Abstractions

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

Page 64: Designing Top-Class Test Suites for Web Applications

Page Objects

“Introducing well-known Selenium pattern:”

Page 65: Designing Top-Class Test Suites for Web Applications

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

Page 66: Designing Top-Class Test Suites for Web Applications

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

Page 67: Designing Top-Class Test Suites for Web Applications
Page 68: Designing Top-Class Test Suites for Web Applications

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

Page 69: Designing Top-Class Test Suites for Web Applications

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

Page 70: Designing Top-Class Test Suites for Web Applications

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

Page 71: Designing Top-Class Test Suites for Web Applications

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

calendar.setDate(new Date());

Page 72: Designing Top-Class Test Suites for Web Applications

@Componentpublic class Calendar {

@Root WebElement driver;

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

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

Page 73: Designing Top-Class Test Suites for Web Applications

Component ObjectsWill be part of Arquillian Graphene 2.x

Page 74: Designing Top-Class Test Suites for Web Applications

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.”

Page 75: Designing Top-Class Test Suites for Web Applications

Let's do the review...

Page 76: Designing Top-Class Test Suites for Web Applications

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

Page 77: Designing Top-Class Test Suites for Web Applications

3MissingPieces

Page 78: Designing Top-Class Test Suites for Web Applications

TestNGJUnit

“What is missing here?

No manual coverage and no unit and integration

tests for client-side!”

Page 79: Designing Top-Class Test Suites for Web Applications

How to avoid manual testing?

Page 80: Designing Top-Class Test Suites for Web Applications

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.”

Page 81: Designing Top-Class Test Suites for Web Applications

Automated Visual Verification

Page 82: Designing Top-Class Test Suites for Web Applications

The Music of the Future?

Page 83: Designing Top-Class Test Suites for Web Applications

Arquillian RushEyeGoogle Summer of Code 2012

Page 84: Designing Top-Class Test Suites for Web Applications

TestNGJUnit

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

Page 85: Designing Top-Class Test Suites for Web Applications

Unit Testing Client

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

Page 86: Designing Top-Class Test Suites for Web Applications

Unit Testing FrameworksQUnit, Jasmine, JsMockito

Test RunnersJSTD, Selenium, Maven

Page 87: Designing Top-Class Test Suites for Web Applications

Yet another tool to configure?

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

Without automation, they are not tests.”

Page 88: Designing Top-Class Test Suites for Web Applications

Reuse the Automation Setup

Page 89: Designing Top-Class Test Suites for Web Applications

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.”

Page 90: Designing Top-Class Test Suites for Web Applications

“JavaScript testing does not scale!”

~John Resig

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

Page 91: Designing Top-Class Test Suites for Web Applications

TestSwarmCrowd-sourcing for Browser Coverage

Jenkins integration

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

Page 92: Designing Top-Class Test Suites for Web Applications

Browser Tests in the CloudSauceLabs On Demand

Integration with Arquillian comming

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

Page 93: Designing Top-Class Test Suites for Web Applications

TestNGJUnit

“And once the client is covered too, only

integration tests for client are missing.”

Page 94: Designing Top-Class Test Suites for Web Applications

Client + Server Integration

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

Page 95: Designing Top-Class Test Suites for Web Applications

“We have browser and test on one side and

server on opposite side.”

Page 96: Designing Top-Class Test Suites for Web Applications

“With UI automation, we are sending request from

client to the server.”

Page 97: Designing Top-Class Test Suites for Web Applications

“And server generates response.”

Page 98: Designing Top-Class Test Suites for Web Applications

Black Box

Page 99: Designing Top-Class Test Suites for Web Applications

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

mocking requests, which invokes verification

code.”

Page 100: Designing Top-Class Test Suites for Web Applications

Don't mock me

Page 101: Designing Top-Class Test Suites for Web Applications

The Tour to the ServerThere and Back Again

Page 102: Designing Top-Class Test Suites for Web Applications

“Let's make the connection between client

and server live.”

Page 103: Designing Top-Class Test Suites for Web Applications

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

sent as part of the request.”

Page 104: Designing Top-Class Test Suites for Web Applications

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

of the server state in several lifecycle phases.”

Page 105: Designing Top-Class Test Suites for Web Applications

“Offering all the gear which Arquillian offers,

including test enrichment for injection of test

dependencies.”

Page 106: Designing Top-Class Test Suites for Web Applications

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

Page 107: Designing Top-Class Test Suites for Web Applications

“Client can verify the response and send

subsequent request.”

Page 108: Designing Top-Class Test Suites for Web Applications

Crazy idea?

Page 109: Designing Top-Class Test Suites for Web Applications

JSFUnit

“But it is already possible!”

Page 110: Designing Top-Class Test Suites for Web Applications

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

Page 111: Designing Top-Class Test Suites for Web Applications

TestNGJUnit

“Now, we are covered!”

Page 112: Designing Top-Class Test Suites for Web Applications

Client Invasion

Page 113: Designing Top-Class Test Suites for Web Applications

That's it...

Page 114: Designing Top-Class Test Suites for Web Applications

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

Page 115: Designing Top-Class Test Suites for Web Applications

Mobile

Page 116: Designing Top-Class Test Suites for Web Applications
Page 117: Designing Top-Class Test Suites for Web Applications

“Drone can instantiate browser emulator or

connect to real device.”

Page 118: Designing Top-Class Test Suites for Web Applications
Page 119: Designing Top-Class Test Suites for Web Applications

“And create the browser within the

emulator/device.”

Page 120: Designing Top-Class Test Suites for Web Applications

Arquillian AndroidEmulating Mobile Platform

Page 121: Designing Top-Class Test Suites for Web Applications
Page 122: Designing Top-Class Test Suites for Web Applications

Development on Steroids

Page 123: Designing Top-Class Test Suites for Web Applications

Speeding up Development Reusable Browser Session

Arquillian JRebel Extension

Page 124: Designing Top-Class Test Suites for Web Applications

Arquillian

Page 125: Designing Top-Class Test Suites for Web Applications

Experience the Future Now

Page 126: Designing Top-Class Test Suites for Web Applications

I must know more...

Page 127: Designing Top-Class Test Suites for Web Applications

http://bit.ly/arq-preview

Page 128: Designing Top-Class Test Suites for Web Applications

http://bit.ly/arq-users

Page 129: Designing Top-Class Test Suites for Web Applications

Getting Involved

Page 130: Designing Top-Class Test Suites for Web Applications

http://github.com/arquillian

Page 131: Designing Top-Class Test Suites for Web Applications

http://bit.ly/arq-devs

Page 132: Designing Top-Class Test Suites for Web Applications

http://bit.ly/jboss-testing

Page 133: Designing Top-Class Test Suites for Web Applications

#jbosstesting @ irc.freenode.net

Page 134: Designing Top-Class Test Suites for Web Applications

#Arquillian

Page 135: Designing Top-Class Test Suites for Web Applications

Enjoy the Testing!

Page 136: Designing Top-Class Test Suites for Web Applications

@LFryc

http://bit.ly/lfryc

Questions for Ike?

http://bit.ly/arq-blog

Page 137: Designing Top-Class Test Suites for Web Applications

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