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​