BackstopJS Example Config

README.md

BackstopJS Example Config

This is an example of the kind of config I've been using to experiment with BackstopJS, a pretty cool visual regression testing tool.

Note: I've only been using this config for individual development testing purposes. If you want to use this in some big CI process or something, you'll probably need to make it a bit more sophisticated. Or maybe it won't even work for you for any purpose at all because the sites I'm working on are different enough from the sites you're working on. Hopefully it can at least give you a good place to start or give you some ideas :)

Usage

• Copy the files to an empty directory (or your project). You may also want to put the onBefore and onReady scripts into an appropriate subdirectory and update the engine_scripts path to point to them.
• Set up your scenarios to point to the pages you want to compare.
• Per the regular instructions, use backstop reference to generate reference images, and backstop test to generate test images and compare them.

Since you're not using the default backstop.json config file, be sure to add a --config=backstop.config.js option to each command.

backstop.config.js

// Add as many scenarios as you want!
const scenarios = [{
    label: 'Example Scenario',
    url: 'http://local-dev-environment/',
    referenceUrl: 'https://public-url/', // This isn't necessary if you're interested in testing changes at a single URL.
    onReadyScript: 'onReady.js' // If there's stuff you need to do to the page before screenshotting. If not just delete this line.
}];

const screenSizes = {
    A: 425,
    B: 768,
    C: 1024
};

const scenarioDefaults = {
    hideSelectors: [
        'phx-advertisement',
        '[id^="ad-"]'
    ],
    removeSelectors: [
        '.m-header-ad',
        '.m-fixedbottom-ad'
    ],
    misMatchThreshold: 5,
    requireSameDimensions: true
};

scenarios.forEach(scenario => Object.assign(scenario, scenarioDefaults));

module.exports = {
    id: 'test',
    viewports: Object.keys(screenSizes).map(breakpoint => ({
        label: breakpoint,
        width: screenSizes[breakpoint],
        height: screenSizes[breakpoint] * 2
    })),
    onBeforeScript: 'onBefore.js',
    readyEvent: 'firstPageLoadTime',
    scenarios: scenarios,
    paths: {
        bitmaps_reference: 'backstop_data/bitmaps_reference',
        bitmaps_test: 'backstop_data/bitmaps_test',
        engine_scripts: '.', // Just putting scripts next to the config for the Gist
        html_report: 'backstop_data/html_report',
        ci_report: 'backstop_data/ci_report'
    },
    engineFlags: [],
    engine: 'chrome',
    report: ['browser'],
    debug: false,
    debugWindow: true // Shows browser window
};

onBefore.js

module.exports = function (chromy, scenario, viewport, isReference) {
    let { options } = chromy;

    // Before the page loads, we can do stuff like set up Chromy
    // to add request headers and extend the timeouts.
    options.headers = {
        'Authorization': 'Basic [base64 username:password]'
    };
    options.gotoTimeout = 120000;
    options.waitTimeout = 120000;
    options.evaluateTimeout = 120000;

    return chromy;
};

onReady.js

module.exports = function (chromy, scenario, viewport) {
    return chromy
        .click('[module_title="close"]'); // Close the modal if there is one.
};