An introduction to Acceptance Test Driven Development with a working example using Selenium and Chrome headless

1. (Browser)
Acceptance
Test Driven
Development

2. “
The customer specifies
scenarios to test when a
user story has been
correctly implemented
2

3. 1. Why?
2. What is ATDD?
3. Best practices
4. An example:
Selenium + Chrome
3

4. Why?
1

5. Collaboration
5

6. Acceptance criteria
6

7. Focus on the problem
7

8. Up to date documentation
8

9. Non regression
9

10. What is
ATDD?
2

11. The Test Pyramid
11
Acceptance
Integration
Unit

12. Test Driven Development
12
write a
failing unit
test

13. Test Driven Development
13
write a
failing unit
test
make it
pass

14. Test Driven Development
14
write a
failing unit
test
make it
pass
refactor

15. Acceptance Test Driven Development
15
write a failing
acceptance
test

16. Acceptance Test Driven Development
16
write a
failing unit
test
make it
pass
refactor
write a failing
acceptance
test

17. Acceptance Test Driven Development
17
write a
failing unit
test
make it
pass
refactor
write a failing
acceptance
test

18. Acceptance Test Driven Development
18
write a
failing
acceptance
test
make it
pass
discuss
user story
demo with
cusomer

19. Behaviour Driven Development
19
Feature: Eating too many cucumbers may not be good for you
Eating too much of anything may not be good for you.
Scenario: Eating a few is no problem
Given Alice is hungry
When she eats 3 cucumbers
Then she will be full

20. Best
practices
3

21. High quality code
21

22. Independent tests
22

23. Good class and method names
23

24. Stable elements ids and names
24

25. Never sleep
25

26. A real browser
26

27. Headless
27
Image by hacks.mozilla.org is licensed under CC BY-SA 3.0

28. Screenshot on error
28

29. Page Objects
29

30. An
example
4

31. Scenario
31
GIVEN the user landed on the home page
WHEN the user asks for a greeting
THEN the message "Hello, world" is shown
on the home page

32. 32

33. 33

34. index.html
Spring
Application
34
Greeting
Controller
.java
Greeting
AcceptanceIT
.java
Greeting
Page.java
greeting.js
REST

35. @RunWith(SpringRunner.class)
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)
public class GreetingAcceptanceIT {
private static WebDriver driver;
@LocalServerPort
private int port;
private URL baseUrl;
...
35
GreetingAcceptanceIT.java /1

36. ...
@BeforeClass
public static void initWebDriver() throws Exception {
WebDriverManager.chromedriver().setup();
ChromeOptions chromeOptions = new ChromeOptions();
chromeOptions.addArguments("--headless");
driver = new ChromeDriver(chromeOptions);
}
@AfterClass
public static void closeWebDriver() {
driver.quit();
}
@Before
public void setUp() throws Exception {
this.baseUrl = new URL("http://localhost:" + port + "/");
}
... 36
GreetingAcceptanceIT.java /2

37. ...
@Test
public void showGreetingTest() throws Exception {
GreetingPage page = new GreetingPage(driver, baseUrl);
page.load();
page.askGreeting();
assertThat(page.getGreetingMessage(), is("Hello, world"));
}
}
37
GreetingAcceptanceIT.java /3

38. public class GreetingPage {
private WebDriver driver;
private URL base;
public GreetingPage(WebDriver driver, URL base) {
this.driver = driver;
this.base = base;
}
...
38
GreetingPage.java /1

39. ...
public void load() throws Exception {
driver.get(base.toString());
}
public void askGreeting() throws Exception {
final WebElement greetingButton = driver.findElement(By.id("ask-greeting"));
greetingButton.click();
WebDriverWait wait = new WebDriverWait(driver, 5);
wait.until(ExpectedConditions.visibilityOfElementLocated(
By.id("greeting-content")));
}
public String getGreetingMessage() throws Exception {
return driver.findElement(By.id("greeting-content")).getText();
}
}
39
GreetingPage.java /2

40. $ mvn test -Dtest=GreetingAcceptanceIT
40

41. [ERROR] Tests run: 1, Failures: 0, Errors: 1, Skipped: 0, Time elapsed: 12.555 s
<<< FAILURE! - in hello.GreetingAcceptanceIT
[ERROR] showGreetingTest(hello.GreetingAcceptanceIT) Time elapsed: 0.636 s <<<
ERROR!
org.openqa.selenium.NoSuchElementException:
no such element: Unable to locate element:
{"method":"id","selector":"ask-greeting"}
41

42. @RestController
public class GreetingController {
@RequestMapping("/greeting")
public String index() {
return "{"message": "Hello, world"}";
}
}
42
GreetingController.java

43. <html>
<head>
<title>Hello ATDD</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/pure-min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="splash-container">
<div class="splash">
<h1 class="splash-head">HELLO ATDD</h1>
<p id="greeting-content" class="splash-subhead" hidden></p>
<p>
<button id="ask-greeting" type="button" class="pure-button">
Ask Greeting
</button>
</p>
</div>
</div>
<script type="application/javascript" src="js/greeting.js"></script>
</body>
</html> 43
index.html

44. const getGreeting = function () {
const url = `${window.location.origin}/greeting`;
const greetingContent = document.querySelector("#greeting-content");
fetch(url)
.then((res) => res.json())
.then((greeting) => greetingContent.innerHTML = greeting.message)
.catch((error) => greetingContent.innerHTML = error)
.then(() => greetingContent.hidden = false);
}
document.addEventListener("DOMContentLoaded", () => {
const askGreeting = document.querySelector("#ask-greeting");
askGreeting.addEventListener("click", getGreeting);
});
44
greeting.js

45. $ mvn test -Dtest=GreetingAcceptanceIT
45

46. [INFO] Tests run: 1, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 13.688 s -
in hello.GreetingAcceptanceIT
46

47. github.com/xpeppers/hello-atdd
47

48. Collaboration
48

49. Collaboration
Acceptance criteria
49

50. Collaboration
Acceptance criteria
Capture user intent
50

51. Collaboration
Acceptance criteria
Capture user intent
Repeatability
51

52. Thanks!
Filippo Liverani
@filippo
52