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”

http://www.hse.gov.uk/pUbns/priced/hsg238.pdf

http://amzn.to/2evGir6

http://www0.cs.ucl.ac.uk/research/renoir/newsletter/backissues/renl34


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();});

http://todomvc.com/examples/angularjs/


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();}//…}



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



actor



goal



tasks



interactions


Feature:FilterthelisttofinditemsofinterestInordertolimitthecognitiveloadJameswouldliketofilterhistodolisttoonlyshowitemsofinterest





actor




actor goal



actor goal

tasks


ToviewActiveitemsonly,Jamesattemptsto:

Startwithalistcontaining:Walkthedog,GetacoffeeCompleteatodoitemcalled:WalkthedogFilterlisttoshowonlyActivetasksExpecttosee:Getacoffee

actor goal

tasks



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

actor goal

tasks

http://todomvc.com/examples/angularjs/'



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)



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

tasks


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

actor performs

tasks


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

tasks consist of

tasks


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

https://github.com/jan-molak/serenity-js

Software

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