Skip to main content

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:

  1. Using Presets: Use the name of the supported device preset. For instance:

    {
    viewports: ["iphone-4", "macbook-15"];
    }
  2. 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",
    },
    ];
    }
  3. 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:

PresetWidth (px)Height (px)
macbook-161536960
macbook-151440900
macbook-131280800
macbook-111366768
ipad-27681024
ipad-mini7681024
iphone-xr414896
iphone-x375812
iphone-6+414736
iphone-se2375667
iphone-8375667
iphone-7375667
iphone-6375667
iphone-5320568
iphone-4320480
iphone-3320480
samsung-s10360760
samsung-note9414846

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.