Visual regression using BackstopJS

Visual testing is a form of regression test that ensures that screens that were correct have not changed unexpectedly.

Visual testing of an application is done by running an application, and saving screen snapshots at key points called checkpoints. These screenshots are then compared to previously stored baseline images, and any visually significant differences are reported.

Implementing visual testing typically involves four basic steps:

1) Write a test that exercises your Application UI by sending simulated mouse and keyboard events in order to enter various states, and capturing a screenshot in each of these states.
2) Compare the captured screenshots to previously captured baseline images.
3) Review the resulting differences and :
  a) Identify cases where differences were caused by a new feature that do not appear in the baseline image and "accepting" the new screenshot so that it will be used as the new baseline image for that checkpoint.
  b) Identify cases where differences indicate a bug that needs to be fixed, reporting the issue and "rejecting" the image - meaning that the baseline image is not updated and remains as it is.
4) Save the baseline updates, so that they are used for the next test run.

The very first time a test is run, there are no baseline images, so the screenshots that were captured are adopted as the baseline images. On subsequent runs, the flow is as described above.

BackstopJS automates visual regression testing of your responsive web UI by comparing DOM screenshots over time.

Getting started with Backstop:
 1) Installation
 2) Workflow:
    backstop init: Set up a new BackstopJS instance -- specify URLs, cookies, screen sizes, DOM      selectors, interactions etc. (see examples directory)
    backstop test: BackstopJS creates a set of test screenshots and compares them with your reference screenshots. Any changes show up in a visual report. (Run this after making CSS changes as many times as needed.)
    backstop approve: If the test you ran looks good, then go ahead and approve it. Approving changes will update your reference files with the results from your last test. Future tests are compared against your most recent approved test screenshots.
 3) config: As a new user setting up tests for your project, you will be primarily concerned with these properties...
id – Used for screenshot naming. Set this property when sharing reference files with teammates -- otherwise omit and BackstopJS will auto-generate one for you to avoid naming collisions with BackstopJS resources.
viewports – An array of screen size objects your DOM will be tested against. Add as many as you like -- but add at least one.
scenarios – This is where you set up your actual tests. The important sub properties are...
   scenarios[n].label – Required. Also used for screenshot naming.
   scenarios[n].url – Required. Tells BackstopJS what endpoint/document you want to test. This can   be an absolute URL or local to your current working directory.
 4) Capturing elements: The elements to be captured are specified in the selectors array. for instance:
      If you want BackstopJS to find and take screenshots of all matching selector instances then there is a handy switch for that. Set selectorExpansion to true

Next up >> Chapter1-BackstopJS


References
 1 2 3