Skip to main content

Use Argos with Cypress

Integrating Argos with your Cypress tests to enable visual testing on your application.

Cypress already offers a command to take screenshots. The official Argos Cypress integration uses it but also does several things:

  • Wait for all images to be loaded
  • Wait for all fonts to be loaded
  • Wait for no aria-busy (loader) elements to be present in the page
  • Hide scrollbars
  • Hide carets
  • Expose CSS helpers to help you hiding content

1. Setup

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

And add this line to your cypress/support/index.js file.

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

2. Use in your tests

cy.argosScreenshot command stabilizes the UI and takes a screenshot.

How to take a screenshot with cy.argosScreenshot command

describe("Homepage", () => {
it("screenshots the page", () => {
// Screenshot a full page
cy.argosScreenshot("home");

// Screenshot a component
cy.get("main div.breadcrumb").argosScreenshot("home-breadcrumb");
});
});

By default screenshots are stored in cypress/screenshots folder, relative to current directory.

3. Upload screenshots to Argos

Look at Argos doc to know how to configure your CI to send screenshots to Argos.

As Cypress store the screenshots into the "cypress/screenshots" folder by default, have to specify it when you use Argos CLI command: npx @argos-ci/cli upload cypress/screenshots.

API

cy.argosScreenshot([name][, options])

Helper attributes

The data-visual-test attributes allow you to control how elements behave in the Argos screenshot.

It is often used to hide changing element like dates.

  • [data-visual-test="transparent"] - Make the element transparent (opacity: 0)
  • [data-visual-test="removed"] - Remove the element (display: none)
  • [data-visual-test="blackout"] - Blacked out the element
  • [data-test-no-radius] - removes border radius

How to use an helper to hide a div from a screenshot

<div id="clock" data-visual-test="transparent">...</div>

Resources