3.3BackstopJS

BackstopJS provides a configuration-driven approach to visual testing. Define scenarios in a JSON file, and BackstopJS handles screenshot capture, comparison, and reporting.

{
    "id": "my-app-visual-tests",
    "viewports": [
        { "label": "phone", "width": 375, "height": 812 },
        { "label": "tablet", "width": 768, "height": 1024 },
        { "label": "desktop", "width": 1440, "height": 900 }
    ],
    "scenarios": [
        {
            "label": "Homepage",
            "url": "http://localhost:3000/",
            "delay": 1000,
            "misMatchThreshold": 0.1,
            "requireSameDimensions": true,
            "hideSelectors": [".dynamic-timestamp", ".user-avatar"],
            "removeSelectors": [".cookie-banner"]
        },
        {
            "label": "Login Form",
            "url": "http://localhost:3000/login",
            "delay": 500,
            "selectors": ["[data-testid='login-form']"],
            "selectorExpansion": true,
            "misMatchThreshold": 0.05
        },
        {
            "label": "Dashboard - After Login",
            "url": "http://localhost:3000/dashboard",
            "delay": 2000,
            "cookiePath": "test-data/auth-cookies.json",
            "hideSelectors": [".chart-animation", ".live-counter"]
        }
    ],
    "engine": "playwright",
    "report": ["browser", "CI"],
    "ci": {
        "format": "junit",
        "testReportFileName": "backstop-results",
        "testSuiteName": "Visual Regression"
    }
}

BackstopJS Commands

# Create initial baselines
npx backstop reference

# Run comparison against baselines
npx backstop test

# Approve current screenshots as new baselines
npx backstop approve

# Open the visual report in a browser
npx backstop openReport

Advanced BackstopJS Features

{
    "label": "Product Detail - Hover State",
    "url": "http://localhost:3000/products/1",
    "hoverSelector": ".add-to-cart-btn",
    "postInteractionWait": 500,
    "misMatchThreshold": 0.1
},
{
    "label": "Mobile Menu Open",
    "url": "http://localhost:3000/",
    "viewports": [{ "label": "mobile", "width": 375, "height": 812 }],
    "clickSelector": ".hamburger-menu",
    "postInteractionWait": 500,
    "scrollToSelector": ".menu-drawer"
},
{
    "label": "Form Validation Errors",
    "url": "http://localhost:3000/register",
    "onReadyScript": "scripts/submit-empty-form.js",
    "delay": 1000,
    "selectors": ["[data-testid='registration-form']"]
}