Visual Regression Testing with BackstopJS
summary
Workshop shows how to run BackstopJS via Node and headless Chrome to take reference screenshots and run comparisons with Backstop reference/test commands, using multiple viewports (phone/tablet), ready selectors or delays to avoid slideshow timing issues, and hide/remove selectors for embeds. It demos a standalone Node app and CI integration (CircleCI → Pantheon) that creates a multi‑dev, runs visual and behavior tests, and auto‑deploys on pass, noting dynamic content often needs fixture data or ignored selectors to avoid false failures.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 1:11Training Update
- 1:45Visual Regression Testing
- 5:40Benefits
- 7:30Limitations
- 8:37Features
- 10:59Configuration
- 13:07Demo
- 26:30Continuous Integration
- 28:21Automated Workflows
- 30:47Standalone Apps
- 31:31Visual Regression Demo
- 33:19Multisite Demo
- 34:27Continuous Integration Demo
- 36:29Where is it
- 43:49What is pain
related talks
21mVisual Regression Testing: From a Tool to a Process
53mWait, I have to test the front end too?
20mVisual testing with Visual Regression Tracker
21mLet's get visual - Visual testing in your Vue application
27mVisual UI Testing – Testing the Last Mile
12mAutomation of GUI testing using visual regression testing
27mWhat To Expect When You're Expecting: A guide to Regression Testing
30mTesting presentation components visually