Playwright

👍
Covered in this doc

Integrating Percy with your Playwright tests

Installing and importing percySnapshot()

Calling and configuring percySnapshot(page, name, options)

percy-playwright on GitHub

Setup

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

Usage

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('http://example.com/', { waitUntil: 'networkidle' });
  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: https://percy.io/[your-project]
[percy] Running "node script.js"
[percy] Snapshot taken "Example Site"
[percy] Stopping percy...
[percy] Finalized build #1: https://percy.io/[your-project]
[percy] Done!

Configuration

percySnapshot(page, name[, options])

page (required) - A playwright page instance
name (required) - The snapshot name; must be unique to each snapshot
options - See per-snapshot configuration options