automated visual regression testing
TRANSCRIPT
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