limiting viewports on a per scenario basis in config file

When creating backstop tests with many scenarios and multiple viewports, the number of reference images gets quite big. In certain cases not all scenarios need to be tested with all viewport sizes. It is often sufficient to only test certain components with a subset of all defined viewports (since they are not responsive and do not change in between the viewports). For other examples which all viewports can be tested.

Would it be possible to add an option field (e.g. limitViewports) to the backstop.json file allowing to limit the viewports on a per scenario basis?

"viewports": [
  {
    "name": "x-small",
    "width": 380,
    "height": 600
  }, {
    "name": "small",
    "width": 640,
    "height": 800
  }, {
    "name": "medium",
    "width": 1300,
    "height": 1200
  }, {
    "name": "large",
    "width": 1900,
    "height": 2000
  }
]

...

"scenarios": [
{
  "label": "Icons",
  "url": "http://localhost:5001/docs/backstopjs/icons",
  "selectors": [
    ".icon-example"
  ],
  "readyEvent": "backstop_ready",
  "misMatchThreshold" : 0.1,
  „limitViewports": ["small“]
}

This would allow for a more fine-grained control of which backstop reference images are created per scenario. What do you think?

[garris]

@DaPo BackstopJS allows you to specify viewports at the scenario level. See the docs… https://github.com/garris/BackstopJS#working-with-your-config-file

[CyrilKrylatov]

@garris wow, thank you for your answer. Sorry, I didn’t catch this. That’s perfect for me. Thank you again.

And thank you for this awesome testing tool. You made it very easy to use. ✌️