Configuring the browser viewport size for your visual tests

1. Why setting the viewport size is crucial for automated visual tests
2. How to setup the browser viewport size in your Applitools Eyes tests.               

Please note that you can also learn how to set you viewport size here.

Setting a fixed resolution for automated visual tests is mandatory to ensure consistent results. The UI of the application under test can behave differently in different sizes, and therefore, we recommend using the option to configure the viewport size at the beginning of the test to ensure the test results are repeatable on various configurations. If you do not configure the viewport size, the next time you run the test, the browser might open up in a different size which may cause failures in your visual test. There are two ways to set the browser's size: using the selenium web-driver or using the Eyes.open method.
Note that this results in changing the browser size to have its viewport (viewable content frame size) to match the parameter and not the entire browser window. If failed to do so, the SDK will throw an exception (e.g., setting 1024x768 on a mobile device).

Also, if Eyes.open fails to set the required viewport size, the test will be aborted before starting. This will not happen when failing to set the browser window size using the web-driver.

See the SDK guide for examples how to set the viewport size using Eyes.open in your preferred programming language.
 

Investigating failures to set ViewPort size:

The main reason for failures in this step is when the selected size is too large for the current size of the window (note that Applitools Eyes tries to set the inner browser window size to the selected size while ignoring toolbars and status bars while Selenium sets the size of the entire window, so there are some cases where Selenium setSize will work while Applitools setSize will fail).  In order to determine the maximum size that can be set for the inner browser window on your machine,  you can open your browser in its maximum size and open the browser's developer tools, browse to the console tab and use the commands: 
window.innerWidth and window.innerHeight (as shown in the following image).
These commands will show the width and height values respectively of the current viewport size (which are the maximum possible values, if the browser is maximized). It is recommended to use a number that is a bit smaller than the result (i.e. if the result is 700, use 690) for your tests.
 

 

See example screenshot below:

 

Tip: When opening a batch of tests in Applitools Eyes Tests Dashboard, you can see for each test the OS, browser and viewport size. This combination defines the baseline. So if you see a new test that should not be "new" take a look at these values. You can also see these values at the top right corner of the screen when you open a test.