Keep Your Website Pixel Perfect With Backstop Generator

Featured Image

abstract background image of pixel-like squares in shades of green and blue

Lead-in

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.

Sections

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: screen width where your site is tested (e.g., mobile, tablet, desktop).
Scenario: specific page or set of pages to be tested.
Profile: 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: