WebCon is an affordable three-day conference for web designers, developers, social media marketers, content managers, and other web professionals within higher ed and beyond.

Visual Regression Testing with BackstopJS

Wednesday, April 3rd, 9:00 am – 12:00 pm

Please rate my talk on SpeakerRate!

Download slides: View on Google Drive

How do you tell if a change you made to your website has unintended side effects? Security updates should rarely result in anything changing visually, but how can you be sure?

Visual regression testing automates the comparison process by taking screenshots of two URLs and comparing them. You can view a report that highlights the differences and use the pass/fail result to make decisions.

In this workshop, we will use the BackstopJS visual regression tool locally, via Node JS, to automate visual QA. We will also learn how to scale and automate these tests across multiple sites and URLs.

Agenda:

  • Intro and setup
  • Visual Regression Testing
    • What is it?
    • Benefits / Limitations
  • BackstopJS
    • What is it?
    • Example demo
    • Hacking the example (pt1 and pt2)
    • Scaling example (pt1 and pt2)
    • Backstop-crawl
  • Continuous Integration
    • What is it?
    • Automating BackstopJS
  • Breakout Sessions

From the WebCon sessions page.