frontend testing of (legacy) websites
TRANSCRIPT
Frontedtes*ngof(legacy)websites
or our approach to e2e testing
3. November 2016
ScopeWhat? 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 ata central european Webhosting company
part-time SE student at Oxford University
What’s the problem?
Motivation
Our architecturea 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!!!
TheoryRationale
Not really
we need to agree on definitionsin order to reason about our choices
what are we trying to achieve?
V modelNeed,Want,
Law
UserRequirement
SystemRequirement
Architecture
Detaileddesign
Implementa*on
Opera*onalsystem
Acceptancetestexecu*on
Systemtestexecu*on
Integra*ontestexecu*on
Componenttestexecu*on
Test levelsNeed,Want,
Law
UserRequirement
SystemRequirement
Architecture
Detaileddesign
Implementa*on
Opera*onalsystem
Acceptancetestexecu*on
Systemtestexecu*on
Integra*ontestexecu*on
Componenttestexecu*on
Front-end testingNeed,Want,
Law
SystemRequirement
Architecture
Detaileddesign
Implementa*on
Opera*onalsystem
Systemtestexecu*on
Integra*ontestexecu*on
Componenttestexecu*on
UserRequirement
Acceptancetestexecu*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 packageas a potential customerI need to put Hosting package to cart
Scenario: Adding a specific The Hosting package to cartGiven…
Enough of theoryor 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 stateunder 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 stepswhere to go from here
Profit!
Fix wikipedia (acceptance testing annoyance)
Beer!
Thank youyou are awesome
webonic.hu
michaelkubovic.com
fb.me/michael.kubovic