Configuring Viewports in integrations
With Argos, you can specify the viewport sizes for your visual tests using the viewports
option in the JavaScript API. This allows you to simulate how your web application or site looks on various devices, be it mobile, tablet, or desktop.
How to Configure
You can set the viewport in several formats:
Using Presets: Use the name of the supported device preset. For instance:
{
viewports: ["iphone-4", "macbook-15"];
}Using Presets with Additional Options: If you want to specify additional properties like
orientation
, you can use an object format. Example:{
viewports: [
{
preset: "ipad-2",
orientation: "landscape",
},
];
}Custom Dimensions: If you need a viewport size that's not in the preset list, you can specify custom dimensions:
{
viewports: [{ width: 800, height: 600 }];
}
It is also possible to mix formats:
{
viewports: ["iphone-4", { width: 800, height: 600 }];
}
Supported Presets
Here's a list of available device presets and their respective dimensions:
Preset | Width (px) | Height (px) |
---|---|---|
macbook-16 | 1536 | 960 |
macbook-15 | 1440 | 900 |
macbook-13 | 1280 | 800 |
macbook-11 | 1366 | 768 |
ipad-2 | 768 | 1024 |
ipad-mini | 768 | 1024 |
iphone-xr | 414 | 896 |
iphone-x | 375 | 812 |
iphone-6+ | 414 | 736 |
iphone-se2 | 375 | 667 |
iphone-8 | 375 | 667 |
iphone-7 | 375 | 667 |
iphone-6 | 375 | 667 |
iphone-5 | 320 | 568 |
iphone-4 | 320 | 480 |
iphone-3 | 320 | 480 |
samsung-s10 | 360 | 760 |
samsung-note9 | 414 | 846 |
Supported integrations with viewports
Argos offers the viewports configuration option exclusively through its official integration plugins. Below is a list of supported integrations:
Important Note
Setting the viewport using page.setViewportSize()
will resize the page. However, many websites are not designed to adapt dynamically to different viewport sizes. Thus, it's recommended to set the viewport size before navigating to the page.
It is recommended to run your entire test suite on a specific viewport to be sure everything is working as expected on every resolution.