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:

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:

• Playwright
• Cypress
• Puppeteer

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.