Use Argos with Playwright
Integrating Argos with your Playwright tests to enable visual testing on your application.
Playwright already offers a command to take screenshots. The official Argos Playwright 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/playwright @playwright/test
2. Use in your tests
argosScreenshot
command stabilizes the UI and takes a screenshot.
How to take a screenshot with argosScreenshot
command
import { test } from "@playwright/test";
import { argosScreenshot } from "@argos-ci/playwright";
test.describe("Homepage", () => {
test("take screenshot", async ({ page }) => {
await page.goto(TEST_URL);
await argosScreenshot(page, "homepage");
});
});
Screenshots are stored in ./screenshots
folder.
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
- Aplaywright
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>