Integrating Argos with Puppeteer for Visual Testing
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:
- Ensuring all images are fully loaded.
- Ensuring all fonts are rendered.
- Confirming the absence of any
aria-busy
(loading) elements on the page. - Concealing scrollbars.
- Obscuring text cursors or carets.
- Providing CSS utilities to simplify content hiding.
1. Setting Up
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 Overview
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 elementoptions.viewports
- Specifies the viewports for which to capture screenshots. See viewports configuration.
Helper Attributes for Visual Testing
For tailored visual testing, the data-visual-test
attributes provide control over how elements appear in Argos screenshots. This can be especially useful for obscuring or modifying elements with dynamic content, like dates.
[data-visual-test="transparent"]
: Renders the element transparent (visiblity: hidden
).[data-visual-test="removed"]
: Removes the element from view (display: none
).[data-visual-test="blackout"]
: Masks the element with a blackout effect.[data-visual-test-no-radius]
: Strips the border radius from the element.
Example: Using a helper attribute to hide a div from the captured screenshot:
<div id="clock" data-visual-test="transparent">...</div>
##Additional Resources