- Why setting the viewport size is crucial for automated visual tests
- 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).
Settings the viewport size using Eyes.open is preferable, since it sets the size of the client area of the browser (which is the actual size of your web page) rather than that of the browser window (which is affected by the browser, window borders and caption).
See the SDK guide for examples how to set the viewport size using Eyes.open in your preferred programming language.
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.
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.