drupal-visual-regression

Captures visual baselines and compares Drupal UI updates using Playwright and BackstopJS workflows.

1|Updated Mar 22, 2026
One-click install
npx skills add https://github.com/AJV009/drupal-devkit --skill drupal-visual-regression
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: drupal-visual-regression
Source: https://github.com/AJV009/drupal-devkit/tree/main/plugins/drupal-core/skills/drupal-visual-regression
Command: npx skills add https://github.com/AJV009/drupal-devkit --skill drupal-visual-regression

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Drupal UI changes can regress visually; this skill captures baselines, compares against updates, and surfaces diffs to catch unintended changes.

Core Features & Use Cases

  • Baseline capture using Playwright for deterministic references
  • Multi-viewport testing to align with theme breakpoints
  • Masking dynamic content (dates, status messages) to reduce false positives
  • BackstopJS/Playwright workflows for CI integration
  • Per-section and component-level screenshots to localize diffs

Quick Start

Install or configure the visual-regression tests for your Drupal project and run the Playwright workflow to capture baselines and start comparing changes.

Frequently Asked Questions about drupal-visual-regression

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up visual regression testing for a Drupal project?

Visual regression testing for Drupal captures baseline screenshots with Playwright, then compares subsequent updates to surface unintended visual diffs. It catches UI regressions during release cycles or design reviews by automating baseline creation and cross-viewport validation.

Does visual regression testing work with dynamic Drupal content like dates and status messages?

Visual regression testing for Drupal supports masking dynamic content like dates and status messages to reduce false positives. By masking these volatile elements, screenshot comparisons surface actual visual regressions instead of expected content changes.

Can I run Playwright visual diffs across multiple viewports in a CI workflow?

Playwright visual diffs support multi-viewport testing aligned with Drupal theme breakpoints and integrate into CI workflows. This validates UI updates across screen sizes during release cycles and continuous integration pipelines.

What is the best way to compare authenticated versus anonymous Drupal UI scenarios?

Visual regression testing for Drupal handles both authenticated and anonymous scenarios by capturing separate baselines. This isolates user-specific visual changes from public-facing updates during release cycle screenshot comparisons.

How do I localize visual diffs to specific Drupal components?

Visual regression testing localizes diffs by capturing per-section and component-level screenshots. This granular baseline approach pinpoints exactly where unintended UI changes occur within the Drupal project structure.

Does Drupal visual regression support BackstopJS workflows?

Drupal visual regression supports both Playwright tests and BackstopJS workflows for CI integration. These frameworks automate baseline creation, cross-viewport validation, and dynamic content masking for comprehensive UI testing.