Welcome to Automated Visual regression testing Shweta Sharma

Welcome to Automated Visual regression testing Shweta Sharma axelerant. com 1

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 axelerant. com 2

Spot the difference axelerant. com 3

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 axelerant. com 4

Sample Output axelerant. com 5

Various Tools ● ● ● Wraith Phantom. CSS Gemini Shoov. IO Webdriver. CSS Backstop. JS axelerant. com 6

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

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 axelerant. com 8

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