Serenity/JS - next generation acceptance testing for modern web applications

@JanMolak @Wakaleo#Devoxx #SerenityJS

Jan Molak, John Smart:
Next Generation
Acceptance Testing

acceptance tests that help deliver 
working software
that matters

what’s the root cause of 
most software
defects?

ambiguous,
unclear
and incorrect 
requirements

44-80% 
of all software defects
source:
- 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”

Behaviour-Driven Development

Domain-Driven Design

User-Centred Design
Domain-Driven Design

reliable
scalable
actionable
acceptance tests that are:

example
feature → scenario

Feature: Filter the list to find items of interest 
 
In order to limit the cognitive load 
James would like to filter his todo list  
to only show items of interest

Scenario: Viewing Active items only 
 
Given James has a list with Walk the dog, Get a coffee 
And he completes Walk the dog 
When he filters his list to show only Active tasks 
Then his todo list should contain Get a coffee

automation, take #1
“a test script”


Given James has a list with Walk the dog, Get a coffee
——————————————————————————————————————————————————————
this.Given(/^.*has a list with (.*)$/, (items, done) => {
done(); 
});

——————————————————————————————————————————————————————
this.Given (/^.*has a list with (.*)$/, (items, done) => {
browser.get('http://todomvc.com/examples/angularjs/'); 
items.split(‘,’).forEach(item => { 
element(by.id(‘new-todo’)). 
sendKeys(item); 
element(by.id(‘new-todo’)). 
sendKeys(protractor.Key.ENTER); 
});
done(); 
});

automation, take #2
“a re-structured  
test script”

——————————————————————————————————————————————————————
this.Given (/^.*has a list with (.*)$/, (items, done) => {
let todoList = new TodoListPage();
todoList.get(); 
items.split(‘,’).forEach(item => { 
todoList.add(item);
});
done(); 
});

class TodoListPage { 
get () {
browser.get('http://todomvc.com/examples/angularjs/');
} 
 
add (item: string) { 
element(by.id(‘new-todo’)).sendKeys(item); 
element(by.id('new-todo')).sendKeys(protractor.Key.ENTER); 
} 
 
complete (item: string) {
element(by.xpath(
'//*[@class="view" and contains(.,"' + item + '")]' +  
'//input[@type="checkbox"]' 
)).click();
}
// … 
}

automation, take #3
“a screenplay”

hierarchical task analysis

actor

goal

tasks

interactions

 
 
actor

 
 
actor
goal

 
actor
goal
tasks

To view Active items only, James attempts to: 
Start with a list containing: Walk the dog, Get a coffee
Complete a todo item called: Walk the dog  
Filter list to show only Active tasks 
Expect to see: Get a coffee
actor
goal
tasks

Open browser on ‘todomvc.com/examples/angularjs/'
Resize browser window to maximum
Add a todo item called ‘Walk the dog’
Add a todo item called ‘Get a coffee’
...
actor
goal
tasks

Enter the value ‘Get a coffee’
Hit the Enter key
...
actor
goal
tasks
inter- 
actions

Enter the value ‘Get a coffee’
Hit the Enter key
...

Start.withATodoListContaining(‘Walk the dog’, …)
Open.browserOn(‘todomvc.com/examples/angularjs/’)
ResizeBrowserWindow.toMaximum()
AddATodoItem.called(‘Walk the dog’)
AddATodoItem.called(‘Get a coffee’)
Enter.theValue(‘Get a coffee’) 
.into(TodoList.New_Todo_Field)
.thenHit(protractor.Key.Enter)

Serenity/JS
Screenplay Pattern

let james = Actor.named(‘James’); actor

let james = Actor.named(‘James’).whoCan(
BrowseTheWeb.using(protractor.browser)
);
actor
has
abilities

james.attemptsTo( 
Start.withATodoListContaining(items) 
);
actor
performs
tasks

this.Given (/^.*has a list with (.*)$/, (items) => {
return james.attemptsTo( 
Start.withATodoListContaining(items) 
);
});
actor
performs
tasks

export class Start implements Task {
 
performAs(actor: PerformsTasks): PromiseLike<void> {
return actor.attemptsTo( 
Open.browserOn('/examples/angularjs/'), 
ResizeBrowserWindow.toMaximum(), 
AddTodoItems.called(this.initialItems) 
); 
}  
}
tasks
consist of
tasks

export class AddATodoItem implements Task {
 
performAs(actor: PerformsTasks): PromiseLike<void> { 
return actor.attemptsTo( 
Enter.theValue(‘Walk the dog’) 
.into(TodoList.New_Todo_Field),
Hit.the(protractor.Key.Enter) 
.into(ToDoList.New_Todo_Field) 
);
} 
}
tasks
consist of
inter-
actions

export class AddATodoItem implements Task {
@step('{0} adds a todo item called "#name"') 
performAs(actor: PerformsTasks): PromiseLike<void> { 
// …
}
constructor(private name: string) { 
}
}
tasks
can be
annotated

to create
powerful
reports

lights, camera, 
Demo!

github.com/jan-molak/serenity-js

Serenity/JS - next generation acceptance testing for modern web applications

More Related Content

Similar to Serenity/JS - next generation acceptance testing for modern web applications (20)

Recently uploaded (20)

Serenity/JS - next generation acceptance testing for modern web applications