{

  "id": "example.com",

  "viewports": [

    {

      "label": "phone",

      "width": 320,

      "height": 480

    },

    {

      "label": "tablet",

      "width": 768,

      "height": 1024

    },

    {

      "label": "desktop",

      "width": 1024,

      "height": 768

    },

    {

      "label": "wide-desktop",

      "width": 1920,

      "height": 1080

    }

  ],

  "onBeforeScript": "puppet/onBefore.js",

  "onReadyScript": "puppet/onReady.js",

  "scenarios": [

    {

      "label": "Example Homepage",

      "url": "https://dev.example.com/",

      "referenceUrl": "https://examples.com/"

    },

    {

      "label": "Example Search",

      "url": "https://dev.example.com/search",

      "referenceUrl": "https://examples.com/search"

    }

  ],

  "paths": {

    "bitmaps_reference": "backstop_data/bitmaps_reference",

    "bitmaps_test": "backstop_data/bitmaps_test",

    "engine_scripts": "backstop_data/engine_scripts",

    "html_report": "backstop_data/html_report",

    "ci_report": "backstop_data/ci_report"

  },

  "report": ["browser"],

  "engine": "puppeteer",

  "engineOptions": {

    "args": ["--no-sandbox", "--proxy-server='direct://'", "--proxy-bypass-list=*"],

    "waitTimeout": 20000

  },

  "asyncCaptureLimit": 10,

  "asyncCompareLimit": 20,

  "debug": false,

  "debugWindow": false

}

The main thing to setup are the viewports and the test scenarios. Viewports should be self-explanatory, where each scenario will be tested with each defined viewport. Scenario holds the array of URLs where you want to test. The minimum required parameters are

{

  "label": "Example Homepage",

  "url": "https://dev.example.com/"

}

url is the page you want to test, and compare it with referenceUrl. The baseline screenshots could be generated via backstop-live.json and use to compare with Dev test.

Example test

A report will be opened on the browser, showing the number of passed and failed visual tests. 

BackstopJS Report

For each test, you can drill down and access the detailed screenshot for the baseline, test, the diff, and a scrubber to compare them side by side.

Comparison of Reference and Test, with the differences highlighted.

A scrubber view to compare them side by side. We’re missing the live chat!

Another example showing the differences in desktop viewport.

It is caused by the change in the right-hand box.

Advanced Scenarios

Other available parameters are:

        
            {

    "label": "Example Homepage",

    "cookiePath": "backstop_data/engine_scripts/cookies.json",

    "url": "https://dev.example.com/",

    "referenceUrl": "",

    "readyEvent": "",

    "readySelector": "",

    "delay": 0,

    "hideSelectors": [],

    "removeSelectors": [],

    "hoverSelector": "",

    "clickSelector": "",

    "postInteractionWait": 0,

    "selectors": [],

    "selectorExpansion": true,

    "expect": 0,

    "misMatchThreshold" : 0.1,

    "requireSameDimensions": true

}

Examples

“Delay” parameter

This is a useful parameter in case the page load is slower, the media are not fully loaded or JS not completed executed.

    {

      "label": "O8 Homepage",

      "url": "https://www.o8.agency/",

      "delay": 4000

    }

Wait for 4s prior to screenshot.

Hiding a component

If a site contains components like an advertisement section, videos, and other content that is not important for the testing area, then those components can be hidden before taking a screenshot.

    {

      "label": "O8 Homepage",

      "url": "https://www.o8.agency/",

      "hideSelectors": [

         "#someAdsBlock"

      ]

    }

Testing menu

Modern menus mostly use some form of dropdown horizontal navigation. To test each menu, for example, we can use hoverSelector

    {

      "label": "O8 Homepage",

      "url": "https://www.o8.agency/",

      "hoverSelector": ".primary .link--services a"

    }

For a menu that uses the ‘click to open dropdown’ method, we can use clickSelector, explain in the next section.

Dismiss a cookie popup

Locate the cookie dialog button class or id, and use the clickSelector to automatically click the CSS selector before taking a screenshot.

    {

      "label": "O8 Homepage",

      "url": "https://www.o8.agency/",

      "clickSelector": ".iubenda-cs-accept-btn"

    }

The same can be used to test opening a dropdown menu triggered by the click event.

Another way to simulate user interaction is to use the global script in backstop_data/engine_scripts/puppet/onReady.js. Take our example of the cookie popup, instead of repeating it for every scenario, this can be handled globally on the onReady event.

module.exports = async (page, scenario, vp) => {

  console.log('SCENARIO > ' + scenario.label);

  await require('./clickAndHoverHelper')(page, scenario);

  // remove iubenda cookie dialog.

  await page.waitFor('.iubenda-cs-accept-btn', { 'timeout': 2000 });

  await page.click('.iubenda-cs-accept-btn');

  // add more ready handlers here...

};

We could use all Puppeteer API here to interact with the web page. What is happening here is we wait for the .iubenda-cs-accept-btn to be ready before clicking on the Accept button.

Blog Categories

Comments

skyline


O8 is a web and digital marketing consultancy based in Minneapolis, MN offering expert-level UX Design, CRO, and strategic consulting, as well as highly-technical capabilities in Drupal, WordPress, and HubSpot

We work differently from traditional agencies in that we extend your team with ours.