Frontend testing of (legacy) websites

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