Fronted	tes*ng	of	
(legacy)	websites
or our approach to e2e testing
3. November 2016
Scope
What? Who? Why?
What it is about
Our setup
- Gherkin, Selenium (php
legacy websites)
1
concepts behind our setup
2
getting there effortlessly
3
how do we approach the
problem
About me
Software Engineer at
a central european Webhosting company
part-time SE student at Oxford University
What’s the
problem?
Motivation
Our architecture
a lot of legacy
new features being added constantly
Typical scenario
vague feature requests
not sure about how some feature works
does it even work?
you broke my feature!!!
Theory
Rationale
Not really
we need to agree on definitions
in order to reason about our choices
what are we trying to achieve?
V model
Need,	Want,	
Law
User	
Requirement
System	
Requirement
Architecture
Detailed	design
Implementa*on
Opera*onal	
system
Acceptance	test	
execu*on
System	test	
execu*on
Integra*on	test	
execu*on
Component	
test	execu*on
Test levels
Need,	Want,	
Law
User	
Requirement
System	
Requirement
Architecture
Detailed	design
Implementa*on
Opera*onal	
system
Acceptance	test	
execu*on
System	test	
execu*on
Integra*on	test	
execu*on
Component	
test	execu*on
Front-end testing
Need,	Want,	
Law
System	
Requirement
Architecture
Detailed	design
Implementa*on
Opera*onal	
system
System	test	
execu*on
Integra*on	test	
execu*on
Component	
test	execu*on
User	
Requirement
Acceptance	test	
execu*on
Test level
acceptance black box testing (e2e)
objectives?
test types
focus on functional testing
acceptance vs regression
Gherking,
Framework & BDD
huh?
“Acceptance testing doesn't
actually handle
conversations, and usually
works from an assumption
that the tests you're
writing are the right tests”
BDD gives us
conventions
the tool (Behat/Cucumber)
is to help with acceptance aspects
not the functional aspects
in “theory” allows customer interaction
BDD mantra
For who? What? How?
In order to buy a hosting
package
as a potential customer
I need to put Hosting package
to cart
Scenario: Adding a specific
The Hosting package to cart
Given…
Enough of theory
or 0 to 100 real quick
Choose testing framework
in the language of your
website
1
Setup your testing website
in env you can control
(any docker fans?)
2
Use real browsers with
javascript (if UI requires it)
3
Don’t reinvent the wheel!
4
Selenium in
seconds
docker FTW
https://github.com/SeleniumHQ/docker-selenium
we use https://github.com/elgalu/docker-selenium
Setup testing
framework
Behat / Cucumber / whatever language you use
Reuse as much DSL as you can
“I am on”, “I press button xxx”, etc..
Write your first useful feature
Caveats
controlling the state
how to jump straight to “Given” state?
Given I have following
products in cart:
– The Hosting
– .hu domain
– .eu domain
Put that state
under control
Use framework in your language so you can infiltrate
“behind the scenes”
Session
Fixed session name
Instantiate app in background
Manipulate your known session
Next steps
where to go from here
Profit!
Fix wikipedia (acceptance testing annoyance)
Beer!
Thank you
you are awesome
webonic.hu
michaelkubovic.com
fb.me/michael.kubovic

Frontend testing of (legacy) websites