The complexity of websites has increased over the last years. Especially technologies like AJaX or JavaScript allow complex behaviours of websites. Testing these features is a tedious and time consuming task. Additionally these features should in best case be tested after each new feature being deployed to the website. Doing this manually is not an option. By means of a case study it will be shown how several features of a TYPO3 website can automatically be tested with User Acceptance Tests (UAT) using "Cucumber". "Cucumber" uses every day language to describe tests, so these tests can directly be written by the project manager or even the client. This offers the possibility that these tests can be used to describe the required features of a project. It will also be shown how the described testing scenario can be integrated within a Continuous Delivery process.

2. Why Cucumber(s) make
your TYPO3 project
better
Søren Schaffstein,
CEO @ dkd Internet Service GmbH
Frankfurt Germany
r
fo s
ble rian
uita ta
s s ege
ki v
tal and
his ns
T a
v eg

15. About Cucumbers

17. Cucumber

30. Behaviour Driven
Development (BDD)

32. What is BDD?
Behaviour Driven Development (BDD)
Test Driven Development (TDD)

34. TDD vs. BDD
Test Driven Behaviour Driven

35. TDD vs. BDD
Test Driven Behaviour Driven
Technical perspective Business perspective

36. TDD vs. BDD
Test Driven Behaviour Driven
Technical perspective Business perspective
Verification focus Specification focus

37. TDD vs. BDD
Test Driven Behaviour Driven
Technical perspective Business perspective
Verification focus Specification focus
Unit tests Acceptance tests

38. TDD vs. BDD
Test Driven Behaviour Driven
Technical perspective Business perspective
Verification focus Specification focus
Unit tests Acceptance tests
“build the thing right” “build the right thing”

39. TDD vs. BDD
Test Driven Behaviour Driven
Technical perspective Business perspective
Verification focus Specification focus
Unit tests Acceptance tests
“build the thing right” “build the right thing”
Documentation

41. When should we test?
Before development starts

42. When should we test?
Before development starts
During development

43. When should we test?
Before development starts
During development
After development has finished

45. User Acceptance
Tests (UAT)

47. What is an UAT?
The client or user specifies a feature and its
behaviour

48. What is an UAT?
The client or user specifies a feature and its
behaviour
One or more tests are written to verify the
intended behaviour

49. What is an UAT?
The client or user specifies a feature and its
behaviour
One or more tests are written to verify the
intended behaviour
If all tests pass, then the client will accept the
feature as functional

51. Who should write the tests?

52. Who should write the tests?
Information
Architect

53. Who should write the tests?
Developer
Information
Architect

54. Who should write the tests?
Developer
Information
Architect
Tester

55. Who should write the tests?
Developer
Information
Architect
Project
Tester
Manager

56. Who should write the tests?
Developer
Information
Client Architect
Project
Tester
Manager

58. Why automated testing is great
It’s easy

59. Why automated testing is great
It’s easy
It’s fast

60. Why automated testing is great
It’s easy
It’s fast
It’s cheap

61. Why automated testing is great
It’s easy
It’s fast
It’s cheap
Complex scenarios can be tested regularly

62. Why automated testing is great
It’s easy
It’s fast
It’s cheap
Complex scenarios can be tested regularly
External components can be tested regularly

63. Why automated testing is great
It’s easy
It’s fast
It’s cheap
Complex scenarios can be tested regularly
External components can be tested regularly
It increases the overall quality and robustness

64. Why automated testing is great
It’s easy
It’s fast
It’s cheap
Complex scenarios can be tested regularly
External components can be tested regularly
It increases the overall quality and robustness
Gives a good feeling of control

66. dkd contact
Default contact form
Form validation
Addressed contact form

74. Form aftermath
Send a confirmation mail to the sender

75. Form aftermath
Send a confirmation mail to the sender
Create a record in the CRM system

76. Form aftermath
Send a confirmation mail to the sender
Create a record in the CRM system
Temporarily save form data to database

77. Form aftermath
Send a confirmation mail to the sender
Create a record in the CRM system
Temporarily save form data to database
For data protection reasons clear form database
entries after a week

79. Recurring tests
Does the website work without “www.”?

80. Recurring tests
Does the website work without “www.”?
Are .htaccess protections switched on/off?

81. Recurring tests
Does the website work without “www.”?
Are .htaccess protections switched on/off?
Does the website contain a legal notice page?

82. Recurring tests
Does the website work without “www.”?
Are .htaccess protections switched on/off?
Does the website contain a legal notice page?
Does the legal notice page contain a
VAT-number?

83. Recurring tests
Does the website work without “www.”?
Are .htaccess protections switched on/off?
Does the website contain a legal notice page?
Does the legal notice page contain a
VAT-number?
Does the search work?

84. Recurring tests
Does the website work without “www.”?
Are .htaccess protections switched on/off?
Does the website contain a legal notice page?
Does the legal notice page contain a
VAT-number?
Does the search work?
Is the standard-functionality of a certain TYPO3
extension provided?

86. Working with
Cucumber

88. First, let’s say what we want!

89. First, let’s say what we want!

90. First, let’s say what we want!
Given I am on the homepage

91. First, let’s say what we want!
Given I am on the homepage
When I click on the contact link

92. First, let’s say what we want!
Given I am on the homepage
When I click on the contact link
Then I should see the contact form

93. Smashing.
That was already nearly perfect Cucumber.

94. Smashing.
That was already nearly perfect Cucumber.
Ghe rkin

96. Cucumber test structure
Given I am on the homepage

97. Cucumber test structure
Given I am on the homepage
Define the initial situation

98. Cucumber test structure
Given I am on the homepage
When I click on the contact link
Define the initial situation
Do something

99. Cucumber test structure
Given I am on the homepage
When I click on the contact link
Then I should see the contact form
Define the initial situation
Do something
Examine the outcome

100. Scenario: Show default contact form
Given I am on the homepage
When I click on the contact link
Then I should see the contact form

101. A dash more Gherkin
Scenario: Show default contact form
Given I am on the homepage
When I click on the contact link
Then I should see the contact form

102. Scenario: Show default contact form
Given I am on the homepage
When I click on the contact link
Then I should see the contact form

103. Let’s write some tests for our
form
Scenario: Show default contact form
Given I am on the homepage
When I click on the contact link
Then I should see the contact form

104. Let’s write some tests for our
form
Scenario: Show default contact form
Given I am on the homepage
When I click on the contact link
And I wait for 2 seconds
Then I should see the contact form

105. Scenario: Submit the form
Given I am on the homepage
When I click on the contact link
And I wait for 2 seconds
And I submit the contact form
Then I should see "Thank you!"

106. Submit the form
Scenario: Submit the form
Given I am on the homepage
When I click on the contact link
And I wait for 2 seconds
And I submit the contact form
Then I should see "Thank you!"

107. Submit the form
Scenario: Submit the form
Given I am on the contact form
And I submit the contact form
Then I should see "Thank you!"

108. Scenario: Submit the form without any data
Given I am on the contact form
And I submit the contact form
Then I should see "enter a name"
And I should see "enter an email"
And I should see "enter a phone number"
And I should see "enter a message"

109. How about form validation?
Scenario: Submit the form without any data
Given I am on the contact form
And I submit the contact form
Then I should see "enter a name"
And I should see "enter an email"
And I should see "enter a phone number"
And I should see "enter a message"

110. Scenario: Submit the form with invalid data
Given I am on the contact form
When I fill in "email" with "test"
And I submit the contact form
Then I should see "enter an email"

111. Email validation
Scenario: Submit the form with invalid data
Given I am on the contact form
When I fill in "email" with "test"
And I submit the contact form
Then I should see "enter an email"

112. Email validation
Scenario: Submit the form with invalid data
Given I am on the contact form
When I fill in "email" with "test"
And I submit the contact form
Then I should see "enter an email"

113. Email validation
Scenario Outline: Submit the form with
typical invalid entries for email
Given I am on the contact form
When I fill in "email" with "<test>"
And I submit the contact form
Then I should see "enter an email"
Examples: List of invalid entries
| test |
| not_an_email |
| address@no_tld |
| no_at_symbol.tld |

115. A feature has multiple
Scenarios
Feature: Contact form

116. A feature has multiple
Scenarios
Feature: Contact form
As a website owner I want to have a contact
form so that website visitors can easily
contact us

117. A feature has multiple
Scenarios
Feature: Contact form
As a website owner I want to have a contact
form so that website visitors can easily
contact us
Scenario: Show default contact form
Given I am on the homepage
When I click on the contact link
Then I should see the contact form

118. A feature has multiple
Scenarios
Feature: Contact form
As a website owner I want to have a contact
form so that website visitors can easily
contact us
Scenario: Show default contact form
Given I am on the homepage
When I click on the contact link
Then I should see the contact form
Scenario: Submit the form
Given I am on the contact form
And I submit the contact form
Then I should see "Thank you!"

120. Testing pitfalls
Testing the “wrong” state
Then I should not see "fatal error"

121. Testing pitfalls
Testing the “wrong” state
Then I should not see "fatal error"
Testing for content on a page that might change
Then I should see "John Doe"

123. My client doesn’t speak
english :(

124. My client doesn’t speak
english :(
Gherkin is available in over 40 languages

125. My client doesn’t speak
english :(
Gherkin is available in over 40 languages
Scenario: Show default contact form
Given I am on the homepage
When I click on the contact link
Then I should see the contact form

126. My client doesn’t speak
english :(
Gherkin is available in over 40 languages
Scenario: Show default contact form
Given I am on the homepage
When I click on the contact link
Then I should see the contact form
Scenario: Visa standard kontaktformuläret
Givet jag är på hemsidan
När jag klickar på kontaktlänken
Så jag ska se kontaktformuläret

128. How does Cucumber work?

129. How does Cucumber work?
Write a Scenario in Gherkin

130. How does Cucumber work?
Write a Scenario in Gherkin
Cucumber reads each step

131. How does Cucumber work?
Write a Scenario in Gherkin
Cucumber reads each step
For each step you can execute Code:
Cucumber = Ruby / Behat = PHP ara
yb s
ap ck
C ro
or ting
f s
we bte

132. How does Cucumber work?
Write a Scenario in Gherkin
Cucumber reads each step
For each step you can execute Code:
Cucumber = Ruby / Behat = PHP ara
yb s
ap ck
C ro
or ting
f s
Cucumber reports about the
we bte
test results

134. What Output do I get?
Cucumber supports different Output formats

135. What Output do I get?
Cucumber supports different Output formats
Feature: Check if the default contact form opens when clicking on the link
Kontakt
Scenario: Show default contact form # features/testfeature.feature:3
Given I am on the homepage # features/steps/simple_steps.rb:1
When I click on the contact link # features/steps/simple_steps.rb:5
TODO (Cucumber::Pending)
./features/steps/simple_steps.rb:6:in `/^I click on the contact link$/'
features/testfeature.feature:5:in `When I click on the contact link'
Then I should see the contact form # features/steps/simple_steps.rb:9
1 scenario (1 pending)
3 steps (1 skipped, 1 pending, 1 passed)
0m14.604s

136. What Output do I get?
Cucumber supports different Output formats

138. How fast can I

139. How fast can I
Get Cucumber running in under
90 seconds

140. $ sudo gem install cucumber capybara --no-ri --no-rdoc
(::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::)
Thank you for installing cucumber-1.1.0.
Please be sure to read http://wiki.github.com/cucumber/cucumber/upgrading
for important information about this release. Happy cuking!
(::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::)
Successfully installed cucumber-1.1.0
Successfully installed capybara-1.1.1
2 gems installed
35s
55s

141. Install Cucumber
$ sudo gem install cucumber capybara --no-ri --no-rdoc
(::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::)
Thank you for installing cucumber-1.1.0.
Please be sure to read http://wiki.github.com/cucumber/cucumber/upgrading
for important information about this release. Happy cuking!
(::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::)
Successfully installed cucumber-1.1.0
Successfully installed capybara-1.1.1
2 gems installed
35s
55s

142. $ mkdir -p features/{support,steps}
50s
40s

143. Create directories
$ mkdir -p features/{support,steps}
50s
40s

144. $ cat > features/contact_form.feature
Feature: Check if the default contact form opens when clicking on the link
Kontakt
Scenario: Show default contact form
Given I am on the homepage
When I click on the contact link
Then I should see the contact form
<Press ctrl+d>
40s
50s

145. Create Feature file
$ cat > features/contact_form.feature
Feature: Check if the default contact form opens when clicking on the link
Kontakt
Scenario: Show default contact form
Given I am on the homepage
When I click on the contact link
Then I should see the contact form
<Press ctrl+d>
40s
50s

146. $ cat > features/steps/steps.rb
Given /^I am on the homepage$/ do
visit('http://www.dkd.de')
end
When /^I click on the contact link$/ do
click_link('Kontakt')
end
Then /^I should see the contact form$/ do
text = 'Call Back'
if page.respond_to? :should
page.should have_content(text)
else
assert page.has_content?(text)
end
end 30s
<Press ctrl+d>
60s

147. Create step definitions file
$ cat > features/steps/steps.rb
Given /^I am on the homepage$/ do
visit('http://www.dkd.de')
end
When /^I click on the contact link$/ do
click_link('Kontakt')
end
Then /^I should see the contact form$/ do
text = 'Call Back'
if page.respond_to? :should
page.should have_content(text)
else
assert page.has_content?(text)
end
end 30s
<Press ctrl+d>
60s

148. $ cat > features/support/env.rb
# Capybara configuration
require 'capybara'
require 'capybara/cucumber'
Capybara.default_driver = :selenium
Capybara.run_server = false
# set the host of the website you want to test
Capybara.app_host = 'http://www.dkd.de'
<Press ctrl+d>
20s
70s

149. Create settings file
$ cat > features/support/env.rb
# Capybara configuration
require 'capybara'
require 'capybara/cucumber'
Capybara.default_driver = :selenium
Capybara.run_server = false
# set the host of the website you want to test
Capybara.app_host = 'http://www.dkd.de'
<Press ctrl+d>
20s
70s

150. $ cucumber
Feature: Check if the default contact form opens when clicking on the link
Kontakt
Scenario: Show default contact form # features/contact_form.feature:3
Given I am on the homepage # features/steps/steps.rb:1
When I click on the contact link # features/steps/steps.rb:5
Then I should see the contact form # features/steps/steps.rb:9
1 scenario (1 passed)
3 steps (3 passed)
0m18.874s
1s
89s

151. Run Cucumber
$ cucumber
Feature: Check if the default contact form opens when clicking on the link
Kontakt
Scenario: Show default contact form # features/contact_form.feature:3
Given I am on the homepage # features/steps/steps.rb:1
When I click on the contact link # features/steps/steps.rb:5
Then I should see the contact form # features/steps/steps.rb:9
1 scenario (1 passed)
3 steps (3 passed)
0m18.874s
1s
89s

153. Aren’t there already helpful
tests?
Have a look at https://www.relishapp.com/

155. Using the right
tool for the job

157. Useful tools we use at dkd
Plaintext Editor

158. Useful tools we use at dkd
Plaintext Editor
TextMate with Cucumber Bundle

159. Useful tools we use at dkd
Plaintext Editor
TextMate with Cucumber Bundle
Redmine

160. Useful tools we use at dkd
Plaintext Editor
TextMate with Cucumber Bundle
Redmine
REACTApp

161. Useful tools we use at dkd
Plaintext Editor
TextMate with Cucumber Bundle
Redmine
REACTApp
Jenkins

163. Use REACTApp

166. Use Jenkins to

170. What to take
home

172. What to take home
Automate your testing

173. What to take home
Automate your testing
Give Cucumber a try

174. What to take home
Automate your testing
Give Cucumber a try
If you already do these two,
connect Cucumber to Jenkins

176. soeren.schaffstein@dkd.de

178. dkd
development
kommunikation
design
thank you!

179. Cocktail ingredients
| Quantity | Ingredient |
| 1 l | club soda |
| 250 ml | gin |
| 60 ml | lemon juice |
| 12 slices | lemon |
| 12 slices | cucumber |
| 12 slices | sprigs fresh mint |
Scenario: Refreshing Cucumber Cocktail
Given I have the ingredients
When I combine the club soda, gin and lemon juice
And I place a lemon slice and a cucumber slice in each of 12 glasses
And I add 1 cup crushed ice to each glass
And I pour the gin mixture into the glasses and garnish each with a mint sprig
Then I should get 12 refreshing cocktails

181. References

183. References
Cucumber:
http://rubygems.org/gems/cucumber

184. References
Cucumber:
http://rubygems.org/gems/cucumber
Capybara:
https://github.com/jnicklas/capybara

185. References
Cucumber:
http://rubygems.org/gems/cucumber
Capybara:
https://github.com/jnicklas/capybara
REACT:
http://reactapp.com/

186. References
Cucumber:
http://rubygems.org/gems/cucumber
Capybara:
https://github.com/jnicklas/capybara
REACT:
http://reactapp.com/
Jenkins:
http://jenkins-ci.org/

188. Image Reference 1
Cucumbers: Stephen Ausmus
http://www.ars.usda.gov/is/graphics/photos/mar07/d730-30.htm

189. Image Reference 1
Cucumbers: Stephen Ausmus
http://www.ars.usda.gov/is/graphics/photos/mar07/d730-30.htm
Cucumber Sandwich: BitBoy
http://flickr.com/photos/44124323641@N01/204619671

190. Image Reference 1
Cucumbers: Stephen Ausmus
http://www.ars.usda.gov/is/graphics/photos/mar07/d730-30.htm
Cucumber Sandwich: BitBoy
http://flickr.com/photos/44124323641@N01/204619671
Cucumber Castle: Bee Gees Album Cover

191. Image Reference 1
Cucumbers: Stephen Ausmus
http://www.ars.usda.gov/is/graphics/photos/mar07/d730-30.htm
Cucumber Sandwich: BitBoy
http://flickr.com/photos/44124323641@N01/204619671
Cucumber Castle: Bee Gees Album Cover
Cucumber Beetle: Scott Bauer
http://www.ars.usda.gov/is/graphics/photos/index.html

192. Image Reference 1
Cucumbers: Stephen Ausmus
http://www.ars.usda.gov/is/graphics/photos/mar07/d730-30.htm
Cucumber Sandwich: BitBoy
http://flickr.com/photos/44124323641@N01/204619671
Cucumber Castle: Bee Gees Album Cover
Cucumber Beetle: Scott Bauer
http://www.ars.usda.gov/is/graphics/photos/index.html
Cucumber Cocktail: Andrew Mccaul
http://www.foodnetwork.com/recipes/sandra-lee/lemon-cucumber-
cocktail-recipe2/index.html

194. Image Reference 2
Worker Woman
http://www.istockphoto.com/stock-photo-14311527-constructor-woman-
with-level-isolated-on-white.php

195. Image Reference 2
Worker Woman
http://www.istockphoto.com/stock-photo-14311527-constructor-woman-
with-level-isolated-on-white.php
Worker Man
http://www.istockphoto.com/stock-photo-15392840-construction-
contractor-carpenter-on-white.php

196. Image Reference 2
Worker Woman
http://www.istockphoto.com/stock-photo-14311527-constructor-woman-
with-level-isolated-on-white.php
Worker Man
http://www.istockphoto.com/stock-photo-15392840-construction-
contractor-carpenter-on-white.php
Concert
http://www.istockphoto.com/stock-photo-15502100-concert-
performance.php

197. Image Reference 2
Worker Woman
http://www.istockphoto.com/stock-photo-14311527-constructor-woman-
with-level-isolated-on-white.php
Worker Man
http://www.istockphoto.com/stock-photo-15392840-construction-
contractor-carpenter-on-white.php
Concert
http://www.istockphoto.com/stock-photo-15502100-concert-
performance.php
Questions
http://www.istockphoto.com/stock-photo-17686236-decision-making.php

199. Image Reference 3
Boring
http://www.istockphoto.com/stock-photo-9660261-depressed-business-
man.php

200. Image Reference 3
Boring
http://www.istockphoto.com/stock-photo-9660261-depressed-business-
man.php
Various Cucumbers
http://www.istockphoto.com/stock-photo-11184335-hanging-by-a-
string.php
http://www.istockphoto.com/stock-photo-2203742-cucumber-on-
white.php
http://www.istockphoto.com/stock-photo-11586913-sliced-cucumber-in-
stack.php
http://www.istockphoto.com/stock-photo-12083382-pickle-jar.php