How to overcome Change Blindness in Testing

The advent of rich and responsive UI design has made testing of webapps and websites next to impossible without focusing on CSS and visual layout. We as humans are not natural in spotting visual differences due to change blindness.

Transcript

1. - Poornima Sarangapani QA, Thoughtworks How to overcome Change Blindness in Testing
2. • Unable to notice visual changes • Brain cannot possibly process every element of an experience • Fail to notice a major change - focused on another task • Selects certain things to focus - filters out anything that is unrelated What
3. • We concentrate on how does the feature work more compared to how does the feature looks. • One pixel difference can make a vast difference • Other elements will get affected Why is it important
4. Test Your Awareness : Whodunnit?
5. Figure the difference Figure the difference
6. Here Here
7. How
8. • Pretty terrible at spotting changes in visual stimuli • Very difficult to do for a bigger application • Focus shifts on non testable stuffs • Repetitive • Different responsive layout Manual Cons
9. • Wraith • Lineup • Applitool eyes • BackstopJS • BackTrac • csscritic • Diff.io • Dpxdt • Galen Framework • Gemini • Ghost Inspector • Hardy • haunterjs • PhantomCSS • Rockcss • SiteEffect • Screenster • Huxley • Kobold • Argus Eyes • mirror-mirror • Ocularjs • Percy.io • reg-cli • Spectre • VisualReview Tools available
10. Demo
11. • Visual regression tests are not a replacement for good development practices and a good CSS architecture. • capture screenshots for small modules or components - image comparison is faster • Integrate your visual tests with some continuous integration platform Good Practices
12. Thank You