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
- Apuppeteer
page instancename
- The screenshot name; must be uniqueoptions
- See Page.screenshot command optionsoptions.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>