Visual regression testing - move fast and try not to break things

My slides on automating visual regression testing, from Front End North 2016.

Transcript

1. Move fast and try not to break things Visual Regression Testing @furzeface bit.ly/df-vrt-slides
2. @furzeface bit.ly/df-vrt-slides Move fast and try not to break things Visual Regression Testing
3. @furzeface bit.ly/df-vrt-slides "Regression testing is a method of software testing that checks functionality that already exists against new changes that have been made to a codebase, to catch regressions." (Thanks, Wikipedia!) What?!
4. @furzeface bit.ly/df-vrt-slides Why?
5. @furzeface bit.ly/df-vrt-slides CSS is hard
6. @furzeface bit.ly/df-vrt-slides Testing is boring (sorry)
7. @furzeface bit.ly/df-vrt-slides When?
8. @furzeface bit.ly/df-vrt-slides Where? Test ALL the things???
9. @furzeface bit.ly/df-vrt-slides How? Sounds like hard work…
10. @furzeface bit.ly/df-vrt-slides How? Pick some software BackstopJS PhantomCSS OcularJS CSS Critic Galen
11. @furzeface bit.ly/df-vrt-slides How? Install npm install phantomjs casperjs -g npm install --save-dev backstopjs (requires Python)
12. @furzeface bit.ly/df-vrt-slides How? Generate a config npm explore backstopjs -- npm run genConfig
13. @furzeface bit.ly/df-vrt-slides How? Generate a config "scenarios": [ { "label": "Styleguide", "url": "http://localhost:3000/styleguide", "selectors": [ "body", ".site-header", ".article", ".site-footer" ] } ] backstop.json
14. @furzeface bit.ly/df-vrt-slides How? Generate reference screenshots npm explore backstopjs -- npm run reference
15. @furzeface bit.ly/df-vrt-slides How? Generate reference screenshots
16. @furzeface bit.ly/df-vrt-slides Break your CSS How?
17. @furzeface bit.ly/df-vrt-slides
18. @furzeface bit.ly/df-vrt-slides How? Test npm explore backstopjs -- npm run test
19. @furzeface bit.ly/df-vrt-slides
20. @furzeface bit.ly/df-vrt-slides
21. @furzeface bit.ly/df-vrt-slides
22. @furzeface bit.ly/df-vrt-slides How? Fix and re-test
23. @furzeface bit.ly/df-vrt-slides How? Bonus automation "scripts": { "bless": "npm explore backstopjs -- npm run bless", "openReport": "npm explore backstopjs -- npm run openReport", "reference": "npm explore backstopjs -- npm run reference", "test": "npm explore backstopjs -- npm run test" } package.json
24. @furzeface bit.ly/df-vrt-slides Who? Everyone! Front-end developer Back-end developer Designer QA engineer
25. @furzeface bit.ly/df-vrt-slides Summary Hurry up! Straightforward set up Peace of mind Works for many people Improve confidence
26. @furzeface bit.ly/df-vrt-slides Thanks! You rock.
27. @furzeface bit.ly/df-vrt-slides Blog post bit.ly/df-vrt GitHub demo bit.ly/df-vrt-demo Slides/Transcript bit.ly/df-vrt-slides Feedback bit.ly/df-vrt-feedback Further reading