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.
API
cy.argosScreenshot([name][, options])
name
- The screenshot name; must be unique; default value to test titleoptions
- See cy.screenshot command 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>