Bij test automation hebben we het vaak alleen over het testen van code of functionaliteit. Maar wat hebben we aan test automation als we alsnog uren bezig zijn om de UI op regressie te testen? Bestaande tools werken vaak op pagina niveau en geven daardoor veel false positives. Daarom hebben we zelf een node.js tool ontwikkeld die op compent basis werkt. Ik zal uitleggen hoe deze tool vroeg in het development proces kan helpen om visuele regressie te detecteren.

1. AUTOMATED VISUAL
REGRESSION
TESTING

2. AUTOMATED
VISUAL
REGRESSION
TESTING
Waarom is het nodig?

3. CONTINUOUS
DELIVERY
Continuous Bug Delivery

4. A LOT OF PAGES
So a lot of testing

5. FRONTEND
Component Based

6. BRAND IDENTITY
Can be fucked up with a single mistake

7. USERS
Are no robots

8. R I S I C O
 Vaak releasen
 Veel pagina’s
 Componenten zijn
een regressie risico
 Uitstraling is
belangrijk
 Gebruikers
interacteren via UI

9. USERS
Are no robots

10. ZOEKTOCHT
Welke tool is geschikt?

11. R E Q U I R E M E N T
S Vroeg in het proces
 Snel feedback
 Eenvoudig
beoordelen
 Integratie FE tools

12. T O O L S
 Applitools
 Galen
 Wraith
 WebdriverCSS
 Etc.

13. S A D
 Werken niet
 Duur
 Tijdrovend
 Traag
 Dwingen werkwijze af
 Laat in het proces

14. NIET GEVONDEN
Dan maar zelf maken

15. I D E E
 Open Source
 Node.js
 Integratie FE tools
 Component based
 Fail Fast

17. VRIJ IN GEBRUIK
Geen steeksleutel

18. SIMPLE API
CompareAdd

19. 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" ]
} ]

20. ADD
 Maakt screenshots via PhantomJS
 Componenten m.b.v. selectors

21. COMPARE
1. Vergelijk 2 mappen met screenshots
2. Gebruikt ImageMagick
3. Proces faalt bij verschil
4. Diff screenshots worden opgeslagen

22. HOE IN TE
ZETTEN?
Dat bepaal je zelf

23. GITFLOW
We love it

24. FEATURE BRANCH

25. FLAWLESS LIVE DEMO
That’d be great

26. IN DETAIL
Wat kan er allemaal?

27. COMPONENTEN

28. COMPONENTEN

29. TRESHOLD

30. IGNORE

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

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

33. CONFIG TEST

34. CONTIUOUS
INTEGRATION
Contiuous testing

35. E X T R A C H E C K
 Binnen branch
 Vorige succesvolle
build
 False positives zijn te
overrulen

36. BINNEN BRANCH

37. VOORBEELD

38. BELANGRIJK?
Alles is relatief

39. MASLOW VOOR WEB

40. WHAT DO YOU
THINK?
Any thoughts

41. ARGUSEYES.IO
Check our GitHub