Skip to main content

Use Argos with Puppeteer

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

Puppeteer already offers a command to take screenshots. The official Argos Puppeteer 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/puppeteer

2. Use in your tests​

argosScreenshot command stabilizes the UI and takes a screenshot.

How to take a screenshot with argosScreenshot command

import puppeteer from "puppeteer";
import { argosScreenshot } from "@argos-ci/puppeteer";

describe("Integration test with visual testing", () => {
  it("loads the homepage", async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(TEST_URL);
    await argosScreenshot(page, this.test.fullTitle());
  });
});

Screenshots are stored in screenshots/argos 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​

argosScreenshot(page, name[, options])​

  • page - A puppeteer page instance
  • name - The screenshot name; must be unique
  • options - See Page.screenshot command options
  • options.element - Accept an ElementHandle or a string selector to screenshot an element

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)

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

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

Resources​