Is it possible to pass custom viewports to each scenario?

[mwmaleks]

Hi! I'm implementing screenshot testing for storybook components those some times should be captured with the only mobile or desktop viewport size. Is it possible to pass it immediatly to a scenario?

[garris]

@mwmaleks Hi -- thanks for posting! Is this something you intend to package for the storybook project? This is something I have wanted to do for a year ( but of course -- I have not had time 😄 )

To answer your question... There is currently no clean way to do this with backstop because for each config -- viewports and scenario collections are explicitly tied together. I have looked at potentially adding an exception property in the past -- (as a filter -- or just re-specifying new viewports etc.) but so far, none of the solutions have felt clean. I think maybe the best way to implement what you want to do is to create a few configs for testing your components -- Here are some examples of what I mean...

• config 1: mobile_only_components (this would have one viewport at your mobile setting etc)
• config 2: desktop_only_components (this would have one viewport at your desktop setting etc)
• config 3: responsive_components (this would have multiple viewports)

Then you simply test the right component in the right config. Also, you would probably need to create a test runner which would run at the right time and specify (or discover) which configs to run. You could probably make creative use of the --filter argument to potentially only test files which are changed.

This is obviously just an idea -- I am sure your use-case is more complicated.

Does this help? Is that workable for your use case?

[anton-kulagin]

@garris I have same idea, to specify viewport. But i think that the easiest way is add into scenario option "viewports" where default value 'all' but user can specify just names of viewports as array.

scenarios: [
  {
    "selectors": [
      ".aListOfStuff li"
    ],
    "selectorExpansion": false
    "viewports":["tablet","mobile"]
  },
  {
    "selectors": [
      ".aListOfStuff a"
    ],
    "selectorExpansion": false
    "viewports":["desktop"]
  }
]

[dbazuin]

The suggestion above would be a great addition.
Ideal if you for example only want to test something like a mobilemenu with a clickSelector

[garris]

Ok. The people have spoken. I guess we should do it.

Prop name:
viewportsWhitelist
Type:
Array? RegexString?
Behavior:

• all viewports are used if prop is not specified
• if prop is specified then only matches are used

Comments please...

[dbazuin]

I think a array is fine.

[anton-kulagin]

I also think that array preferable

[garris]

Ok. Sounds good. PR is welcome.

[kiran-redhat]

something like this? #472

…

On Nov 2, 2017 4:09 AM, "Garris" ***@***.***> wrote: Ok. Sounds good. PR is welcome. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#577 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AQUrI7kOdbrK2B1eUrxZOUAccskt7fvyks5syIm5gaJpZM4QDLWw> .

[garris]

@kiran-redhat I think if we are to pass an array of allowed viewports with each scenario we would want to implement a switch near here...

https://github.com/garris/BackstopJS/blob/master/core/util/createBitmaps.js#L113

This would also need to happen for phantom tests.

[kiran-redhat]

created PR, @garris , please can you have a look ? #472

[florianbepunkt]

Has this been added?

[garris]

Yes. This was added.

[florianbepunkt]

@garris: Thanks. Has the syntax changed? Haven't found in in the docs and using it in a scenario like this has no effect

{
      "removeSelectors": ["#instagram-feed"],
      "label": "Mobile Overlay Menu",
      "url": "http://wp/die-spielregeln/",
      "viewportsWhitelist": ["phone", "tablet"]
 },

Expected behaviour: Only viewports labeled phone and tablet will be tested.
Actual behaviour: But all viewports are tested.

[florianbepunkt]

I am an idiot… found it. thanks.

[zahorulko]

Hi, I just leave it here

"scenarios": [
    {
      "label": "",
      "cookiePath": "backstop_data/engine_scripts/cookies_latest.json",
      "url": "",
      "viewports": [
        {
          "label":"par_1280",
          "width":1280,
          "height":720
        },
        {
          "label":"par_768",
          "width":768,
          "height":480
        }

      ],
      "referenceUrl": "/"
]