38
Fronted tes*ng of (legacy) websites or our approach to e2e testing 3. November 2016

Frontend testing of (legacy) websites

Embed Size (px)

Citation preview

Page 1: Frontend testing of (legacy) websites

Frontedtes*ngof(legacy)websites

or our approach to e2e testing

3. November 2016

Page 2: Frontend testing of (legacy) websites

ScopeWhat? Who? Why?

Page 3: Frontend testing of (legacy) websites

What it is about

Page 4: Frontend testing of (legacy) websites

Our setup- Gherkin, Selenium (php legacy websites)

1

Page 5: Frontend testing of (legacy) websites

concepts behind our setup

2

Page 6: Frontend testing of (legacy) websites

getting there effortlessly

3

Page 7: Frontend testing of (legacy) websites

how do we approach the problem

Page 8: Frontend testing of (legacy) websites

About me

Software Engineer ata central european Webhosting company

part-time SE student at Oxford University

Page 9: Frontend testing of (legacy) websites

What’s the problem?

Motivation

Page 10: Frontend testing of (legacy) websites

Our architecturea lot of legacy

new features being added constantly

Page 11: Frontend testing of (legacy) websites

Typical scenario

vague feature requests

not sure about how some feature works

does it even work?

you broke my feature!!!

Page 12: Frontend testing of (legacy) websites

TheoryRationale

Page 13: Frontend testing of (legacy) websites
Page 14: Frontend testing of (legacy) websites

Not really

we need to agree on definitionsin order to reason about our choices

what are we trying to achieve?

Page 15: Frontend testing of (legacy) websites

V modelNeed,Want,

Law

UserRequirement

SystemRequirement

Architecture

Detaileddesign

Implementa*on

Opera*onalsystem

Acceptancetestexecu*on

Systemtestexecu*on

Integra*ontestexecu*on

Componenttestexecu*on

Page 16: Frontend testing of (legacy) websites

Test levelsNeed,Want,

Law

UserRequirement

SystemRequirement

Architecture

Detaileddesign

Implementa*on

Opera*onalsystem

Acceptancetestexecu*on

Systemtestexecu*on

Integra*ontestexecu*on

Componenttestexecu*on

Page 17: Frontend testing of (legacy) websites

Front-end testingNeed,Want,

Law

SystemRequirement

Architecture

Detaileddesign

Implementa*on

Opera*onalsystem

Systemtestexecu*on

Integra*ontestexecu*on

Componenttestexecu*on

UserRequirement

Acceptancetestexecu*on

Page 18: Frontend testing of (legacy) websites

Test level

acceptance black box testing (e2e)

Page 19: Frontend testing of (legacy) websites

objectives?

test types

focus on functional testing

acceptance vs regression

Page 20: Frontend testing of (legacy) websites

Gherking, Framework & BDD

huh?

Page 21: Frontend testing of (legacy) websites

“Acceptance testing doesn't actually handle conversations, and usually works from an assumption that the tests you're writing are the right tests”

Page 22: Frontend testing of (legacy) websites

BDD gives us conventions

the tool (Behat/Cucumber)is to help with acceptance aspects

not the functional aspects

in “theory” allows customer interaction

Page 23: Frontend testing of (legacy) websites

BDD mantra

For who? What? How?

Page 24: Frontend testing of (legacy) websites

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…

Page 25: Frontend testing of (legacy) websites

Enough of theoryor 0 to 100 real quick

Page 26: Frontend testing of (legacy) websites

Choose testing framework in the language of your website

1

Page 27: Frontend testing of (legacy) websites

Setup your testing website in env you can control

(any docker fans?)

2

Page 28: Frontend testing of (legacy) websites

Use real browsers with javascript (if UI requires it)

3

Page 29: Frontend testing of (legacy) websites

Don’t reinvent the wheel!

4

Page 30: Frontend testing of (legacy) websites

Selenium in seconds

docker FTW

https://github.com/SeleniumHQ/docker-selenium

we use https://github.com/elgalu/docker-selenium

Page 31: Frontend testing of (legacy) websites

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

Page 32: Frontend testing of (legacy) websites

Caveats

controlling the state

how to jump straight to “Given” state?

Page 33: Frontend testing of (legacy) websites

Given I have following products in cart:

– The Hosting– .hu domain– .eu domain

Page 34: Frontend testing of (legacy) websites

Put that stateunder control

Use framework in your language so you can infiltrate “behind the scenes”

Page 35: Frontend testing of (legacy) websites

Session

Fixed session name

Instantiate app in background

Manipulate your known session

Page 36: Frontend testing of (legacy) websites

Next stepswhere to go from here

Page 37: Frontend testing of (legacy) websites

Profit!

Fix wikipedia (acceptance testing annoyance)

Beer!

Page 38: Frontend testing of (legacy) websites

Thank youyou are awesome

webonic.hu

michaelkubovic.com

fb.me/michael.kubovic