How to Set Up Argos CI with Playwright in GitHub Actions in India

To set up Argos CI with Playwright in GitHub Actions, install the Argos Playwright integration and CLI, add the Argos reporter to your Playwright configuration, call argosScreenshot for the UI states you want reviewed, then run the tests in a GitHub Actions workflow. For authentication, check Argos project settings: its current guidance describes GitHub OIDC, which uses the workflow permission id-token: write, and a tokenless fallback for some cases. The setup is the same for developers in India; the reviewed guides do not specify an India-only workflow.

1. Install Playwright and Argos

If Playwright is not set up yet, initialize it in your project. Then install the Argos CLI and Playwright integration as development dependencies:

npm init playwright@latest
npm install --save-dev @argos-ci/cli @argos-ci/playwright

The Argos guide that documents this package pattern dates from 2023. Package compatibility can change, so check the current Argos and Playwright documentation if installation or configuration differs in your project. Use the package manager and lockfile your repository already uses; for npm, commit the updated lockfile and use npm ci in CI.

2. Configure the Argos reporter

Add the Argos reporter to your Playwright configuration for CI. Keep any existing reporters you rely on, such as Playwright’s list reporter. Adding a reporter can replace the default reporter configuration unless you explicitly include both.

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

const defaultReporters = [["list"]];

export default defineConfig({
  reporter: process.env.CI
    ? [...defaultReporters, ["@argos-ci/playwright/reporter"]]
    : defaultReporters,
});

This example assumes a TypeScript Playwright config. If your project uses JavaScript, keep the same configuration and save it in the JavaScript config file your project uses. If you already have reporters configured, append the Argos reporter instead of replacing them.

3. Capture useful page states

Import argosScreenshot in a Playwright test and call it after navigating to the page or after arranging the UI state you want captured:

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

test("homepage visual snapshot", async ({ page }) => {
  await page.goto("http://localhost:3000/");
  await argosScreenshot(page, "homepage");
});

Use stable, descriptive screenshot names and capture meaningful states, such as a product page with a menu open or a form displaying validation. Make sure the app server is running and reachable at the URL used by the test. The Argos reporter handles screenshot upload during the test run. For current integration details and any package changes, use the Argos documentation.

4. Add a GitHub Actions workflow

Create a workflow such as .github/workflows/visual-tests.yml. This example checks out the repository, installs Node dependencies, installs Playwright browsers and system dependencies on Ubuntu, then runs the tests on pushes and pull requests to main:

name: Visual tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npm exec playwright install --with-deps
      - run: npm exec playwright test

Adapt the branch filters, Node version, and install commands to your repository and its lockfile. If the application needs to be started for tests, add the project’s normal build and server-start steps, or configure Playwright’s webServer option so the test command waits for it. A workflow that reaches the tests before the app is ready will fail at navigation even when the screenshot setup is correct.

5. Configure Argos authentication

Argos’s May 2026 changelog describes GitHub Actions authentication with GitHub OIDC. To use that approach, enable it in Argos under Project Settings → Authentication and grant the workflow permission to request an identity token:

permissions:
  contents: read
  id-token: write

Place these permissions at the workflow or job level, depending on which jobs need them. With OIDC configured, the current guidance says to remove ARGOS_TOKEN from the job. Argos also describes a tokenless fallback for some cases where GitHub does not issue OIDC tokens, including certain fork pull requests. Check the current Argos project settings and authentication documentation before relying on either behavior.

Some older integration examples use an ARGOS_TOKEN stored as a GitHub Actions secret. Argos’s 2024 Storybook guide illustrates that older pattern, but it is not the only current authentication path. Follow the instructions for your project and integration rather than adding a long-lived token by habit.

6. Keep screenshots consistent

Visual output can vary with the operating system and browser rendering environment. Keep screenshot generation and comparison in a consistent environment, especially if you also use Playwright’s built-in toHaveScreenshot baselines. Playwright creates a reference image on the first baseline run and compares later captures against it; changing the environment can introduce rendering differences. The Argos guidance recommends consistency but does not require a particular Docker image.

Argos-managed screenshot review and Playwright-native screenshot baselines serve related but different workflows. Argos integrates screenshot uploads and review into its hosted workflow; native baselines are reference images used by Playwright tests. Choose based on where your team wants baselines and review results to live. The cited sources do not establish a universal performance or quality winner.

7. India-specific considerations

The reviewed setup instructions do not describe an India-specific GitHub Actions, Node.js, or Playwright configuration. Follow the same workflow and adapt it to your repository. The reviewed Argos pricing page shows USD prices, not India-localized prices, and does not establish local tax treatment or billing availability; confirm those details on the current pricing page before purchase.

8. Troubleshooting

Symptom	Likely cause	What to check
Argos reporter is missing or cannot be loaded	The integration package is absent, dependency installation failed, or the configured reporter path differs from the installed package.	Confirm `@argos-ci/playwright` is installed as a development dependency and that CI ran `npm ci` against the committed lockfile. Compare the reporter configuration with the current Argos guide.
Existing Playwright output disappeared	The reporter configuration was replaced instead of extended.	Include both the reporters your project needs and `@argos-ci/playwright/reporter` in the CI reporter list.
Browser executable or system library errors	The workflow did not install the browser binaries or required Linux dependencies.	Run `npm exec playwright install --with-deps` after installing project dependencies.
Navigation fails or captures a blank page	The app is not running, the URL is wrong, or the test reaches it before startup completes.	Check the test URL, start the app in CI, and make the test wait for the app to become available before navigating.
Upload authentication fails	OIDC is not enabled for the Argos project, `id-token: write` is missing, or the workflow context uses a case where GitHub does not issue an OIDC token.	Verify Project Settings → Authentication and workflow permissions. Check Argos’s current fallback guidance for fork pull requests and other restricted contexts.
Visual differences appear only in CI	Local and CI operating systems, browser versions, fonts, or rendering conditions differ.	Generate and compare screenshots in a consistent environment. Inspect whether the change is a real UI difference before updating a baseline.
CI reports no useful screenshot changes	The test never calls `argosScreenshot`, or it captures before the UI reaches the intended state.	Call it after navigation and required interactions, using a meaningful state and a stable screenshot name.

9. Cost and operational notes

The Argos pricing page lists a Hobby plan at $0 with up to 5,000 screenshots and a Pro plan starting at $100 per month, billed monthly based on usage, with 35,000 screenshots included and additional screenshot charges. These are USD figures from the reviewed pricing page and may change; they are not India-localized quotes. Check current plan limits and billing terms before choosing a plan.

For reliable CI, keep dependencies locked, install browser dependencies in the workflow, make the application startup explicit, and keep the rendering environment consistent. The reviewed sources do not provide neutral benchmark data for runtime or upload performance, so measure your own workflow if duration or volume is a constraint.

Or skip the browser setup

If your goal is to capture a website rather than run browser-based visual tests on every pull request, ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request returns a PNG, JPEG, WebP, or PDF. See the API documentation for the request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be disabled. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots, and every feature is on every plan. Sign up for 1,000 free screenshots a month with no card.

FAQ

Does this setup change for developers in India?

The reviewed technical instructions do not specify an India-specific change. Use the same GitHub Actions and Playwright setup, and confirm billing details directly with Argos if relevant.

Do I need both Argos and Playwright’s screenshot assertions?

No. Argos’s reporter and argosScreenshot support its screenshot review workflow. Playwright’s toHaveScreenshot is a separate native baseline approach; use both only if your tests need both workflows.

Should I still set an Argos token secret?

Not automatically. The May 2026 Argos changelog describes OIDC authentication and a tokenless fallback for some situations. Check the current project-level instructions for your workflow context.

Where can I check the current Argos prices?

Use the Argos pricing page; the amounts and included screenshot counts can change.