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

@JanMolak @Wakaleo#Devoxx #SerenityJS

Jan Molak, John Smart:

Next GenerationAcceptance Testing

acceptance tests that help deliver working software that matters

what’s the root cause ofmost software defects?

ambiguous, unclear and incorrectrequirements

44-80%of all software defectssource:- 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 DesignBehaviour-Driven Development

User-Centred DesignDomain-Driven Design

Behaviour-Driven Development

reliablescalable

actionable

acceptance tests that are:

example

feature → scenario

Feature:Filterthelisttofinditemsofinterest InordertolimitthecognitiveloadJameswouldliketofilterhistodolisttoonlyshowitemsofinterest

Scenario:ViewingActiveitemsonlyGivenJameshasalistwithWalkthedog,GetacoffeeAndhecompletesWalkthedogWhenhefiltershislisttoshowonlyActivetasksThenhistodolistshouldcontainGetacoffee

automation, take #1 “a test script”

GivenJameshasalistwithWalkthedog,Getacoffee——————————————————————————————————————————————————————this.Given(/^.*hasalistwith(.*)$/,(items,done)=>{

done();});

GivenJameshasalistwithWalkthedog,Getacoffee——————————————————————————————————————————————————————this.Given(/^.*hasalistwith(.*)$/,(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();});

GivenJameshasalistwithWalkthedog,Getacoffee——————————————————————————————————————————————————————this.Given(/^.*hasalistwith(.*)$/,(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”

GivenJameshasalistwithWalkthedog,Getacoffee——————————————————————————————————————————————————————this.Given(/^.*hasalistwith(.*)$/,(items,done)=>{lettodoList=newTodoListPage();

todoList.get();

items.split(‘,’).forEach(item=>{todoList.add(item);});

done();});

classTodoListPage{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"andcontains(.,"'+item+'")]'+ '//input[@type="checkbox"]')).click();}//…}

automation, take #3 “a screenplay”

hierarchical task analysis

interactions

Feature:FilterthelisttofinditemsofinterestInordertolimitthecognitiveloadJameswouldliketofilterhistodolisttoonlyshowitemsofinterest

actor goal

ToviewActiveitemsonly,Jamesattemptsto:

Startwithalistcontaining:Walkthedog,GetacoffeeCompleteatodoitemcalled:WalkthedogFilterlisttoshowonlyActivetasksExpecttosee:Getacoffee

actor goal

Startwithalistcontaining:Walkthedog,GetacoffeeOpenbrowseron‘todomvc.com/examples/angularjs/'ResizebrowserwindowtomaximumAddatodoitemcalled‘Walkthedog’Addatodoitemcalled‘Getacoffee’...

actor goal

Startwithalistcontaining:Walkthedog,GetacoffeeOpenbrowseron‘todomvc.com/examples/angularjs/'ResizebrowserwindowtomaximumAddatodoitemcalled‘Walkthedog’Addatodoitemcalled‘Getacoffee’Enterthevalue‘Getacoffee’HittheEnterkey...

actor goal tasks inter-

actions

Startwithalistcontaining:Walkthedog,GetacoffeeOpenbrowseron‘todomvc.com/examples/angularjs/'ResizebrowserwindowtomaximumAddatodoitemcalled‘Walkthedog’Addatodoitemcalled‘Getacoffee’Enterthevalue‘Getacoffee’HittheEnterkey...

Start.withATodoListContaining(‘Walkthedog’,…)Open.browserOn(‘todomvc.com/examples/angularjs/’)ResizeBrowserWindow.toMaximum()AddATodoItem.called(‘Walkthedog’)AddATodoItem.called(‘Getacoffee’)Enter.theValue(‘Getacoffee’).into(TodoList.New_Todo_Field).thenHit(protractor.Key.Enter)

Serenity/JS Screenplay Pattern

letjames=Actor.named(‘James’);actor

letjames=Actor.named(‘James’).whoCan(BrowseTheWeb.using(protractor.browser));

actor has

abilities

james.attemptsTo(Start.withATodoListContaining(items));

actor performs

this.Given(/^.*hasalistwith(.*)$/,(items)=>{returnjames.attemptsTo(Start.withATodoListContaining(items));});

actor performs

exportclassStartimplementsTask{performAs(actor:PerformsTasks):PromiseLike<void>{returnactor.attemptsTo(Open.browserOn('/examples/angularjs/'),ResizeBrowserWindow.toMaximum(),AddTodoItems.called(this.initialItems));}}

tasks consist of

exportclassAddATodoItemimplementsTask{performAs(actor:PerformsTasks):PromiseLike<void>{returnactor.attemptsTo(Enter.theValue(‘Walkthedog’).into(TodoList.New_Todo_Field),Hit.the(protractor.Key.Enter).into(ToDoList.New_Todo_Field) ); }}

tasks consist of

inter-actions

exportclassAddATodoItemimplementsTask{

@step('{0}addsatodoitemcalled"#name"')performAs(actor:PerformsTasks):PromiseLike<void>{//…}

constructor(privatename: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

Software

Serenity Pistols

Serenity Proximus

Serenity Pastures

Serenity walk

Serenity Snippets

Pure Serenity

Serenity Ebrochure1

JS A DVANCED JavaScript Advanced Programming. JS A DVANCED JS Browser Detection JS Cookies JS Form Validation JS Timing JS Create Object

Whisper & Serenity Wall Mounted Fans · Whisper & Serenity Wall Mounted Fans Serenity Wall Extractor Fan - Chrome Art no. 41800040600 Serenity Wall Extractor Fan - White Art no. 41800040610

WELLNESS & SERENITY

1618 Serenity

Serenity Holding_Company Profile

Orchid Serenity

Serenity Advertising

SERENITY ISLAND

Serenity Spa

Sri serenity videoSri Lavanya Serenity, Koramangala, Bangalore at 71 - 98 Lakhs

Serenity 2

LOST SERENITY

1m1 Serenity