Capture screenshots from URLs

Capture screenshots of a list of web pages with Argos using Playwright, Cypress, or Puppeteer.

Cover many pages with little code: loop over a list of URLs and capture a screenshot of each. The same pattern works in Playwright, Cypress, and Puppeteer.

Using Playwright

Generate one test per page, each capturing a screenshot with the Argos Playwright SDK:

screenshot-pages.spec.ts

import { test } from "@playwright/test";
import { argosScreenshot } from "@argos-ci/playwright";

const pages = [
  { name: "homepage", path: "/" },
  { name: "integrations", path: "/integrations" },
  { name: "contact", path: "/contact-us" },
  { name: "pricing", path: "/pricing" },
];

for (const { name, path } of pages) {
  test(`Run Argos on ${name} (${path})`, async ({ page }) => {
    await page.goto(path);
    await argosScreenshot(page, name);
  });
}

Using Cypress

Generate one test per page with the Argos Cypress command:

screenshot-pages.cy.js

const pages = [
  { name: "homepage", path: "/" },
  { name: "integrations", path: "/integrations" },
  { name: "contact", path: "/contact-us" },
  { name: "pricing", path: "/pricing" },
];

for (const { name, path } of pages) {
  it(`Run Argos on ${name} (${path})`, () => {
    cy.visit(path);
    cy.argosScreenshot(name);
  });
}

Using Puppeteer

Loop over the pages in a standalone script and capture each with the Argos Puppeteer SDK:

screenshot-pages.mjs

import puppeteer from "puppeteer";
import { argosScreenshot } from "@argos-ci/puppeteer";

const baseUrl = "http://localhost:3000";
const pages = [
  { name: "homepage", path: "/" },
  { name: "integrations", path: "/integrations" },
  { name: "contact", path: "/contact-us" },
  { name: "pricing", path: "/pricing" },
];

const browser = await puppeteer.launch();
const page = await browser.newPage();

for (const { name, path } of pages) {
  await page.goto(`${baseUrl}${path}`);
  await argosScreenshot(page, name);
}

await browser.close();