1. Welcome to Automated Visual regression testing
Shweta Sharma

2. Why is it needed? Difficult to spot
Hard to spot pixel differences with naked eye
Difficult to identify missing element(s) on a page
Time consuming
Can occupy a large amount of time for the QA team
Support for various browsers
Support for responsive tests
Support for mobile and tablets
Repetitive task
Ideal candidate for automation

3. Spot the difference

4. What is it and How does it work?
Capture Screenshots
Built-in capture software
Install it as a dependency
Create baseline shots directory
To compare against
Should be good enough to be compared to
Compare two pages
Screenshot comparison
Provide readable output
Highlights the differences in specific color
Outcome as Pass or Fail

5. Sample Output

6. Various Tools
Wraith
PhantomCSS
Gemini
ShoovIO
WebdriverCSS
BackstopJS

7. Quick testing with Wraith
Installation
Supports OSX, Ubuntu and Windows
Setup comes with ready-to-use configuration files
Get started with Automated Visual regression testing immediately
Testing Modes
Capture
History
Spider
Gallery and Output
Generates a diff.png and a data.txt
Generates gallery.html
Hook “before_capture”
Supported in Casper mode
Allows to test interactive content

8. Demo using Wraith tool Create config files for all the modes supported
CAPTURE
How to compare to different environments (Eg. Test and production)
HISTORY
How to compare same instance over time
SPIDER
List down all the paths of a website and create ready-to-import file
Run the test files using all modes
Interpret the Output

9. Challenges Test interactive content Continuous Integration
Various browser Support
Who should use it?