Skip to main content

Capture Screenshots from URLs

Efficiently capture web page screenshots across frameworks with Argos: A step-by-step guide for Playwright, Cypress, and Puppeteer integration.

Using Playwright

Below is a step-by-step script for Playwright to take screenshots of specified pages. This script utilizes the Argos Playwright integration for streamlined screenshot capture:

screenshot-pages.spec.ts
import { test } from "@playwright/test";
import { argosScreenshot } from "@argos-ci/playwright";

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

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

Using Cypress

Here's how you can capture screenshots within Cypress. The script navigates to each page and uses the Argos Cypress command for screenshots:

screenshot-pages.spec.ts
const pages = [
{ name: "homepage", path: "/" },
{ name: "faq", path: "/faq" },
{ 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

or Puppeteer users, this script demonstrates how to capture page screenshots effectively. It employs Puppeteer for navigation and screenshot capture:

screenshot-pages.spec.ts
import puppeteer from "puppeteer";
import { argosScreenshot } from "@argos-ci/puppeteer";

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

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

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

await browser.close();
})();