Cypress Quickstart

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

Prerequisites

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

• Use Cypress

• Run Cypress on your CI/CD

• Create your project in Argos

1

Install

Get the Argos Cypress SDK.

npm

npm i --save-dev @argos-ci/cypress

yarn

pnpm

bun

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

2

Add cy.argosScreenshot command

Add this line to your cypress/support/e2e.js file:

import "@argos-ci/cypress/support";

If you use TypeScript, update your tsconfig.json:

{
  "compilerOptions": {
    "types": ["cypress", "@argos-ci/cypress/support"]
  }
}

3

Register Argos in Cypress config

const { defineConfig } = require("cypress");
const { registerArgosTask } = require("@argos-ci/cypress/task");

module.exports = defineConfig({
  // setupNodeEvents can also be defined in "component"
  e2e: {
    async setupNodeEvents(on, config) {
      registerArgosTask(on, config, {
        // Enable upload to Argos only when it runs on CI.
        uploadToArgos: !!process.env.CI,
        // Set your Argos token (required only if you don't use GitHub Actions).
        token: "<YOUR-ARGOS-TOKEN>",
      });

      // include any other plugin code...
    },
  },
});

4

Take screenshots

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

cypress/e2e/homepage.cy.js

it("screenshot homepage", async ({ page }) => {
  cy.visit("https://localhost:3000/");
  cy.argosScreenshot("homepage");
});

Add /cypress/screenshots to your .gitignore file, to avoid uploading screenshots to your Git repository.

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

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 resources

• Cypress example

• Argos Cypress SDK reference

---

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