Integrating Percy with your Playwright scripts


Covered in this doc

Integrating Percy with your Playwright tests
Installing and importing percySnapshot()
Calling and configuring percySnapshot(page, name, options)

TestTest Package StatusPackage Status


If you're not ready to integrate Percy, check out our 2-minute Playwright testing tutorial and example app with Percy for Playwright already added.

$ npm install --save-dev @percy/cli @percy/playwright


This is an example using the percySnapshot function. For other examples of playwright usage, see the Playwright docs.

const { chromium } = require('playwright');
const percySnapshot = require('@percy/playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('', { waitUntil: 'networkidle2' });
  await percySnapshot(page, 'Example Site');

  await browser.close();

Running the code above directly will result in the following logs:

$ node script.js
[percy] Percy is not running, disabling snapshots

When running with percy exec, and your project's PERCY_TOKEN, a new Percy build will be created and snapshots will be uploaded to your project.

$ export PERCY_TOKEN=[your-project-token]
$ percy exec -- node script.js
[percy] Percy has started!
[percy] Created build #1:[your-project]
[percy] Running "node script.js"
[percy] Snapshot taken "Example Site"
[percy] Stopping percy...
[percy] Finalized build #1:[your-project]
[percy] Done!


percySnapshot(page, name[, options])