Keeping your website looking consistent across all devices, browsers, and screen sizes is no easy task.
Add in CMS updates, module changes, and third-party integrations, and the potential for visual issues multiplies quickly. Fortunately, there’s a solution: visual regression testing.
Visual regression testing is like taking a before-and-after photo of a webpage. You compare screenshots of your site before and after changes—such as code updates or content edits—to catch unintended shifts in layout, styling, or design.
This type of testing is especially useful for large websites, where even minor layout changes can go unnoticed across hundreds (or thousands) of pages. Automated visual testing tools help you detect those changes quickly—before your users do.
How do you get started with visual regression testing?
The truth is, this is not something easily done by just anyone. You need some tools to make this happen, and some experience in code. The good news is you don’t have to start from scratch. That’s where BackstopJS comes in.
BackstopJS is a popular open-source tool that automates screenshot comparisons across multiple viewports and browsers.
It enables users to automate the process of crawling a website, taking screenshots of individual web pages, and “visually” comparing screenshots from two different time periods, highlighting areas on the screenshot where changes or shifts have occurred.
But using it requires writing complex configuration files—a barrier for many teams.
That’s where Backstop Generator, a free module for Drupal, comes in. It integrates BackstopJS directly into your Drupal admin UI—no coding required.
Backstop Generator is a free module available to everyone on Drupal.org. Its essential function is in how it integrates BackstopJS directly into your Drupal admin UI.
With Backstop Generator, you can manage test profiles, viewports, and page scenarios using Drupal’s familiar form interface instead of JSON files. It makes automated visual testing more accessible to Drupal developers and site managers alike.
Key Terms
- Viewport – The screen width where your site is tested (e.g., mobile, tablet, desktop).
- Scenario – A specific page or set of pages to be tested.
- Profile – A saved group of viewports, scenarios, and settings.
Features and Benefits
🔧 Auto-Generated Viewports
On install, Backstop Generator reads your default theme’s breakpoints and generates viewports automatically. You can also add custom ones or import from other themes.
📄 Scenario Builder
Quickly generate tests for:
- The homepage
- Menu-linked pages (with depth control)
- Random content nodes
- Custom paths (e.g., search or Views pages)
As a bonus, multi-language testing is supported out of the box!
💻 Easy Test Commands
No need to memorize complex CLI commands—Backstop Generator lists them for you. Just copy and paste them directly into your terminal.
After installing the module on your Drupal website, you can be up and running in minutes by going through the following steps.
- Install the Module – Available for free on Drupal.org.
- Set Up Viewports – Auto-detected from your theme or entered manually.
- Configure Domains – Define your Test and Reference environments.
- Create a Profile – Add pages and settings to include in your test.
- Generate Scenarios – Choose specific content types, paths, or menus to monitor.
- Run the Test – Copy the test command and run it in your terminal.
Each test run compares all configured combinations of language, viewport, and scenario—highlighting any visual differences.
Pro Tips for Large Sites
The Commands tab lists the terminal commands to run. Each run generates screenshots for every combination of viewport, language, and scenario—then compares the Test and Reference versions.
For large sites, this could mean hundreds of tests. To stay efficient:
- Group scenarios by content type or site section
- Separate webforms and Views into distinct profiles
- Run language-specific tests
- Spin up ad-hoc tests when launching new features
Our team at Electric Citizen helped finalize and release the first official version of Backstop Generator for Drupal 10 and 11.
As long-time Drupal contributors, we believe in supporting the community by giving back through open-source.
Backstop Generator brings efficient, automated layout testing into your daily Drupal workflow—saving you time while preserving your site’s integrity.
To get started, visit the Backstop Generator project page on Drupal.org and follow the module documentation.
Looking for expert help managing your Drupal site? Contact Electric Citizen to keep your website sharp, accessible, and running smoothly.
Join the Discussion +