Testing modern webapps. At scale.

serenity-js.org#SerenityJS @JanMolak
Jan Molak:
Testing modern web apps.
At scale.

Jan Molak
consultant, trainer, mentor, geek
 
janmolak.com 
jan.molak@smartcodeltd.co.uk 
twitter.com/JanMolak
linkedin.com/in/janmolak
github.com/jan-molak

Testing larger-scale projects

Good automated tests

Good automated tests are FAST
John Ferguson Smart

Good automated tests are FAST
Fast
Actionable
Scalable
Trustworthy

Testing a User Story

Find the fastest route
As a commuter, 
I’d like to know the fastest route between two stations, 
So that I get to my destination as quickly as possible

As a commuter, 
before? after?

As a commuter, 
BDD
regression 
testing
limited testing opportunities
UI-heavy
slow and “flaky”
verify, don’t validate
testability built in
business-focused
validate and verify
VS

As a commuter, 
BDD
Scenario: Connie looks for the next train
Given Jubilee line trains leave Canary Wharf at 16:59, 17:01 
When Connie wants to travel from Canary Wharf to Waterloo at 17:00 
Then she should be told about the train at 17:01

As a commuter, 
BDD
Given Jubilee line trains from Stratford leave Canary Wharf at 16:59, 17:01 
Then she should be told about the train at 17:01

As a commuter, 
BDD
Given Jubilee line trains from Stratford leave Canary Wharf  
↪ at 16:59, 17:01, 17:03, 17:09, 17:11 
Then she should be told about the trains at 17:01, 17:03, 17:09

“44-80% 
of all software defects are caused by unclear,  
ambiguous or incorrect requirements
sources:
- 44% - “Out of Control - Why Control Systems Go Wrong and How to Prevent Failure”
- 56% - “An Information Systems Manifesto”
- 80% - “Requirements: A quick and inexpensive way to improve testing”

Executable specifications

System under test
The system is a black box
Tests should exercise the system as the user would
Outside-in development

System under test
Limited testing opportunities
UI-heavy
Slow and “flaky”

System under test
Carrier 12:00 PM
Page Title
http://www.domain.com Google
… and duplicated :-/

Manual
“Test Pyramid”, 
Mike Cohn
“Software Testing Ice Cream Cone Anti-pattern”,
Alister Scott

How do we fix that?

Forget about the pyramid
¯_(ツ)_/¯

tech business
fast 
cheap
precise
slow 
expensive
broad
?
feedback
audience
unit tests
acceptance 
tests
end-to-end, 
integration,
contract, 
performance 
tests

Executable specifications 
at multiple levels

System under test
Carrier 12:00 PM
Page Title

System under test
Carrier 12:00 PM
Page Title
Web 
Interface
REST 
Interface
Domain 
Services

System under test
Carrier 12:00 PM
Page Title
Web 
Interface
REST 
Interface
Domain 
Services
actors interactions interfaces business logic

System under test
Carrier 12:00 PM
Page Title
Web 
Interface
REST 
Interface
Domain 
Services
actors interactions interfaces business logic
business logic adapters

Scenario decomposition

scenario decomposition
step When Connie wants to travel from Canary Wharf to Waterloo at 17:00

actor Connie

goal
actor Connie
Plan a journey

Open the
Journey
Planner
tasks
Plan a journeygoal
actor Connie

Open the
Journey
Planner
Choose
origin
Plan a journeygoal
actor Connie
tasks

Open the
Journey
Planner
Choose
origin
Choose
destination
Plan a journeygoal
actor Connie
tasks

Open the
Journey
Planner
Choose
origin
Choose
destination
Choose time
of departure
Plan a journeygoal
actor Connie
tasks

Open the
Journey
Planner
Choose
origin
Choose
destination
Choose time
of departure
Confirm
selection
Plan a journeygoal
actor Connie
tasks

Open the
Journey
Planner
Choose 
origin
Choose
destination
Choose time 
of departure
Confirm
selection
Enter
“Canary
Wharf”
Pick  
the first
suggestion
Press
[Arrow
Down]
Press
[Enter]interactions
Plan a journeygoal
actor Connie
tasks

Open the
Journey Planner
Choose 
origin
Choose
destination
Choose time 
of departure
Confirm
selection
Plan a journeygoal
actor Connie
tasks
PlanAJourney.from(‘Canary Wharf’) 
.to(‘Waterloo’) 
.departingAt(‘17:00’)

Open the
Journey Planner
Choose 
origin
tasks
OpenTheJourneyPlanner()
ChooseOrigin.of(‘Canary Wharf’)
ChooseDestination.of(‘Waterloo’)
ChooseTime.ofDeparture(‘17:00’)
ConfirmSelection()
Plan a journeygoal
actor Connie
Choose
destination
Choose time 
of departure
Confirm
selection

Send GET
request
Request.get(‘https://api.tfl.gov.uk/ 
↪ Journey/JourneyResults/ 
↪ Canary%20Wharf/to/Waterloo 
↪ ?time=1700’)
Plan a journeygoal
actor Connie
tasks

Send domain
event
JourneyPlanner.find({ 
origin: ‘Canary Wharf’, 
destination: ‘Waterloo’, 
departing_at: ’17:00’ 
});
Plan a journeygoal
actor Connie
tasks

The Screenplay Pattern

the screenplay pattern
“Page Objects Refactored”, 
Antony Marcano, Andy Palmer, 
John Ferguson Smart, Jan Molak

the screenplay pattern

Where does Serenity/JS fit?

the big picture
Web AppBrowsersSelenium 
WebDriver
Node.js
protractor
CLI
cucumbermocha
serenity-js

the big picture
Web AppBrowsersSelenium 
WebDriver
Node.js
protractor
CLI
cucumbermocha
serenity-js
Any external interface of the system
…

Levels of communication

actor tasks interfaces business logic
System under test
Web 
Interface
REST 
Interface
Domain 
Services

actor tasks
System under test
Web 
Interface
REST 
Interface
Domain 
Services
scenarios
find next train

actor
System under test
Web 
Interface
REST 
Interface
Domain 
Services
scenarios
find next train
tasksfeatures
journey
planner

actor
System under test
Web 
Interface
REST 
Interface
Domain 
Services
scenarios
find next train
tasksfeatures
journey
planner
offline map
service
disruption
notifications
capabilities
plan a
journey 
online

levels of communication
10,000 ft 
Release Readiness
-
+

1000 ft 
Capabilities and Features
-
+

100 ft 
Scenarios and Steps
-
+

release
readiness
-
+

-
+
release
readiness
capabilities

-
+
release
readiness
capabilities
features

-
+
release
readiness
capabilities
features
scenarios

Key benefits

key benefits
Focus 
on the user journey
and a common
business vocabulary
Scales well 
to teams with
varying levels of
experience
Good design
principles  
leading to lower
maintenance costs
Code reuse  
within and across
teams and projects

Q&A

Lights, camera, demo!
serenity-js.org 
github.com/serenity-js

Testing modern webapps. At scale.

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Testing modern webapps. At scale.

Ähnlich wie Testing modern webapps. At scale. (11)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Testing modern webapps. At scale.