Set up Argos with Cypress and GitHub Actions in minutes
Tags: testing, javascript, opensource, github
Published: 2022-12-09 13:47:05






## Argos visual testing
[Argos](https://www.argos-ci.com/?utm_source=dev.to&utm_medium=blog&utm_campaign=cypress-github-article) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8zv8jxdwq273ab3bgm2.png)

_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.
<br/>


## 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](https://github.com/marketplace/argos-ci) 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.

```sh
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.

```js
// 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:

```js
// 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.

```yml 
# 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
```
<br/>

### 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.
![congratulation meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9id9elq7o6ut3qt8fodj.jpeg)

### 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.

![Argos check status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tc3d0y7fgbyps0rek87v.png)


### Credit and sources

- Photo by [Petri Heiskanen](https://unsplash.com/fr/@pheiskan) on Unsplash.
- [Argos website](https://www.argos-ci.com/?utm_source=dev.to&utm_medium=blog&utm_campaign=cypress-github-article) and [docs](https://docs.argos-ci.com/?utm_source=dev.to&utm_medium=blog&utm_campaign=cypress-github-article)
- [Argos CLI](https://docs.argos-ci.com/argos-cli?utm_source=dev.to&utm_medium=blog&utm_campaign=cypress-github-article) and [Argos Cypress plugin](https://docs.argos-ci.com/cypress?utm_source=dev.to&utm_medium=blog&utm_campaign=cypress-github-article)