Chapter1- BackstopJS

Previous post Visual regression using BackstopJS
backstop init : Will create a directory structure for you to start running backstopJS. Now my config file backstop.json would look like this

AUT : https://demo.mahara.org/

Now go to the root directory(where backstop_data and json config files are present)                      

Now run > backstop reference                                                                                                           

OUTPUT

This will add reference/baseline images(in bitmaps_reference directory) of the components specified in the selectors section in config file.

Now run > backstop test 

This will run the config file again , take screenshots of the components again and compare with the images from directory backstop_reference. Once the test finishes an html report opens up showing the differences if any. In our case there are no anomalies.   

 Dealing with dynamic content