We are making various aspects of our custom plugins responsive. As a result I tried to write a Behat test for one specific feature about controlling the size of a particular aspect. Basically I want to do:

• set the window to a specific size
• check the exact width of my thing, it should be say 600
• set the window 50 pixels wider
• the width should now be 650
  (then change a setting to make it not responsive and repeat and check the size doesn't change)

I wrote this test and it worked fine on my machine, but then I discovered it was fragile across operating systems/browsers. The reason is that when you set the window size, e.g. to 800x600, this achieves a slightly random result - the actual browser viewport is a different size depending on the operating system and browser used. (Even the same browser, on different OS, has different size for its surround.)

We decided it would be useful and more reliable to be able to set the viewport size rather than the window size. I've done the code locally but thought it would be useful to contribute to the community as well, because it provides more consistent results than the existing step, so I'm going to attach it here.

Implementation summary

The previous/existing step is as follows:

And I change window size to "800x600"

You can also specify 'medium' etc.

My new additional step is:

And I change viewport size to "800x600"

It works as follows, given the above example:

• The browser window will be set so that the viewport width is 800 pixels, provided that there is a vertical scrollbar. On pages with no vertical scrollbars, it will be slightly wider.
• The viewport height will be 600 pixels, provided that there is not a horizontal scrollbar. If there is, it will be slightly shorter.
• If using a browser that includes scrollbars within the viewport (on top of content) rather than taking them out of it, then the viewport height should always be exactly as specified.

The scrollbar assumptions were made as these are most common and I wanted it to be consistent i.e. I don't want it to work differently depending on whether you are looking at a 'short' page when you run the step, because the next page you go to might be a 'long' one with scrollbar.

I have tested on Chrome. I'm going to add test steps here that will include a way to check it since obviously the step isn't used in core (yet!)