How to run Argos visual testing on Vercel Preview

Great news for Vercel enthusiasts! Argos seamlessly integrates visual testing with Vercel Preview, enabling you to detect visual regressions in a production-like environment effortlessly. This guide walks you through setting it up with GitHub Actions and Playwright, streamlining your workflow.

Motivation behind this feature

Responding to user feedback, we recognized the need for visual testing directly on Vercel Previews, especially for environments akin to production settings. This approach is not only cost-effective, eliminating the need for separate test environments, but also enhances test accuracy by mirroring production conditions closely.

How to run Argos on Vercel Preview

1. Set up Argos

Start by following the QQuickstart guide to integrate Argos with Playwright. This foundational step ensures that Argos is ready to run visual tests during your CI process.

2. Run tests on your Vercel Preview

Adapt your CI workflow with this GitHub Actions configuration to enable Argos visual testing on Vercel Previews:

name: Playwright + Argos Tests
on: deployment_status:
jobs:
  test:
    if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v3
      - name: Install dependencies
        run: npm ci && npx playwright install --with-deps
      - name: Run Playwright tests
        run: npx playwright test
        env:
          BASE_URL: ${{ github.event.deployment_status.environment_url }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          ARGOS_BRANCH: ${{ github.event.deployment_status.environment == 'Production' && 'main' || '' }}

For a comprehensive explanation of each step, consult the Argos documentation.

Next, update your Playwright config file is updated to reflect the preview's URL and configure it to ignore the Vercel toolbar for cleaner test results:

export default defineConfig({
  use: {
    # 👉 URL generated for the preview
    baseURL: process.env.BASE_URL,
  },
  extraHTTPHeaders: {
     # 👉 Hide vercel toolbar in tests
    "x-vercel-skip-toolbar": "0",
  },
});

Assuming you have automatic deploys set up, you’ll see the results of your deploy in your pull request. Upon a successful deploy, the E2E workflow will start on the preview.

Conclusion

Leveraging Argos with Vercel Previews not only enhances visual consistency in a near-production environment but also optimizes your CI process by eliminating the need for additional environments for testing. This integration streamlines your workflow, ensuring that your projects meet the highest standards of visual quality while being cost-effective.