SlideShare a Scribd company logo
AUTOMATED VISUAL
REGRESSION
TESTING
AUTOMATED
VISUAL
REGRESSION
TESTING
Waarom is het nodig?
CONTINUOUS
DELIVERY
Continuous Bug Delivery
A LOT OF PAGES
So a lot of testing
FRONTEND
Component Based
BRAND IDENTITY
Can be fucked up with a single mistake
USERS
Are no robots
R I S I C O
 Vaak releasen
 Veel pagina’s
 Componenten zijn
een regressie risico
 Uitstraling is
belangrijk
 Gebruikers
interacteren via UI
USERS
Are no robots
ZOEKTOCHT
Welke tool is geschikt?
R E Q U I R E M E N T
S Vroeg in het proces
 Snel feedback
 Eenvoudig
beoordelen
 Integratie FE tools
T O O L S
 Applitools
 Galen
 Wraith
 WebdriverCSS
 Etc.
S A D
 Werken niet
 Duur
 Tijdrovend
 Traag
 Dwingen werkwijze af
 Laat in het proces
NIET GEVONDEN
Dan maar zelf maken
I D E E
 Open Source
 Node.js
 Integratie FE tools
 Component based
 Fail Fast
VRIJ IN GEBRUIK
Geen steeksleutel
SIMPLE API
CompareAdd
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" ]
} ]
ADD
 Maakt screenshots via PhantomJS
 Componenten m.b.v. selectors
COMPARE
1. Vergelijk 2 mappen met screenshots
2. Gebruikt ImageMagick
3. Proces faalt bij verschil
4. Diff screenshots worden opgeslagen
HOE IN TE
ZETTEN?
Dat bepaal je zelf
GITFLOW
We love it
FEATURE BRANCH
FLAWLESS LIVE DEMO
That’d be great
IN DETAIL
Wat kan er allemaal?
COMPONENTEN
COMPONENTEN
TRESHOLD
IGNORE
FINISHED WHEN
"finished-when":
"return document.body.hasAttribute('data-conditioner-initialized');"
FINISHED WHEN
"finished-when":
"return document.body.hasAttribute('data-conditioner-initialized');"
CONFIG TEST
CONTIUOUS
INTEGRATION
Contiuous testing
E X T R A C H E C K
 Binnen branch
 Vorige succesvolle
build
 False positives zijn te
overrulen
BINNEN BRANCH
VOORBEELD
BELANGRIJK?
Alles is relatief
MASLOW VOOR WEB
WHAT DO YOU
THINK?
Any thoughts
ARGUSEYES.IO
Check our GitHub

More Related Content

Viewers also liked

Technology Solutions Capabilities
Technology Solutions CapabilitiesTechnology Solutions Capabilities
Technology Solutions Capabilities
Christie Penzol
 
SMART Norfolk Introduction, Context & Welcome
SMART Norfolk Introduction, Context & WelcomeSMART Norfolk Introduction, Context & Welcome
SMART Norfolk Introduction, Context & Welcome
NorfolkRCC
 
Mandalagestiongerencia
MandalagestiongerenciaMandalagestiongerencia
Mandalagestiongerencia
cesarjmm1
 
SessionTwo_MakingFunctionCalls
SessionTwo_MakingFunctionCallsSessionTwo_MakingFunctionCalls
SessionTwo_MakingFunctionCalls
Hellen Gakuruh
 
How to accelerate UAT & Regression Testing
How to accelerate UAT & Regression TestingHow to accelerate UAT & Regression Testing
How to accelerate UAT & Regression Testing
Sensiple Inc.,
 
Standard Regression Testing Does Not Work
Standard Regression Testing Does Not WorkStandard Regression Testing Does Not Work
Standard Regression Testing Does Not Work
Daniel Hansson
 
Visual regression testing
Visual regression testingVisual regression testing
Visual regression testing
Liam McMurray
 
Progression from Regression Testing - An 8-year Journey
Progression from Regression Testing - An 8-year JourneyProgression from Regression Testing - An 8-year Journey
Progression from Regression Testing - An 8-year Journey
Ian Pestelos #MovetheAverageUp
 
Internet Of Things: The Next Wave Of Innovation
Internet Of Things: The Next Wave Of InnovationInternet Of Things: The Next Wave Of Innovation
Internet Of Things: The Next Wave Of Innovation
Emorphis Technologies
 
Descentralización y oportunidades
Descentralización y oportunidadesDescentralización y oportunidades
Descentralización y oportunidades
KAtiRojChu
 
Proyecto participativo
Proyecto participativoProyecto participativo
Proyecto participativo
KAtiRojChu
 
Visual Regression Testing
Visual Regression TestingVisual Regression Testing
Visual Regression Testing
VodqaBLR
 

Viewers also liked (12)

Technology Solutions Capabilities
Technology Solutions CapabilitiesTechnology Solutions Capabilities
Technology Solutions Capabilities
 
SMART Norfolk Introduction, Context & Welcome
SMART Norfolk Introduction, Context & WelcomeSMART Norfolk Introduction, Context & Welcome
SMART Norfolk Introduction, Context & Welcome
 
Mandalagestiongerencia
MandalagestiongerenciaMandalagestiongerencia
Mandalagestiongerencia
 
SessionTwo_MakingFunctionCalls
SessionTwo_MakingFunctionCallsSessionTwo_MakingFunctionCalls
SessionTwo_MakingFunctionCalls
 
How to accelerate UAT & Regression Testing
How to accelerate UAT & Regression TestingHow to accelerate UAT & Regression Testing
How to accelerate UAT & Regression Testing
 
Standard Regression Testing Does Not Work
Standard Regression Testing Does Not WorkStandard Regression Testing Does Not Work
Standard Regression Testing Does Not Work
 
Visual regression testing
Visual regression testingVisual regression testing
Visual regression testing
 
Progression from Regression Testing - An 8-year Journey
Progression from Regression Testing - An 8-year JourneyProgression from Regression Testing - An 8-year Journey
Progression from Regression Testing - An 8-year Journey
 
Internet Of Things: The Next Wave Of Innovation
Internet Of Things: The Next Wave Of InnovationInternet Of Things: The Next Wave Of Innovation
Internet Of Things: The Next Wave Of Innovation
 
Descentralización y oportunidades
Descentralización y oportunidadesDescentralización y oportunidades
Descentralización y oportunidades
 
Proyecto participativo
Proyecto participativoProyecto participativo
Proyecto participativo
 
Visual Regression Testing
Visual Regression TestingVisual Regression Testing
Visual Regression Testing
 

Automated Visual Regression Testing

Editor's Notes

  1. Verwijs naar jeroen> element op verkeerde plaats = onduidelijk
  2. Kan je natuurlijk (deels) genereren
  3. Behoefte piramide, pas omhoog als onderliggende vervuld is