Skip to main content

Puppeteer

Install the @argos-ci/puppeteer library to use Puppeteer commands and utilities for Argos visual testing.

npm version npm dm npm dt

Install

npm install --save-dev @argos-ci/puppeteer

Usage

The argosScreenshot command to stabilizes the UI before taking a screenshot.

argosScreenshot(page, name[, options])

import { puppeteer } from 'puppeteer';
import { argosScreenshot } from '@argos/puppeteer';

async puppeteerScreenshot(url) => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://my-site.com/', { waitUntil: 'networkidle2' });
await argosScreenshot(page, 'home');

await browser.close();
};

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
<!-- Hide a div from a screenshot -->
<div id="clock" data-visual-test="transparent">...</div>