Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual Regression Testing

989 views

Published on

Conduct a visual regression test on a site using a component-based approach.

Published in: Technology
  • Be the first to comment

Visual Regression Testing

  1. 1. Visual Regression Testing Charlie Owen @sonniesedge
  2. 2. Visual Regression Testing Testing things because things getting messy makes me twitchy and people don’t like it when I get twitchy.
  3. 3. Robert K. Merton, American sociologist “The law of unintended consequences”
  4. 4. Web developer “Oh fuck, I broke the build”
  5. 5. <p>Hello!</p> p { font-size: 2em; }
  6. 6. Take initial screenshot
  7. 7. <p>Hello!</p> p { font-size: 4em; }
  8. 8. Take second screenshot
  9. 9.
  10. 10.
  11. 11. Image diffing Image 1
  12. 12. What a cheat
  13. 13. Image diffing Image 2
  14. 14. Image diffing Differences in red
  15. 15. .btn-lg { padding-right: 20px; }
  16. 16. compare image1.png image2.png -compose src diff.png$>
  17. 17. PhantomCSS Wraith Grunt-photobox Needle
  18. 18. SLIDE REMOVED DUE TO VIDEO SIZE
  19. 19. image of previous diff
  20. 20. Stephen Hay “We’re not designing pages, we’re designing systems of components.”
  21. 21. Component libraries
  22. 22. Charlie Owen @sonniesedge sonniesedge.co.uk

×