0

Situation: We need to run tests in Nightwatch for different screen sizes (desktop, tablets, smartphone layout etc) so we need to resize the browser window to certain dimensions. Let's say, the tablet breakpoint is 1024x768, so we set the window width and height for destop as globals to 1025x768 but when the test is running it fails because the layout is still in tablet mode (and the screenshots show a size of actual content area of 1006x636).

After some research (question1 , question2, question3), it turns out the resizing is setting the whole window size to 1024x768 without taking into account the browser's borders and scrollbars and other such elements, so then the actual content area remains much smaller. It's really different for each browser and OS, plus on Windows and Linux you can basically define your own window styles which would add different sizes again, so we cannot calculate it.

Question: is there any way we can set the window content area to a specific size using Nightwach/javascript?

Community
  • 1
  • 1
anasarbescu
  • 158
  • 4
  • 19

1 Answers1

3

According to the Selenium wire protocol, you can only resize a window. But if you compare the desired size with what you actually get, you can resize it a second time to suit. Example:

var target = { width: 600, height: 400 };
browser
    .resizeWindow(target.width, target.height)
    .getElementSize('body', function(result) {
        console.log("My content is ", result.value.width, " by ", result.value.height);
        browser
            .resizeWindow(target.width + (target.width - result.value.width), 
                          target.height + (target.height - result.value.height))
            .getElementSize('body', function(result) {
                console.log("Now my content is ", result.value.width, " by ", result.value.height);
            })
    })

Running this I get:

My content is  584  by  270
Now my content is  600  by  400

Here is another way to do it that runs a Javascript snippet in the browser to determine the window padding (different framework, should also work with NW.)

Community
  • 1
  • 1
Jonathan Ross
  • 530
  • 3
  • 10
  • Hey Jonathan, Thanks, that works! And going further into your suggested direction i discovered there is actually some client side javascript that does that: `window.outerWidth` , `window.innerWidth`, `window.outerHeight`, `window.innerHeight`. so using these you can write a command that will avoid waiting for the actual page to fully load in order to do the resizing, which might be a better approach. – anasarbescu May 08 '17 at 13:28