Configuring Responsive Viewports

Argos lets you capture the same page at multiple breakpoints with a single test. Configure viewports once and get consistent responsive coverage across Playwright, Cypress and Puppeteer.

Prerequisites

This feature works seamlessly with Playwright, Cypress and Puppeteer.

note

If you use Storybook, see the dedicated guide on Storybook modes.

Viewport Configuration

Pass a viewports array to argosScreenshot() to generate screenshots for each dimension or preset you define. You can mix explicit sizes and device presets.

await argosScreenshot(..., {
  viewports: [
    "iphone-4",
    { width: 800, height: 600 },
    { preset: "ipad-2", orientation: "landscape" },
  ],
});

Available Presets

Preset	Width (px)	Height (px)
pro-display	3008	1962
studio-display	2560	1440
imac-24	2240	1260
macbook-16	1536	960
macbook-15	1440	900
macbook-13	1280	800
macbook-11	1366	768
ipad-12-pro	1024	1366
ipad-11-pro	834	1194
ipad-10	810	1080
ipad-10-pro	834	1112
ipad-9-pro	768	1024
ipad-2	768	1024
ipad-mini	768	1024
iphone-air	420	912
iphone-17	402	874
iphone-17-pro	402	873
iphone-17-pro-max	440	956
iphone-16	393	852
iphone-16e	390	844
iphone-16-plus	430	932
iphone-16-pro	402	874
iphone-16-pro-max	440	956
iphone-15	393	852
iphone-15-plus	430	932
iphone-15-pro	393	852
iphone-15-pro-max	430	932
iphone-14	390	844
iphone-14-plus	428	926
iphone-14-pro	393	852
iphone-14-pro-max	490	932
iphone-13	390	844
iphone-13-mini	360	780
iphone-13-pro	390	844
iphone-13-pro-max	428	926
iphone-12	390	844
iphone-12-mini	360	780
iphone-12-pro	390	844
iphone-12-pro-max	428	926
iphone-11	414	896
iphone-11-pro	375	812
iphone-11-pro-max	414	896
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

Troubleshooting and Best Practices

Many sites compute layout at load time and will not adapt cleanly if the viewport changes later. If you notice issues, you may want to run your test suite entirely for each viewport instead of changing the viewport before taking each screenshot.

For example, in Playwright you can create a separate browser context for each viewport size.

playrwight.config.ts

import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  projects: [
    {
      name: "chromium-mobile",
      use: {
        ...devices["Desktop Chrome"],
        channel: "chrome",
      },
    },
    {
      name: "chromium-mobile",
      use: {
        ...devices["Desktop Chrome"],
        channel: "chrome",
        viewport: { width: 402, height: 874 }, // iPhone 7 viewport
      },
    },
  ],
});

You can also run page.setViewportSize() before navigating to the page to ensure the layout is computed correctly.

await page.setViewportSize({
  width: 640,
  height: 480,
});
await page.goto("https://example.com");