Set up Argos with Cypress and GitHub Actions in minutes

Argos visual testing

Argos is a beautiful open-source app for visual testing.
It is easy to install and less expensive than it's competitors.

Visual testing is a scalable way to ensure the visual integrity of your web application and catch any potential visual bugs before they become a problem.

Argos build example

When visual testing is combined with a CI workflow, you get an immediate feedback cycle that highlights visual diffs across browsers and screen resolutions for each pull request.

5 steps installation

Setting up Argos is blazing fast if you're working on a project that already uses Cypress for end-to-end testing and GitHub Actions as CI.

Step 1 - Install the GitHub app

Subscribe to a plan on GitHub Marketplace and follow the installation tunnel to authorize the GitHub app.

Argos is free up to 5K screenshots monthly.

Step 2 - Install Argos' packages

Install Argos CLI and the Argos Cypress plugin in your project.

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

Step 3 - Configure Cypress

Add the following code to cypress/support/index.js to enable the Argos Cypress plugin and use the argosScreenshot command.

// file: cypress/support/index.js

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

Step 4 - Take a screenshot

In your Cypress test files, use the argosScreenshot command to take a screenshot of the page for visual testing with Argos. For example:

// file: cypress/e2e/homepage.cy.js

describe("Homepage", () => {
  it("screenshots the page", () => {
    cy.visit("http://localhost:3000");
    cy.argosScreenshot("home");
  });
});

The argosScreenshot command increases screenshot stability, but you can use the cypress' native screenshot command instead.

Step 5 - Configure GitHub Actions

Add a command to your GitHub Actions config file to upload the screenshots to Argos.

# file: .github/workflows/ci.yml

name: CI
  build:
    runs-on: ubuntu-latest
      - uses: actions/checkout@v3

      # 👉 Insert the steps to execute Cypress tests

      # 👇 Insert this command to upload screenshots to Argos
      - name: Upload screenshots to argos-ci.com
        run: npx @argos-ci/cli cypress/screenshots

Congratulation

That's it! Argos will automatically receive screenshots of your pages when you push a commit to GitHub. In addition, Argos will compare them to previous versions to ensure no unexpected changes.

Review visible changes

You can now review the visual diffs on Argos and avoid regression. In your pull request, click on details link in front of the Argos check to open the build on Argos.

Credit and sources

• Photo by Petri Heiskanen on Unsplash.
• Argos website and docs
• Argos CLI and Argos Cypress plugin