Welcome to Automated Visual regression testing Shweta Sharma

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

Spot the difference

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

Sample Output

Various Tools Wraith PhantomCSS Gemini ShoovIO WebdriverCSS BackstopJS

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

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

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