Playwright
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)
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) - Aplaywrightpage instancename(required) - The snapshot name; must be unique to each snapshotoptions- See per-snapshot configuration options
Updated almost 2 years ago