Sustainable Test Automation with Serenity BDD and Screenplay

serenity-bdd.info#SerenityBDD @Wakaleo
Sustainable Test Automation
with Serenity BDD and Screenplay

John Ferguson Smart
Author of ‘BDD in Action’ 
Lead Developer of Serenity BDD
Founder of the Serenity Dojo

Want to follow along?
bit.ly/serentiy-planner

We ❤ E2E

We 💔 E2E
(said no one ever)

Execution time: minutes → hours

Writing: hours → days

Analysis and reporting: hours → days

Analysis and reporting: hours → days
Maintenance: days → weeks

The difference between 
scalable tests  
and a world of pain 
is design.

Testing the Journey Planner

#SerenityBDD @Wakaleo serenity-bdd.info

When a commuter wants to travel  
from Waterloo to Canary Wharf  
around 9:00 AM they should be told  
about the 8:59 AM Jubilee Line train.

Open the Journey Planner

Open the Journey Planner 
Choose origin: Waterloo

Enter “Waterloo”

Pick the first suggestion

Wait for the suggestions

Press ▼

Press ▼ 
Press ↩

Choose destination: Canary Wharf

Choose time of departure: 9:00 AM

Click on the “change time” link

Click on the “Leaving” button

Click on the “Leaving” button
Select “09:00”

Confirm selection

Confirm selection
Click on the “Plan my journey”

Confirm selection
Click on the “Plan my journey”
Wait for the results to load

Confirm selection
See a Jubilee Line train at 08:59

At a high level,
it’s just 6 tasks

Scripting the flow

private final By origin = By.id("InputFrom");
private final By originSuggestions = By.cssSelector(".tt-suggestions");
private final By destination = By.id("InputTo");
private final By destinationSuggestions = By.cssSelector(".tt-suggestions");
private final By changeTimeLink = By.partialLinkText("change time");
private final By leavingButton = By.cssSelector("label[for=departing]");
private final By timeSelector = By.id("Time");
private final By planMyJourneyButton = By.cssSelector("#plan-a-journey .plan-journey-button");
private final By journeyResults = By.cssSelector(".summary-results");
private final By fastestJourney = By.cssSelector(".publictransport-box span.time");

browser.get("https://tfl.gov.uk/");

browser.get(“https://tfl.gov.uk/");
browser.findElement(origin).sendKeys("Waterloo");

browser.findElement(origin).sendKeys(“Waterloo");
WebDriverWait wait = new WebDriverWait(browser, 10);
wait.until(visibilityOfElementLocated(originSuggestions));

browser.findElement(originSuggestions).sendKeys(ARROW_DOWN);
browser.findElement(originSuggestions).sendKeys(ENTER);

browser.findElement(destination).sendKeys("Canary Wharf");

browser.findElement(destination).sendKeys("Canary Wharf”);
wait.until(visibilityOfElementLocated(destinationSuggestions));
browser.findElement(destinationSuggestions).sendKeys(ARROW_DOWN);
browser.findElement(destinationSuggestions).sendKeys(ENTER);

…
browser.findElement(changeTimeLink).click();
browser.findElement(leavingButton).click();
new Select(browser.findElement(timeSelector))
.selectByVisibleText("09:00");

…
new Select(browser.findElement(timeSelector))
.selectByVisibleText(“09:00");
browser.findElement(planMyJourneyButton).click();
wait.until(visibilityOfElementLocated(journeyResults));

…
String fastestDepartureTime =
startTimeOf(browser.findElement(fastestJourney).getText());
assertThat(fastestDepartureTime).isEqualTo("08:59");

private WebDriver browser;
@Before
public void openBrowser() {
browser = new FirefoxDriver();
}
@After
public void closeBrowser() {
browser.quit();
}
@Test
public void planning_a_journey() {
new Select(browser.findElement(timeSelector)).selectByVisibleText("09:00");
String fastestDepartureTime = startTimeOf(browser.findElement(fastestJourney).getText());
6 tasks ?

6 tasks buried in
36 lines of noise
private WebDriver browser;
@Before
public void openBrowser() {
browser = new FirefoxDriver();
}
@After
public void closeBrowser() {
browser.quit();
}
@Test
new Select(browser.findElement(timeSelector)).selectByVisibleText("09:00");
String fastestDepartureTime = startTimeOf(browser.findElement(fastestJourney).getText());

#SerenityBDD @Wakaleo
“
serenity-bdd.info
If you have WebDriver APIs
in your test methods,
You’re Doing It Wrong!
- Simon Stewart, creator of WebDriver

A test system needs design

Page Objects to the rescue?

@DefaultUrl(“https://tfl.gov.uk")
public class JourneyPlannerPage extends PageObject {
// Locators
// Actions
}

// Locators
@FindBy(id = "InputFrom")
private WebElementFacade origin;
@FindBy(className = "tt-suggestions")
private WebElementFacade originSuggestions;
@FindBy(id = “InputTo")
private WebElementFacade destination;
@FindBy(className = “tt-suggestions")
private WebElementFacade destinationSuggestions;
@FindBy(partialLinkText = "change time”)
private WebElementFacade changeTimeLink;
…

// Locators
…
// Actions
public void chooseOriginOf(String originValue) {
origin.sendKeys(originValue);
waitFor(visibilityOf(originSuggestions));
originSuggestions.sendKeys(Keys.ARROW_DOWN);
originSuggestions.sendKeys(Keys.ENTER);
}
public void chooseDestinationOf(String destinationValue) {…} 
public void confirmSelection() {…}
}

@RunWith(SerenityRunner.class)
public class JourneyPlannerWithPageObjectsTest {

@Managed WebDriver driver;

@Managed WebDriver driver;
JourneyPlannerPage journeyPlanner;
JourneyResultsPage journeyResults;

journeyPlanner.open();
journeyPlanner.chooseOriginOf(“Waterloo");
journeyPlanner.chooseDestinationOf("Canary Wharf”);
journeyPlanner.chooseTimeOfDeparture(“09:00”);
journeyPlanner.confirmSelection();

journeyPlanner.chooseOriginOf(“Waterloo");
journeyPlanner.chooseDestinationOf("Canary Wharf”);
journeyPlanner.chooseTimeOfDeparture(“09:00”);
assertThat(journeyResults.getFastestJourneyDepartureTime())
.isEqualTo(“08:59");

@Managed
WebDriver driver;
@Test
journeyPlanner.chooseOriginOf("Waterloo");
journeyPlanner.chooseDestinationOf("Canary Wharf");
journeyPlanner.chooseTimeOfDeparture("09:00");
.isEqualTo("08:59");
}
}
not bad!

not bad?
@Managed
WebDriver driver;
@Test
journeyPlanner.chooseOriginOf("Waterloo");
journeyPlanner.chooseDestinationOf("Canary Wharf");
journeyPlanner.chooseTimeOfDeparture("09:00");
.isEqualTo("08:59");
}
}

@DefaultUrl("https://tfl.gov.uk")
@FindBy(id = "InputTo")
@FindBy(partialLinkText = "change time")
@FindBy(css = "label[for=departing]")
private WebElementFacade leavingButton;
@FindBy(id = "Time")
private WebElement timeSelector;
@FindBy(css = "#plan-a-journey .plan-journey-button")
private WebElementFacade planMyJourneyButton;
@FindBy(className = "summary-results")
private WebElementFacade journeyResults;
}
public void chooseDestinationOf(String destinationValue) {
destination.sendKeys(destinationValue);
waitFor(visibilityOf(destinationSuggestions));
destinationSuggestions.sendKeys(Keys.ARROW_DOWN);
destinationSuggestions.sendKeys(Keys.ENTER);
}
public void chooseTimeOfDeparture(String timeOfDeparture) {
changeTimeLink.click();
leavingButton.click();
selectFromDropdown(timeSelector, timeOfDeparture);
}
public void confirmSelection() {
planMyJourneyButton.click();
waitFor(visibilityOf(journeyResults));
}
large classes

large classes
bloated methods
}
}
}
}

large classes
bloated methods
difficult to compose
}
}
}
}

Four Software Engineering Principles can help
you write more maintainable tests

1) Separation of Concerns
Hide complexity through layers of abstraction

2) Single Responsibility Principle
A class should have only one reason to change

3) Open-Closed Principle
Green diﬀs

4) Narrative coding style
Express your intent

Serenity BDD and
the Screenplay Pattern

#SerenityBDD @Wakaleo
“
serenity-bdd.info
Your test framework should not
model how your system behaves.
It should model how your user
behaves.

Goals
What are you trying to achieve?

Goals
Tasks
What do you need to do to
achieve this goal?

Goals
Tasks
What do you need to do to
achieve this goal?
Interactions
What interactions with the
system do you need for each
task?

Actor
Connor the
commuter

Plan my journey
Actor Goals
Connor the
commuter

Plan my journey
Actor Goals Tasks
Choose Destination
Choose Origin
Choose time of departure
Conﬁrm selection
Connor the
commuter

Plan my journey
Actor Goals Tasks Interactions
Press “Down”
Type “Waterloo”
Choose Destination
Choose Origin
Choose time of departure
Press “Enter”
Conﬁrm selection
Connor the
commuter

Say what you mean

 
Choose origin of Waterloo
Choose destination of Canary Wharf
Choose time of departure: 09:00
Confirm selection
See if the fastest train departs at 08:59

 
OpenApplication.onTheJourneyPlannerPage(),
ChooseOrigin.of("Waterloo"),
ChooseDestination.of("Canary Wharf"),
ChooseTimeOfDeparture.of("09:00"),
Confirm.journeyDetails(),
seeThat(TheFastest.departureTime(), is("08:59"))

Designing a task

ChooseOrigin.of("Waterloo")

public class ChooseOrigin implements Task {
}

@Override
public <T extends Actor> void performAs(T actor) {}
}

@Override
public <T extends Actor> void performAs(T actor) {
actor.attemptsTo(
); 
}
}

@Override
actor.attemptsTo(
Enter.theValue(station).into(JourneyPlanner.ORIGIN)
); 
}
}

@Override
actor.attemptsTo(
Enter.theValue(station).into(JourneyPlanner.ORIGIN),
WaitUntil.the(JourneyPlanner.ORIGIN_SUGGESTIONS, isVisible())
); 
}
}

@Override
actor.attemptsTo(
.forNoMoreThan(10).seconds(),
); 
}
}

@Override
actor.attemptsTo(
PickFirstSuggestion.from(JourneyPlanner.ORIGIN)
); 
}
private final String station;
}

@Override
actor.attemptsTo(
); 
}
public ChooseOrigin(String origin) { this.station = origin;}
}

@Override
actor.attemptsTo(
); 
}
public static Performable of(String station) {
return instrumented(ChooseOrigin.class, station);  
}
}

@Step("{0} selects origin station of #station")
@Override
actor.attemptsTo(
); 
}
}
}

@Override
actor.attemptsTo(
); 
}
}
}
How the step appears in the reports

@Override
actor.attemptsTo(
); 
}
}
}
The name of the actor

@Override
actor.attemptsTo(
); 
}
}
}
A member variable

Or…

public class ChooseDestination {
/**
* Usage: ChooseDestination.of("Canary Wharf")
*/
public static Task of(String station) {
return Task.where("{0} selects origin station of #station",
}
}

/**
*/
Enter.theValue(station).into(JourneyPlanner.DESTINATION),
}
}

/**
*/
WaitUntil.the(JourneyPlanner.DESTINATION_SUGGESTIONS, isVisible())
}
}

/**
*/
}
}

/**
*/
PickFirstSuggestion.from(JourneyPlanner.DESTINATION))
}
}

/**
*/
PickFirstSuggestion.from(JourneyPlanner.DESTINATION))
.with(“station").of(station);
}
}

Interactions talk to the system

Most WebDriver interactions come bundled with Serenity Screenplay
Enter.theValue(station).into(JourneyPlanner.ORIGIN)
Click.on(JourneyPlanner.PLAN_MY_JOURNEY)
SelectFromOptions.byVisibleText(timeOfDeparture)
.from(JourneyPlanner.SELECTED_DEPARTURE_TIME)
WaitUntil.the(JourneyResults.RESULTS_LIST, isVisible())
Scroll.to(JourneyResults.RESULTS_LIST)

Actors perform tasks

import net.serenitybdd.screenplay.Actor;
Actor connie = Actor.named("Connie");

import net.serenitybdd.screenplay.Actor;
connie.attemptsTo(
//…
);

connie.attemptsTo(
ChooseTimeOfDeparture.of(“09:00"),
Confirm.journeyDetails()

Actors have abilities  
that enable interactions
with the system

@Managed WebDriver browser;
connie.can(BrowseTheWeb.with(browser));

But where did the Page Objects go?

public class JourneyPlanner {
public static final Target ORIGIN = Target.the("Departure station")
.locatedBy("#InputFrom");
public static final Target ORIGIN_SUGGESTIONS = Target.the("Origin Suggestions")
.locatedBy("//*[input[@id='InputFrom']]/*[contains(@class, 'tt-dropdown-menu')]");
public static final Target DESTINATION = Target.the("Destination station")
.locatedBy("#InputTo");
public static final Target DESTINATION_SUGGESTIONS = Target.the("Destination Suggestions")
.locatedBy("//*[input[@id='InputTo']]/*[contains(@class, 'tt-dropdown-menu')]");
public static final Target CHANGE_TIME = Target.the("Change Time")
.located(By.partialLinkText("change time"));
public static final Target LEAVING_BUTTON = Target.the("Leaving")
.located(By.cssSelector("label[for=departing]"));
public static final Target SELECTED_DEPARTURE_TIME = Target.the("Departure Time")
.located(By.id("Time"));
public static final Target SELECTED_DEPARTURE_DROPDOWN = Target.the("Departure Time")
.located(By.cssSelector(".hours"));
public static final Target PLAN_MY_JOURNEY = Target.the("Plan my journey")
.locatedBy("#plan-a-journey .plan-journey-button");;
}

Target.the("Departure station").locatedBy("#InputFrom");

How should this element be named in the reports?

How should we locate it?

What about more complicated cases?

Target FILTER = Target.the(“filter")
.locatedBy("//*[@class='filters']//a[.='{0}']");
This value will be provided

theActor.attemptsTo(FilterItems.toShow(“Completed"));

public class FilterItems implements Task {
private final String filter;
public <T extends Actor> void performAs(T theActor) {
}
public static FilterItems toShow(String filter) {
return instrumented(FilterItems.class, status);
}
public FilterItems(TodoStatusFilter filter) { this.filter = filter; }
}

theActor.attemptsTo(
Click.on(TodoList.FILTER
);
}
}
}
Click on the filter button

Click.on(TodoList.FILTER.of(filter)
);
}
}
}
Pass in the name of the filter

.called(“filter by "+ filter))
);
}
}
How will this interaction appear in the reports?

@Step("{0} filters items by #filter")
.called(“filter by "+ filter))
);
}
}
How will this task appear in the reports

Actors ask questions
and verify the answers

connie.should(
seeThat(the(JourneyResults.HEADER), isVisible())
);

connie.should(
);
A Consequence

connie.should(
);
A Question

connie.should(
);
A Hamcrest Matcher

connie.should(
seeThat(textOf(JourneyResults.HEADER), is("Journey Results"))
);

connie.should(
seeThat(selectedValueOf(JourneyPlanner.SELECTED_DEPARTURE_TIME),
is("Journey Results"))
);

connie.should(
seeThat("the fastest tube line”, TheFastest.tubeLine(),
is("Jubilee line to Canary Wharf”))
);

connie.should(
seeThat("the fastest tube line", TheFastest.tubeLine(),
is("Jubilee line to Canary Wharf")),
seeThat("the departure time", TheFastest.departureTime(),
is("08:59")),
seeThat("the arrival time", TheFastest.arrivalTime(),
is(“09:09"))
);

public class TheFastest {
}

public static Question<String> tubeLine() {
}
}

return new FastestTubeLineQuestion();
}
}

}
}
public class FastestTubeLineQuestion implements Question<String> {
}

}
}
@Override
public String answeredBy(Actor actor) {
}
}

}
}
@Override
return Text.of(JourneyResults.ITINERARY)
}
}

}
}
@Override
.viewedBy(actor)
}
}

}
}
@Override
.viewedBy(actor)
.asString();
}
}

}
}
@Subject("the fastest tube line")
@Override
.viewedBy(actor)
.asString();
}
}

return actor -> Text.of(JourneyResults.ITINERARY)
}
}

.viewedBy(actor)
}
}

.viewedBy(actor)
.asString();
}
}

connie.should(
seeThat(“all the tube lines”, AllThe.tubeLines(),
contains("Northern line to Moorgate”))
);

public class AllThe {
}
}

}
}

.viewedBy(actor)
}
}

public static Question<List<String>> tubeLine() {
.viewedBy(actor)
.asList();
}
}

The end result

@Test
public void should_show_the_soonest_departure_time_close_to_the_requested_time() {
connie.attemptsTo(
ChooseTimeOfDeparture.of("09:00"),
Confirm.journeyDetails()
);
connie.should(
seeThat("the fastest tube line", TheFastest tubeLine(),
seeThat("the departure time", TheFastest.departureTime(), is("08:59")),
seeThat("the arrival time", TheFastest.arrivalTime(), is("09:09"))
);
}

But wait! There’s more!

@Test
public void should_show_the_soonest_departure_time_close_to_the_requested_time() {
connie.attemptsTo(
PlanAJourney.from("Waterloo").to("Canary Wharf").departingAt("09:00")
);
connie.should(
seeThat("the fastest tube line", TheFastest tubeLine(),
seeThat("the departure time", TheFastest.departureTime(), is("08:59")),
seeThat("the arrival time", TheFastest.arrivalTime(), is("09:09"))
);
}

Working with Cucumber

Feature: Plan a new journey
Scenario: Plan a new journey
Given that Connie is a London commuter
When she plans a journey from Waterloo to Canary Wharf departing at 09:00
Then she should see that the fastest train departs at 08:59

public class PlanAJourneyStepDefinitions {
@Before
public void set_the_stage() {
OnStage.setTheStage(new OnlineCast());
}

@Before
}
@Given("^that (.*) is a London commuter$")
public void a_london_commuter_named(String commuterName) throws Throwable {
theActorCalled(commuterName);
}

@Before
}
public void a_london_commuter_named(String commuterName) throws Throwable {
theActorCalled(commuterName);
}
@When("^(.*) plans a journey from (.*) to (.*) departing at (.*)$")
public void plan_a_journeys(String name, String departure, String destination,
String departureTime) throws Throwable {
theActorCalled(name).attemptsTo(
PlanAJourney.from(departure).to(destination).departingAt(departureTime)
);
}

@Before
}
public void a_london_commuter_named(String commuterName) throws Throwable {…}
@When("^(.*) plans a journey from (.*) to (.*) departing at (.*)$")
public void plan_a_journeys(String name, String departure, String destination,
String departureTime) throws Throwable {…}
@Then("^(.*) should see that the fastest train departs at (.*)$")
public void should_see_departure_time(String name,
String expectedDepartureTime) throws Throwable {
theActorCalled(name).should(
is(expectedDepartureTime))
);

Cucumber gives us flexibility

@Then("^(.*) should see a trip on the (.*) line departing at (.*)")
public void should_see_trip(String name, String line, String departureTime) {
theActorCalled(name).should(
seeThat("the fastest tube line”, TheFastest.tubeLine(),
is(line)),
is(departureTime))
);
}

Scenario: Coordinating journeys
And that Charles is a London commuter
When Connie plans a journey from Waterloo to Canary Wharf departing at 09:00
And Charles plans a journey from London Bridge to Moorgate departing at 10:00
Then Connie should see a trip on the Jubilee line to Canary Wharf line departing at 08:59
And Charles should see a trip on the Northern line to Moorgate line departing at 09:59

Obsess about reporting!

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

Questions to ask:
- How much time do I spend maintaining the tests?
- Am I modelling user’s interactions with the system,  
or how the system is built?
- Can I share elements of my testing framework with others?
- How much duplication and dead code is there in my tests?
- How long would it take me to find the issue if a test fails?
- How long to change the tests when the system changes?
- Can I use my tests to drive the design of the system?

Make your tests 
scalable by design

Prefer JavaScript?
Try
http://serenity-js.org

Jan Molak
Original slides and demonstration in JavaScript designed by
consultant, trainer, lead developer of Serenity/JS

Thank you!
Learn more at serenity-bdd.info 
 
Source code:
How we can help: 
Get in touch:
Learn Serenity BDD online
 
 
bit.ly/serentiy-planner
johnfergusonsmart.com 
reachme@johnfergusonsmart.com
http://serenity-dojo.com

Sustainable Test Automation with Serenity BDD and Screenplay

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

More from John Ferguson Smart Limited

More from John Ferguson Smart Limited (20)

Recently uploaded

Recently uploaded (20)

Sustainable Test Automation with Serenity BDD and Screenplay