Puppeteer Quickstart

Learn how to setup visual testing using the Argos Puppeteer SDK.

Prerequisites

To get the most out of this guide, you’ll need to:

• Use Puppeteer
• Run Puppeteer on your CI/CD
• Create your project in Argos

1. Install

npm

npm i --save-dev @argos-ci/cli @argos-ci/puppeteer

yarn

yarn add --dev @argos-ci/cli @argos-ci/puppeteer

pnpm

pnpm add --save-dev @argos-ci/cli @argos-ci/puppeteer

bun

bun add --dev @argos-ci/cli @argos-ci/puppeteer

Read the CLI documentation if you need information about advanced usages.

2. Take screenshots

Use argosScreenshot helper to capture stable screenshots in your E2E tests.

import { argosScreenshot } from "@argos-ci/puppeteer";
const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("http://example.com");
  await argosScreenshot(page, "example.png");
  await browser.close();
})();

Tip: Check out our guides to screenshot multiple pages or capture multiple viewports.

3. Setup your CI

Add this command to your CI pipeline to upload the screenshots to Argos.

npm exec -- argos upload --token <ARGOS_TOKEN> ./screenshots

Note: The value of ARGOS_TOKEN is available your project settings on Argos.

Congratulations on installing Argos! 👏

After committing and pushing your changes, the Argos check status will appear on your pull request in GitHub (or GitLab).

Note: you need a reference build to compare your changes with. If you don't have one, builds will remain orphan until you run Argos on your reference branch.

You can now review changes of your app for each pull request, avoid visual bugs and merge with confidence. Welcome on board!

Additional ressources

• Puppeteer example
• Puppeteer SDK reference

---

Join our Discord, submit an issue on GitHub or just send an email if you need help.