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.

1. - Poornima Sarangapani
QA, Thoughtworks
How to overcome Change
Blindness in Testing
ThoughtWorks, http://twchennai.github.io/VODQA-Chennai/

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
ThoughtWorks, http://twchennai.github.io/VODQA-Chennai/

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
ThoughtWorks, http://twchennai.github.io/VODQA-Chennai/

4. Test Your Awareness : Whodunnit?
ThoughtWorks, http://twchennai.github.io/VODQA-Chennai/

5. Figure the differenceFigure the difference
ThoughtWorks, http://twchennai.github.io/VODQA-Chennai/

6. HereHere
ThoughtWorks, http://twchennai.github.io/VODQA-Chennai/

7. How
ThoughtWorks, http://twchennai.github.io/VODQA-Chennai/

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
ThoughtWorks, http://twchennai.github.io/VODQA-Chennai/

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
ThoughtWorks, http://twchennai.github.io/VODQA-Chennai/

10. Demo
ThoughtWorks, http://twchennai.github.io/VODQA-Chennai/

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
ThoughtWorks, http://twchennai.github.io/VODQA-Chennai/

12. Thank You
ThoughtWorks, http://twchennai.github.io/VODQA-Chennai/