41
AUTOMATED VISUAL REGRESSION TESTING

Automated Visual Regression Testing

Embed Size (px)

Citation preview

Bureau presentatie

AUTOMATED VISUAL REGRESSIONTESTING

1

AUTOMATED VISUAL REGRESSION TESTINGWaarom is het nodig?

CONTINUOUS DELIVERYContinuous Bug Delivery

3

A LOT OF PAGESSo a lot of testing

4

FRONTENDComponent Based

5

BRAND IDENTITYCan be fucked up with a single mistake

6

USERSAre no robots

Verwijs naar jeroen> element op verkeerde plaats = onduidelijk7

RISICOVaak releasen Veel paginasComponenten zijn een regressie risicoUitstraling is belangrijkGebruikers interacteren via UI

8

USERSAre no robots

9

ZOEKTOCHTWelke tool is geschikt?

REQUIREMENTSVroeg in het procesSnel feedbackEenvoudig beoordelenIntegratie FE tools

11

TOOLSApplitoolsGalenWraithWebdriverCSSEtc.

12

SADWerken nietDuurTijdrovendTraagDwingen werkwijze afLaat in het proces

13

NIET GEVONDENDan maar zelf maken

IDEEOpen SourceNode.jsIntegratie FE toolsComponent basedFail Fast

15

16

VRIJ IN GEBRUIKGeen steeksleutel

17

SIMPLE API

CompareAdd

18

CONFIGURATIE{ "sizes": ["320x480", "1280x768"], "pages": [ { "name": "homepage", "url": "http://localhost:3000/", "components": [ "navigation", "news-items" ] } "components": [ {"name": "news-items", "selector": ".news-items", "ignore": [ ".last-updated" ] } ]

Kan je natuurlijk (deels) genereren19

ADDMaakt screenshots via PhantomJS Componenten m.b.v. selectors

20

COMPAREVergelijk 2 mappen met screenshotsGebruikt ImageMagickProces faalt bij verschilDiff screenshots worden opgeslagen

21

HOE IN TE ZETTEN?Dat bepaal je zelf

GITFLOWWe love it

23

FEATURE BRANCH

24

FLAWLESS LIVE DEMOThatd be great

25

IN DETAILWat kan er allemaal?

COMPONENTEN

27

COMPONENTEN

28

TRESHOLD

29

IGNORE

30

FINISHED WHEN

"finished-when": "return document.body.hasAttribute('data-conditioner-initialized');"

31

FINISHED WHEN

"finished-when": "return document.body.hasAttribute('data-conditioner-initialized');"

32

CONFIG TEST

33

CONTIUOUS INTEGRATIONContiuous testing

EXTRA CHECKBinnen branchVorige succesvolle buildFalse positives zijn te overrulen

35

BINNEN BRANCH

36

VOORBEELD

37

BELANGRIJK?Alles is relatief

MASLOW VOOR WEB

Behoefte piramide, pas omhoog als onderliggende vervuld is39

WHAT DO YOU THINK?

Any thoughts

40

ARGUSEYES.IO

Check our GitHub

41