percy/percy-playwright

Playwright client library for visual testing with Percy

@percy/playwright

Percy visual testing for Playwright.

Installation

$ 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: '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: 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

percy-playwright's Issues

Percy timeouts waiting for "load" event but gives no information about active requests

The problem

Our tests are failing quite frequently due to error Navigation failed: Timed out waiting for the page load event.
From what I see log is supposed to contain active requests but there are none including, giving me no information about what might be wrong.

How to debug this problem?

Environment

• Node version: 16.18.0
• @percy/cli version: ^1.27.3
• Version of Percy SDK you’re using: @percy/playwright : 1.0.4
• OS version: ubuntu 20.04, github action runner 2.311

Details

Our test is failing and "Active requests:" gives no information.

Debug logs

[percy:core:snapshot] - url: http://localhost:3000/chats/R9DQ9NCEEO/PKJBMOKFYA (0ms)
[percy:core:snapshot] - widths: 1920px (0ms)
[percy:core:snapshot] - minHeight: 1080px (0ms)
[percy:core:snapshot] - enableJavaScript: false (0ms)
[percy:core:snapshot] - cliEnableJavaScript: true (0ms)
[percy:core:snapshot] - disableShadowDOM: false (0ms)
[percy:core:snapshot] - discovery.allowedHostnames: localhost, localhost, cdn.livechatinc.com (0ms)
[percy:core:snapshot] - clientInfo: @percy/playwright/1.0.4 (0ms)
[percy:core:snapshot] - environmentInfo: @percy/playwright/1.0.4 (0ms)
[percy:core:snapshot] - domSnapshot: true (0ms)
[percy:core] Discovering resources: Chats | Chat transfer modal (1ms)
[percy:core] Asset discovery Browser Page enable JS: false (0ms)
[percy:core:page] Page created (4ms)
[percy:core:page] Resize page to 1920x1080 @1x (23ms)
[percy:core:page] Navigate to: http://localhost:3000/chats/R9DQ9NCEEO/PKJBMOKFYA (2ms)
[percy:core:page] Page closed (3799ms)
[percy:core] Encountered an error taking snapshot: Chats | Chat transfer modal (1ms)
[percy:core] Error: Navigation failed: Timed out waiting for the page load event

  Active requests:

    at Network._throwTimeoutError (file:///runner/_work/my.livechatinc.com/my.livechatinc.com/node_modules/@percy/core/dist/network.js:105:11)
    at Page.goto (file:///runner/_work/my.livechatinc.com/my.livechatinc.com/node_modules/@percy/core/dist/page.js:[97](https://github.com/livechat/my.livechatinc.com/actions/runs/6945890768/job/18896519627?pr=19548#step:11:98):20)
    at async captureSnapshotResources (file:///runner/_work/my.livechatinc.com/my.livechatinc.com/node_modules/@percy/core/dist/discovery.js:177:3)
    at async Object.task (file:///runner/_work/my.livechatinc.com/my.livechatinc.com/node_modules/@percy/core/dist/discovery.js:333:7)
    at async generatePromise (file:///runner/_work/my.livechatinc.com/my.livechatinc.com/node_modules/@percy/core/dist/utils.js:121:115) (0ms)

Code to reproduce issue

Unable to share.

Screenshots inside Shadow DOM are not taken successfully

The problem

I am facing issues when taking screenshots on a site which contains a Shadow DOM element.

Environment

• Node version: v14.21.1
• @percy/cli version: 1.21.0
• Version of Percy SDK you’re using: 1.0.4
• If needed, a build or snapshot ID: https://percy.io/215ec123/Global-Simulation-Tool---Dev-v2/builds/26147666/changed/1457276384?browser=safari&browser_ids=33%2C34%2C35%2C36&subcategories=unreviewed%2Cchanges_requested&viewLayout=side-by-side&viewMode=new&width=1280&widths=1280
• OS version: Ubuntu 20.04.4 LTS
• Type of shell command-line [interface]: zsh

Details

As you can see in the attached code, I am taking two screenshots. Both screenshots are targeting same HTML element, which is contained into a SHADOW root.

First screenshot is taken successfully (except for the black circle being displayed) as you can see in attached build. However, the second screenshot does not display anything. It is quite bizarre, since screenshot is taken to the same element.

I have been researching, and seems taking screenshots of Shadow DOM element is achievable. https://docs.percy.io/docs/shadow-dom

Additionally, I have replicated same code into Cypress, and got exactly same result

Debug logs

[percy:cli:exec] Warning: Missing command separator (--), some command options may not work as expected (0ms)
[percy:config] Config file not found (115ms)
[percy:client] Creating a new build... (49ms)
[percy:core:browser] Launching browser (1142ms)
[percy:core:browser] Browser connected [143875]: HeadlessChrome/96.0.4664.0 (118ms)
[percy:core] Percy has started! (2ms)
[percy:cli:exec] Running "playwright test tests/" (1ms)

Running 1 test using 1 worker
[1/1] [chromium] › example.spec.ts:6:1 › Calculator snapshots
[percy:core:snapshot] --------- (11928ms)
[percy:core:snapshot] Received snapshot: First snapshot (0ms)
[percy:core:snapshot] - url: https://dev.appgile.com/GlobalCarsTestPage/?country=GB&assetId=IEGR30FIE6WPTA4&assetPrice=59000&model=Grenadier&fsActive=true&loanType=LoanballoonKM&deposit=5900&cookie=true&scripturl=https:%2F%2Fservices.santanderconsumer.com%2Fquoting-tool%2Fscf-plugin.js%3FpluginId%3Da3c00835-e6d7-4565-a311-048af602c448 (0ms)
[percy:core:snapshot] - scope: scf-quoting (0ms)
[percy:core:snapshot] - widths: 1280px (0ms)
[percy:core:snapshot] - minHeight: 1024px (0ms)
[percy:core:snapshot] - disableShadowDOM: false (0ms)
[percy:core:snapshot] - discovery.allowedHostnames: dev.appgile.com (0ms)
[percy:core:snapshot] - clientInfo: @percy/playwright/1.0.4 (1ms)
[percy:core:snapshot] - environmentInfo: @percy/playwright/1.0.4 (0ms)
[percy:core:snapshot] - domSnapshot: true (0ms)
[percy:core] Discovering resources: First snapshot (3ms)
[percy:core:page] Page created (6ms)
[percy:core:page] Resize page to 1280x1024 @1x (55ms)
[percy:core:page] Navigate to: https://dev.appgile.com/GlobalCarsTestPage/?country=GB&assetId=IEGR30FIE6WPTA4&assetPrice=59000&model=Grenadier&fsActive=true&loanType=LoanballoonKM&deposit=5900&cookie=true&scripturl=https:%2F%2Fservices.santanderconsumer.com%2Fquoting-tool%2Fscf-plugin.js%3FpluginId%3Da3c00835-e6d7-4565-a311-048af602c448 (3ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/GlobalCarsTestPage/?country=GB&assetId=IEGR30FIE6WPTA4&assetPrice=59000&model=Grenadier&fsActive=true&loanType=LoanballoonKM&deposit=5900&cookie=true&scripturl=https:%2F%2Fservices.santanderconsumer.com%2Fquoting-tool%2Fscf-plugin.js%3FpluginId%3Da3c00835-e6d7-4565-a311-048af602c448 (37ms)
[percy:core:discovery] - Serving root resource (0ms)
[percy:core:discovery] Handling request: https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap (29ms)
[percy:core:discovery] Handling request: https://fonts.googleapis.com/icon?family=Material+Icons (1ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/GlobalCarsTestPage/styles.css (0ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/GlobalCarsTestPage/assets/img/scf-logo.svg (7ms)
[percy:core:discovery] Handling request: https://www.googletagmanager.com/ns.html?id=GTM-WW8K456 (6ms)
[percy:core:discovery] Handling request: https://www.googletagmanager.com/ns.html?id=GTM-5M4P447 (2ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/__serialized__/_ye9xmjg6g.css (24ms)
[percy:core:discovery] - Resource cache hit (0ms)
[percy:core:discovery] Processing resource: https://www.googletagmanager.com/ns.html?id=GTM-WW8K456 (183ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Handling request: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderText-Regular.woff (266ms)
[percy:core:discovery] Handling request: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderHeadline-Regular.woff (847ms)
[percy:core:discovery] Handling request: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderText-Bold.woff (1ms)
[percy:core:discovery] Processing resource: https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap (0ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://fonts.googleapis.com/icon?family=Material+Icons (1ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://dev.appgile.com/GlobalCarsTestPage/assets/img/scf-logo.svg (6ms)
[percy:core:discovery] Processing resource: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderText-Regular.woff (6ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://dev.appgile.com/GlobalCarsTestPage/styles.css (5ms)
[percy:core:discovery] Handling request: https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2 (437ms)
[percy:core:discovery] Handling request: https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2 (1ms)
[percy:core:discovery] - sha: 571028ba8efcf458391da7b28fdecc04b22fcc0c962907822d7b82db0a631889 (8ms)
[percy:core:discovery] - mimetype: image/svg+xml (0ms)
[percy:core:discovery] - sha: 829b926688e708555282e7f567bcfcff69f28dccfde9a8da44a7ee22e10be305 (8ms)
[percy:core:discovery] - mimetype: text/css (0ms)
[percy:core:discovery] Processing resource: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderHeadline-Regular.woff (9ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderText-Bold.woff (3ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://www.googletagmanager.com/ns.html?id=GTM-5M4P447 (42ms)
[percy:core:discovery] - Skipping remote resource (1ms)
[percy:core:discovery] Processing resource: https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2 (79ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2 (31ms)
[percy:core:discovery] - Skipping remote resource (1ms)
[percy:core:page] Page navigated (5ms)
[percy:core:discovery] Wait for 100ms idle (3ms)
[percy:core] Snapshot taken: First snapshot (102ms)
[percy:client] Creating snapshot: First snapshot... (1ms)
[percy:core:page] Page closed (6ms)
[percy:client] Uploading resources for 26148950... (316ms)
[percy:client] Uploading resource: /percy.1679668197054.log... (1ms)
[percy:client] Uploading resource: https://dev.appgile.com/GlobalCarsTestPage/?country=GB&assetId=IEGR30FIE6WPTA4&assetPrice=59000&model=Grenadier&fsActive=true&loanType=LoanballoonKM&deposit=5900&cookie=true&scripturl=https:%2F%2Fservices.santanderconsumer.com%2Fquoting-tool%2Fscf-plugin.js%3FpluginId%3Da3c00835-e6d7-4565-a311-048af602c448... (1ms)
[percy:client] Finalizing snapshot 1457349132... (1408ms)
[percy:core:snapshot] --------- (3476ms)
[percy:core:snapshot] Received snapshot: Second snapshot full page (0ms)
[percy:core:snapshot] - url: https://dev.appgile.com/GlobalCarsTestPage/?country=GB&assetId=IEGR30FIE6WPTA4&assetPrice=59000&model=Grenadier&fsActive=true&loanType=LoanballoonKM&deposit=5900&cookie=true&scripturl=https:%2F%2Fservices.santanderconsumer.com%2Fquoting-tool%2Fscf-plugin.js%3FpluginId%3Da3c00835-e6d7-4565-a311-048af602c448 (1ms)
[percy:core:snapshot] - widths: 1280px (0ms)
[percy:core:snapshot] - minHeight: 1024px (0ms)
[percy:core:snapshot] - disableShadowDOM: false (0ms)
[percy:core:snapshot] - discovery.allowedHostnames: dev.appgile.com (0ms)
[percy:core:snapshot] - clientInfo: @percy/playwright/1.0.4 (0ms)
[percy:core:snapshot] - environmentInfo: @percy/playwright/1.0.4 (0ms)
[percy:core:snapshot] - domSnapshot: true (0ms)
[percy:core] Discovering resources: Second snapshot full page (1ms)
[percy:core:page] Page created (3ms)
[percy:core:page] Resize page to 1280x1024 @1x (42ms)
[percy:core:page] Navigate to: https://dev.appgile.com/GlobalCarsTestPage/?country=GB&assetId=IEGR30FIE6WPTA4&assetPrice=59000&model=Grenadier&fsActive=true&loanType=LoanballoonKM&deposit=5900&cookie=true&scripturl=https:%2F%2Fservices.santanderconsumer.com%2Fquoting-tool%2Fscf-plugin.js%3FpluginId%3Da3c00835-e6d7-4565-a311-048af602c448 (4ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/GlobalCarsTestPage/?country=GB&assetId=IEGR30FIE6WPTA4&assetPrice=59000&model=Grenadier&fsActive=true&loanType=LoanballoonKM&deposit=5900&cookie=true&scripturl=https:%2F%2Fservices.santanderconsumer.com%2Fquoting-tool%2Fscf-plugin.js%3FpluginId%3Da3c00835-e6d7-4565-a311-048af602c448 (4ms)
[percy:core:discovery] - Serving root resource (1ms)
[percy:core:discovery] Handling request: https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap (32ms)
[percy:core:discovery] Handling request: https://fonts.googleapis.com/icon?family=Material+Icons (1ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/GlobalCarsTestPage/styles.css (2ms)
[percy:core:discovery] - Resource cache hit (0ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/GlobalCarsTestPage/assets/img/scf-logo.svg (9ms)
[percy:core:discovery] - Resource cache hit (2ms)
[percy:core:discovery] Handling request: https://www.googletagmanager.com/ns.html?id=GTM-WW8K456 (3ms)
[percy:core:discovery] Handling request: https://www.googletagmanager.com/ns.html?id=GTM-5M4P447 (7ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/__serialized__/_y6bs6lde8.css (24ms)
[percy:core:discovery] - Resource cache hit (1ms)
[percy:core:discovery] Processing resource: https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap (25ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://fonts.googleapis.com/icon?family=Material+Icons (1ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Handling request: https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2 (655ms)
[percy:core:discovery] Handling request: https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2 (0ms)
[percy:core:discovery] Handling request: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderText-Regular.woff (1ms)
[percy:core:discovery] Handling request: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderHeadline-Bold.woff (0ms)
[percy:core:discovery] Handling request: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderText-Bold.woff (0ms)
[percy:core:discovery] Processing resource: https://www.googletagmanager.com/ns.html?id=GTM-WW8K456 (15ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://www.googletagmanager.com/ns.html?id=GTM-5M4P447 (0ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderText-Regular.woff (111ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderText-Bold.woff (4ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderHeadline-Bold.woff (0ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2 (4ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2 (43ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:page] Page navigated (10ms)
[percy:core:discovery] Wait for 100ms idle (1ms)
[percy:core] Snapshot taken: Second snapshot full page (102ms)
[percy:client] Creating snapshot: Second snapshot full page... (0ms)
[percy:core:page] Page closed (5ms)
[percy:core:snapshot] --------- (96ms)
[percy:core:snapshot] Received snapshot: Second snapshot for element (1ms)
[percy:core:snapshot] - url: https://dev.appgile.com/GlobalCarsTestPage/?country=GB&assetId=IEGR30FIE6WPTA4&assetPrice=59000&model=Grenadier&fsActive=true&loanType=LoanballoonKM&deposit=5900&cookie=true&scripturl=https:%2F%2Fservices.santanderconsumer.com%2Fquoting-tool%2Fscf-plugin.js%3FpluginId%3Da3c00835-e6d7-4565-a311-048af602c448 (0ms)
[percy:core:snapshot] - scope: scf-quoting (0ms)
[percy:core:snapshot] - widths: 1280px (0ms)
[percy:core:snapshot] - minHeight: 1024px (1ms)
[percy:core:snapshot] - disableShadowDOM: false (0ms)
[percy:core:snapshot] - discovery.allowedHostnames: dev.appgile.com (0ms)
[percy:core:snapshot] - clientInfo: @percy/playwright/1.0.4 (0ms)
[percy:core:snapshot] - environmentInfo: @percy/playwright/1.0.4 (0ms)
[percy:core:snapshot] - domSnapshot: true (1ms)
[percy:core] Discovering resources: Second snapshot for element (2ms)
[percy:core:page] Page created (6ms)
[percy:core:page] Resize page to 1280x1024 @1x (47ms)
[percy:core:page] Navigate to: https://dev.appgile.com/GlobalCarsTestPage/?country=GB&assetId=IEGR30FIE6WPTA4&assetPrice=59000&model=Grenadier&fsActive=true&loanType=LoanballoonKM&deposit=5900&cookie=true&scripturl=https:%2F%2Fservices.santanderconsumer.com%2Fquoting-tool%2Fscf-plugin.js%3FpluginId%3Da3c00835-e6d7-4565-a311-048af602c448 (4ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/GlobalCarsTestPage/?country=GB&assetId=IEGR30FIE6WPTA4&assetPrice=59000&model=Grenadier&fsActive=true&loanType=LoanballoonKM&deposit=5900&cookie=true&scripturl=https:%2F%2Fservices.santanderconsumer.com%2Fquoting-tool%2Fscf-plugin.js%3FpluginId%3Da3c00835-e6d7-4565-a311-048af602c448 (3ms)
[percy:core:discovery] - Serving root resource (0ms)
[percy:core:discovery] Handling request: https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap (38ms)
[percy:core:discovery] Handling request: https://fonts.googleapis.com/icon?family=Material+Icons (0ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/GlobalCarsTestPage/styles.css (1ms)
[percy:core:discovery] - Resource cache hit (0ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/GlobalCarsTestPage/assets/img/scf-logo.svg (10ms)
[percy:core:discovery] - Resource cache hit (0ms)
[percy:core:discovery] Handling request: https://www.googletagmanager.com/ns.html?id=GTM-WW8K456 (12ms)
[percy:core:discovery] Handling request: https://www.googletagmanager.com/ns.html?id=GTM-5M4P447 (2ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/__serialized__/_bt7reynsc.css (25ms)
[percy:core:discovery] - Resource cache hit (1ms)
[percy:core:discovery] Processing resource: https://fonts.googleapis.com/icon?family=Material+Icons (19ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap (1ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:client] Uploading resources for 26148950... (51ms)
[percy:client] Uploading resource: https://dev.appgile.com/GlobalCarsTestPage/?country=GB&assetId=IEGR30FIE6WPTA4&assetPrice=59000&model=Grenadier&fsActive=true&loanType=LoanballoonKM&deposit=5900&cookie=true&scripturl=https:%2F%2Fservices.santanderconsumer.com%2Fquoting-tool%2Fscf-plugin.js%3FpluginId%3Da3c00835-e6d7-4565-a311-048af602c448... (0ms)
[percy:client] Uploading resource: /percy.1679668203373.log... (1ms)
[percy:core:discovery] Handling request: https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2 (643ms)
[percy:core:discovery] Handling request: https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2 (1ms)
[percy:core:discovery] Handling request: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderText-Regular.woff (0ms)
[percy:core:discovery] Handling request: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderHeadline-Bold.woff (1ms)
[percy:core:discovery] Handling request: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderText-Bold.woff (0ms)
[percy:core:discovery] Processing resource: https://www.googletagmanager.com/ns.html?id=GTM-WW8K456 (16ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://www.googletagmanager.com/ns.html?id=GTM-5M4P447 (1ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2 (32ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2 (5ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:client] Finalizing snapshot 1457349184... (26ms)
[percy:core:discovery] Processing resource: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderText-Regular.woff (15ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderText-Bold.woff (6ms)
[percy:core:discovery] - Skipping remote resource (2ms)
[percy:core:discovery] Processing resource: https://services.santanderconsumer.com/quoting-tool/UI/assets/fonts/SantanderHeadline-Bold.woff (52ms)
[percy:core:discovery] - Skipping remote resource (1ms)
[percy:core:page] Page navigated (9ms)
[percy:core:discovery] Wait for 100ms idle (1ms)
[percy:core] Snapshot taken: Second snapshot for element (100ms)
[percy:client] Creating snapshot: Second snapshot for element... (1ms)
  1 passed (21.4s)

To open last HTML report run:

  npx playwright show-report

[percy:client] Uploading resources for 26148950... (320ms)
[percy:client] Uploading resource: /percy.1679668204611.log... (1ms)
[percy:client] Uploading resource: https://dev.appgile.com/GlobalCarsTestPage/?country=GB&assetId=IEGR30FIE6WPTA4&assetPrice=59000&model=Grenadier&fsActive=true&loanType=LoanballoonKM&deposit=5900&cookie=true&scripturl=https:%2F%2Fservices.santanderconsumer.com%2Fquoting-tool%2Fscf-plugin.js%3FpluginId%3Da3c00835-e6d7-4565-a311-048af602c448... (0ms)
[percy:client] Finalizing snapshot 1457349208... (754ms)
[percy:core:browser] Closing browser (286ms)
[percy:core:browser] Browser closed (51ms)
[percy:client] Finalizing build 26148950... (0ms)
[percy:core] Finalized build #34: https://percy.io/215ec123/Global-Simulation-Tool---Dev-v2/builds/26148950 (250ms)

Code to reproduce issue

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



test('Calculator snapshots', async () => {
  const URL = 'https://dev.appgile.com/GlobalCarsTestPage/?country=GB&assetId=IEGR30FIE6WPTA4&assetPrice=59000&model=Grenadier&fsActive=true&loanType=LoanballoonKM&deposit=5900&cookie=true&scripturl=https:%2F%2Fservices.santanderconsumer.com%2Fquoting-tool%2Fscf-plugin.js%3FpluginId%3Da3c00835-e6d7-4565-a311-048af602c448'

  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto(URL, { waitUntil: 'networkidle' });
  await page.locator('text=Test now').click()
  await page.waitForTimeout(7000)

  await percySnapshot(page, 'First snapshot', { scope: 'scf-quoting', widths: [1280] })


  await page.locator('div.scf-products-tabs__link').click()
  await page.waitForTimeout(5000)
  await percySnapshot(page, 'Second snapshot full page', { widths: [1280] })
  await percySnapshot(page, 'Second snapshot for element', { scope: 'scf-quoting', widths: [1280] })
});

static.ignore option doesn't work

The problem

The static.ignore option from config doesn't work as expected and how is explained in the documentation

Environment

• Node version:
• @percy/cli version: 1.28.0
• Version of Percy SDK you’re using:
• If needed, a build or snapshot ID:
• OS version: mac os Ventura 13.0
• Type of shell command-line [interface]: iTerm

Details

config file:

version: 2
percy:
  defer-uploads: true
snapshot:
  minHeight: 2000
  percyCSS: ""
  enable-javascript: false
  disableShadowDOM: false
  percy-css: ""
discovery:
  allowedHostnames: []
  disallowedHostnames: []
  networkIdleTimeout: 500
upload:
  files: "**/*.{png,jpg,jpeg,gif}"
  ignore: '**/*.{css,js}'
  stripExtensions: false
static:
  base-url: /example/
  ignore: '**/*.{css,js}'

Log

[percy] Invalid config:
[percy] - static.ignore: unknown property
[Percy] Percy has started!

percy-playwright still broken after 1.0.1 push

The problem

Unable to run percy-playwright

Environment

https://app.circleci.com/pipelines/github/nasa/openmct/9655/workflows/82f71654-f5bc-4f65-882c-b8f787e746e9/jobs/30919

Details

There is a broken transitive dependency somewhere

Debug logs

[email protected] test:e2e:ci
> npx playwright test --config=e2e/playwright-ci.config.js --project=chrome smoke default condition timeConductor


Running 6 tests using 2 workers


Error [ERR_REQUIRE_ESM]: require() of ES Module /root/project/node_modules/@percy/sdk-utils/dist/index.js from /root/project/node_modules/@percy/playwright/index.js not supported.
Instead change the require of /root/project/node_modules/@percy/sdk-utils/dist/index.js in /root/project/node_modules/@percy/playwright/index.js to a dynamic import() which is available in all CommonJS modules.

   at ../../node_modules/@percy/playwright/index.js:1

> 1 | const utils = require('@percy/sdk-utils');
    |               ^
  2 |
  3 | // Collect client and environment information
  4 | const sdkPkg = require('./package.json');

    at Object.<anonymous> (/root/project/node_modules/@percy/playwright/index.js:1:15)
    at Object.<anonymous> (/root/project/e2e/tests/visual/default.spec.js:36:23)
    at Loader._requireOrImport (/root/project/node_modules/@playwright/test/lib/loader.js:269:14)
    at Loader.loadTestFile (/root/project/node_modules/@playwright/test/lib/loader.js:139:18)
    at Runner._runFiles (/root/project/node_modules/@playwright/test/lib/runner.js:287:44)
    at async Runner._run (/root/project/node_modules/@playwright/test/lib/runner.js:223:12)
    at async TimeoutRunner.run (/root/project/node_modules/playwright-core/lib/utils/async.js:38:14)
    at async raceAgainstTimeout (/root/project/node_modules/playwright-core/lib/utils/async.js:85:15)
    at async Runner.runAllTests (/root/project/node_modules/@playwright/test/lib/runner.js:180:20)
    at async runTests (/root/project/node_modules/@playwright/test/lib/cli.js:175:18)
    at async Command.<anonymous> (/root/project/node_modules/@playwright/test/lib/cli.js:74:7)
::error ::Error [ERR_REQUIRE_ESM]: require() of ES Module /root/project/node_modules/@percy/sdk-utils/dist/index.js from /root/project/node_modules/@percy/playwright/index.js not supported.%0AInstead change the require of /root/project/node_modules/@percy/sdk-utils/dist/index.js in /root/project/node_modules/@percy/playwright/index.js to a dynamic import() which is available in all CommonJS modules.%0A%0A   at ../../node_modules/@percy/playwright/index.js:1%0A%0A> 1 | const utils = require('@percy/sdk-utils');%0A    |               ^%0A  2 |%0A  3 | // Collect client and environment information%0A  4 | const sdkPkg = require('./package.json');%0A%0A    at Object.<anonymous> (/root/project/node_modules/@percy/playwright/index.js:1:15)%0A    at Object.<anonymous> (/root/project/e2e/tests/visual/default.spec.js:36:23)%0A    at Loader._requireOrImport (/root/project/node_modules/@playwright/test/lib/loader.js:269:14)%0A    at Loader.loadTestFile (/root/project/node_modules/@playwright/test/lib/loader.js:139:18)%0A    at Runner._runFiles (/root/project/node_modules/@playwright/test/lib/runner.js:287:44)%0A    at async Runner._run (/root/project/node_modules/@playwright/test/lib/runner.js:223:12)%0A    at async TimeoutRunner.run (/root/project/node_modules/playwright-core/lib/utils/async.js:38:14)%0A    at async raceAgainstTimeout (/root/project/node_modules/playwright-core/lib/utils/async.js:85:15)%0A    at async Runner.runAllTests (/root/project/node_modules/@playwright/test/lib/runner.js:180:20)%0A    at async runTests (/root/project/node_modules/@playwright/test/lib/cli.js:175:18)%0A    at async Command.<anonymous> (/root/project/node_modules/@playwright/test/lib/cli.js:74:7)


  6 skipped
::notice title=🎭 Playwright Run Summary::  6 skipped

Exited with code exit status 1

Code to reproduce issue

npm install percy-playwright npm run playwright-test

Snapshot does not include #shadow content

The problem

I am taken a snapshot for a website which has injected a shadow-root element. Percy snapshot is taken, and uploaded into Percy successfully, however content contained into shadow-root element is not included into snapshot.

Environment

• Node version: v.14.18.0
• @percy/cli version: 1.2.1
• Version of Percy SDK you’re using: 1.0.1
• If needed, a build or snapshot ID: 18495557
• OS version: Ubuntu 20.04.4 LTS
• Type of shell command-line [interface]: zsh

Debug logs

[percy:cli:exec] Warning: Missing command separator (--), some command options may not work as expected (0ms)
[percy:config] Config file not found (289ms)
[percy:client] Creating a new build... (79ms)
[percy:core:browser] Launching browser (656ms)
[percy:core:browser] Browser connected [95402]: HeadlessChrome/96.0.4664.0 (410ms)
[percy:core] Percy has started! (2ms)
[percy:cli:exec] Running "playwright test tests/" (1ms)

Running 1 test using 1 worker

Input is fetched from GOOGLE Sheet: https://docs.google.com/spreadsheets/d/19TmPk4V7U-VvCksq6CIK0LyLO5rr7rno_VJqa5isITk
     tests/e2e.spec.ts:20:9 › E2E testing for GWM › language: GWM-DE-DEV, environment DEV
[percy:core:snapshot] --------- (16364ms)
[percy:core:snapshot] Handling snapshot: snapshots/GWM/DEV/GWM-DE-DEV-test.png (0ms)
[percy:core:snapshot] - url: https://dev.appgile.com/GlobalCarsTestPage/?country=DE&assetId=1112&assetPrice=50000&model=TEST&cookie=true&scripturl=https:%2F%2Fdev.appgile.com%2FGlobalCars%2Fscf-plugin.js%3FpluginId%3D07341a8b-cf7b-4d90-84e2-84fa7a7c359d (0ms)
[percy:core:snapshot] - widths: 375px, 1280px (0ms)
[percy:core:snapshot] - minHeight: 1024px (0ms)
[percy:core:snapshot] - enableJavaScript: true (0ms)
[percy:core:snapshot] - discovery.allowedHostnames: dev.appgile.com (1ms)
[percy:core:snapshot] - clientInfo: @percy/playwright/1.0.1 (0ms)
[percy:core:snapshot] - environmentInfo: @percy/playwright/1.0.1 (0ms)
[percy:core:snapshot] - domSnapshot: true (0ms)
[percy:core:page] Page created (11ms)
[percy:core:page] Resize page to 375x1024 (39ms)
[percy:core:page] Navigate to: https://dev.appgile.com/GlobalCarsTestPage/?country=DE&assetId=1112&assetPrice=50000&model=TEST&cookie=true&scripturl=https:%2F%2Fdev.appgile.com%2FGlobalCars%2Fscf-plugin.js%3FpluginId%3D07341a8b-cf7b-4d90-84e2-84fa7a7c359d (4ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/GlobalCarsTestPage/?country=DE&assetId=1112&assetPrice=50000&model=TEST&cookie=true&scripturl=https:%2F%2Fdev.appgile.com%2FGlobalCars%2Fscf-plugin.js%3FpluginId%3D07341a8b-cf7b-4d90-84e2-84fa7a7c359d (67ms)
[percy:core:discovery] - Serving root resource (0ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/GlobalCarsTestPage/styles.98453f4fff4961ea46cb.css (33ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/GlobalCars/scf-plugin.js?pluginId=07341a8b-cf7b-4d90-84e2-84fa7a7c359d (3ms)
[percy:core:discovery] Request failed for https://dev.appgile.com/GlobalCars/scf-plugin.js?pluginId=07341a8b-cf7b-4d90-84e2-84fa7a7c359d: net::ERR_ABORTED (343ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/GlobalCarsTestPage/assets/img/scf-logo.svg (1ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/GlobalCarsTestPage/runtime.7b63b9fd40098a2e8207.js (28ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/GlobalCarsTestPage/polyfills.c7c856d96e667cac9a4a.js (3ms)
[percy:core:discovery] Handling request: https://dev.appgile.com/GlobalCarsTestPage/main.915857f50f858270351b.js (1ms)
[percy:core:discovery] Handling request: https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2 (593ms)
[percy:core:discovery] Handling request: https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2 (1ms)
[percy:core:discovery] Processing resource: https://dev.appgile.com/GlobalCarsTestPage/styles.98453f4fff4961ea46cb.css (4ms)
[percy:core:discovery] - sha: 9fc7b1b9cc0cfcfd75e274cf2be06433aec60a055afa4febd31e7061e145fed8 (1ms)
[percy:core:discovery] - mimetype: text/css (0ms)
[percy:core:discovery] Processing resource: https://dev.appgile.com/GlobalCarsTestPage/assets/img/scf-logo.svg (33ms)
[percy:core:discovery] - sha: 571028ba8efcf458391da7b28fdecc04b22fcc0c962907822d7b82db0a631889 (1ms)
[percy:core:discovery] - mimetype: image/svg+xml (0ms)
[percy:core:discovery] Processing resource: https://dev.appgile.com/GlobalCarsTestPage/runtime.7b63b9fd40098a2e8207.js (7ms)
[percy:core:discovery] - sha: 6c5acbb82a46a4971660f65131241dffcc28828f4dbd76b8ec7bab0b468250f8 (0ms)
[percy:core:discovery] - mimetype: application/javascript (0ms)
[percy:core:discovery] Processing resource: https://dev.appgile.com/GlobalCarsTestPage/polyfills.c7c856d96e667cac9a4a.js (65ms)
[percy:core:discovery] - sha: c104775bf9907c2756fbfa7fbc9084091ce99edcfe75e1287c4016ee08e6b508 (1ms)
[percy:core:discovery] - mimetype: application/javascript (1ms)
[percy:core:discovery] Processing resource: https://dev.appgile.com/GlobalCarsTestPage/main.915857f50f858270351b.js (559ms)
[percy:core:discovery] - sha: 7af2589f55a1435f1a15433fbaf1bd22c7f2e37889e93b3a15cc82681c27eee5 (7ms)
[percy:core:discovery] - mimetype: application/javascript (1ms)
[percy:core:discovery] Processing resource: https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2 (1ms)
[percy:core:discovery] - Skipping remote resource (0ms)
[percy:core:discovery] Processing resource: https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2 (0ms)
[percy:core:discovery] - Skipping remote resource (1ms)
[percy:core:page] Page navigated (7ms)
[percy:core:network] Wait for 100ms idle (2ms)
[percy:core:page] Resize page to 1280x1024 (100ms)
[percy:core:network] Wait for 100ms idle (56ms)
[percy:core] Snapshot taken: snapshots/GWM/DEV/GWM-DE-DEV-test.png (101ms)
[percy:client] Creating snapshot: snapshots/GWM/DEV/GWM-DE-DEV-test.png... (1ms)
  ✓  tests/e2e.spec.ts:20:9 › E2E testing for GWM › language: GWM-DE-DEV, environment DEV (12s)
[percy:client] Uploading resources for 18496470... (378ms)
[percy:client] Uploading resource: https://dev.appgile.com/GlobalCarsTestPage/?country=DE&assetId=1112&assetPrice=50000&model=TEST&cookie=true&scripturl=https:%2F%2Fdev.appgile.com%2FGlobalCars%2Fscf-plugin.js%3FpluginId%3D07341a8b-cf7b-4d90-84e2-84fa7a7c359d... (2ms)
[percy:client] Uploading resource: /percy.1653915508906.log... (1ms)


  1 passed (17s)

To open last HTML report run:

  npx playwright show-report

[percy:client] Finalizing snapshot 1037270028... (1404ms)
[percy:core:browser] Closing browser (353ms)
[percy:core:browser] Browser closed (62ms)
[percy:client] Finalizing build 18496470... (2ms)
[percy:core] Finalized build #35: https://percy.io/215ec123/GlobalCarsTest--Dev/builds/18496470

Code to reproduce issue

        const url = 'https://dev.appgile.com/GlobalCarsTestPage/?country=FR&assetId=UC20200101&assetPrice=25000&model=A4&assetImage=https%3A%2F%2Fdev.appgile.com%2Fcar.png&typeVehicle=Used&registrationDate=2012-12-01&vehiclePlate=2343GBK&vin=JNKCA21A4XT770979&brand=Audi&cookie=true&scripturl=https%3A%2F%2Fdev.appgile.com%2FGlobalCars%2Fscf-plugin.js%3FpluginId%3Ded7975f2-57f0-44ff-b575-f6a6b5687020';
        const browser = await chromium.launch();
        const context = await browser.newContext();
        const page = await context.newPage();
        await page.goto(url, { waitUntil: 'networkidle' });

        const testNowBtn = page.locator('text=Test now')
        await testNowBtn.scrollIntoViewIfNeeded()
        await testNowBtn.click()

        await page.waitForTimeout(10000)

        // await Iframe.takeElementSnapshot(elementPage, `snapshots/${PARTNER}/${ENVIROMENT}/${key}-test.png`)
        await percySnapshot(page, 'test.png')

[Tracefile] page.percySnapshot() does not appear in html or tracefile

The problem

We're debugging some problems in our CI related to percy and noticed that the percySnapshot() commands are not included in the HTML report nor the tracefile. nasa/openmct#5742

Environment

• Node version: 16
• @percy/cli version: 1.10.0
• Version of Percy SDK you’re using:
• If needed, a build or snapshot ID:
• OS version: focal ubuntu
• Type of shell command-line [interface]:

Details

Debug logs

https://circleci.com/api/v1.1/project/github/nasa/openmct/49758/output/106/0?file=true&allocation-id=631b813cddd6ab006df32154-0-build%2F3ADEF78B

Code to reproduce issue

This is all open source. You can see the html report and tracefiles on this run

https://app.circleci.com/pipelines/github/nasa/openmct/13274/workflows/44cd228c-30b6-4fc2-b237-40e08c290419/jobs/49758/steps

HTML Report
https://output.circle-artifacts.com/output/job/fe2433fc-3e3b-4702-8dce-d0f52b39d6f2/artifacts/0/html-test-results/index.html

Tracefile
https://output.circle-artifacts.com/output/job/fe2433fc-3e3b-4702-8dce-d0f52b39d6f2/artifacts/0/html-test-results/data/99a21c6592bc4170505b7f7d6766d65fed3cbe9c.zip

Please provide a method to get the build URL

As we are running these in CICD, it would be good to be able to print the URL to the console so that we can easily navigate from the CICD build to the Percy build.

E.g.

import * as percy from '@percy/playwright';

await percy.default(page, 'name', {});
console.log(`Percy build URL: ${await percy.buildUrl()}`);
//https://percy.io/<account id>/<project name>/builds/<build id>

[Network Interception] Network Interceptions for network requests with page.route() are ignored

The problem

I'm trying to add determinism to a test by intercepting a jpg with a page.route().

I have the test running successfully in playwright, but when the percy snapshots are taken, the original image appears.

Playwright image with page.route network interception:

Percy image:

Environment

• Node version: 18
• "@percy/cli": "1.27.4",
• "@percy/playwright": "1.0.4",
• "@playwright/test": "1.39.0",
• Version of Percy SDK you’re using:
• If needed, a build or snapshot ID: https://percy.io/b2e34b17/openmct/builds/32303035/changed/1773620404?browser=chrome&browser_ids=48&subcategories=unreviewed%2Cchanges_requested&viewLayout=overlay&viewMode=new&width=1024&widths=1024

Debug logs

[percy:core:page] Page created (5ms)
[percy:core:page] Resize page to 1024x1440 @1x (83ms)
[percy:core:page] Navigate to: http://localhost:8080/#/browse/mine/ebdc8678-979e-429b-b91c-ba43c7d86074/83000a3e-3cf2-47f1-ba07-3a7a1a02b524?tc.mode=fixed&tc.startBound=1693592063607&tc.endBound=1693593893607&tc.timeSystem=utc (2ms)
[percy:core:discovery] Handling request: http://localhost:8080/ (3ms)
[percy:core:discovery] - Serving root resource (0ms)
[percy:client] Uploading resources for 32303189... (17ms)
[percy:client] Uploading resource: /percy.1706157393731.log... (0ms)
[percy:client] Uploading resource: http://localhost:8080/... (1ms)
[percy:core:discovery] Handling request: http://localhost:8080/dist/espressoTheme.css (6ms)
[percy:core:discovery] - Resource cache hit (0ms)
[percy:core:discovery] Handling request: https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18739.jpg (12ms)
[percy:core:discovery] Handling request: http://render.percy.local/__serialized__/_ew6lo02u6.png (3ms)
[percy:core:discovery] - Resource cache hit (0ms)
[percy:core:discovery] Handling request: https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18739.jpg?w=100&h=100 (0ms)
[percy:core:discovery] Handling request: https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18740.jpg?w=100&h=100 (0ms)

Code to reproduce issue

test.describe.only('Visual - Example Imagery', () => {
  let exampleImagery;
  let parentLayout;

  test.beforeEach(async ({ page }) => {
    // Intercept images from the Example Imagery Plugin to replace with local files
    await page.route(
      (url) =>
        url.href.startsWith('https://www.nasa.gov/wp-content/uploads/static/history/') &&
        url.href.endsWith('.jpg') &&
        !url.href.endsWith('.jpg?w=100&h=100'),
      (route) => {
        const localImageBuffer = readFileSync('e2e/test-data/rick.jpg');
        route.fulfill({
          status: 200,
          contentType: 'image/jpeg',
          body: localImageBuffer
        });
      }
    );

    // Intercept thumbnails
    await page.route(
      (url) =>
        url.href.match(
          'https://www.nasa.gov/wp-content/uploads/static/history/.+\\.jpg\\?w=100&h=100'
        ),
      (route) => {
        const thumbImageBuffer = readFileSync('e2e/test-data/rick-thumb.jpg');
        route.fulfill({
          status: 200,
          contentType: 'image/jpeg',
          body: thumbImageBuffer
        });
      }
    );

    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });

    parentLayout = await createDomainObjectWithDefaults(page, {
      type: 'Display Layout',
      name: 'Parent Layout'
    });

    exampleImagery = await createDomainObjectWithDefaults(page, {
      type: 'Example Imagery',
      name: 'Example Imagery Test',
      parent: parentLayout.uuid
    });
  });

  test('Example Imagery in Fixed Time', async ({ page, theme }) => {
    await page.goto(exampleImagery.url, { waitUntil: 'domcontentloaded' });

    await expect(page.getByLabel('Image Wrapper')).toBeVisible();

    await percySnapshot(page, `Example Imagery in Fixed Time (theme: ${theme})`);

    await page.getByLabel('Image Wrapper').hover();

    await percySnapshot(page, `Example Imagery Hover in Fixed Time (theme: ${theme})`);
  });

Snapshots during retries cause errors

The problem

playwright supports retries but when a snapshot is taken in a retry, we get an error:

Error: The name of each snapshot must be unique, and this name already exists in the build: 'foo' -- You can fix this by passing a 'name' param when creating the snapshot. See the docs for more info on identifying snapshots for your specific client: https://percy.io/docs

Environment

• Node version:
• @percy/cli version: 1.0.0-beta.70
• Version of Percy SDK you’re using: percy/playwright 1.0.1
• If needed, a build or snapshot ID: n/a
• OS version: n/a
• Type of shell command-line [interface]: n/a

Details

It looks like there is work that was merged into core related to this but I don't think the sdk supports using this functionality?

Other related discussions:

• percy/cli#281
• meinaart/cypress-plugin-snapshots#141

Code to reproduce issue

in playwright.config add retries: 2

in a test.spec.ts:

test('foo', async (page) => {
  snapshot(page, 'foo')
 throw new Error('run retry')
})

[Feature] Pin all dependencies in a percy-playwright so that builds aren't broken for days from a transitive dependency

We had a 4 day outtage due to percy/cli#856 . We pin our dependencies to avoid transitive dependency failures https://github.com/nasa/openmct/blob/d19088cec67066b15cec040d31a52c99c69882f0/package.json#L8

Can the percy-playwright dependency be updated with stricter dependency bumps to avoid the general class of transitive dependency failures?

This is far cheaper than investing in multi package dependency testing with the same level of coverage

Controlling asset discovery for relative URLs on pages that use the History API

I'm using Playwright and Percy on an app that uses the HTML5 History API to navigate between pages. It also contains some relative <link href="...">URLs for loading external CSS files. In browsers, these are resolved, once, when the page loads. If I make use of history.pushState() to trigger client-side-only navigations around the app, the browser doesn't try to re-resolve these relative to the new URL. However, if after such a navigation, I try to take a Percy snapshot, during asset discovery, the (original) serialized DOM has its relative CSS URLs resolved against the new URL, because that's what page.url() returns.

I have a hacky workaround for this in my own project right now, but I'm wondering whether this is something that it would be possible for this package to handle in some way. Even being able to pass in url as an option to percySnapshot() would help, but that's impossible right now, because it will get overridden by page.url(). Even better would be to determine (somehow) what URL the asset discovery phase should be resolving its relative URLs against, but I'm not sure that Playwright exposes such an API or how that would work.

Unable to take screenshot for single element

The problem

using scope to take screenshots in a single element but the error Object literal may only specify known properties, and 'scope' does not exist in type 'SnapshotOptions' in the return

Environment

• Node version:
• @percy/cli version: "@percy/cli": "^1.8.0"
• Version of Percy SDK you’re using: "@percy/playwright": "^1.0.4"
• If needed, a build or snapshot ID:
• OS version: MacOS
• Type of shell command-line [interface]:

Details

https://docs.percy.io/docs/screenshot-a-single-element

Debug logs

Argument of type '{ scope: string; }' is not assignable to parameter of type 'SnapshotOptions'.
Object literal may only specify known properties, and 'scope' does not exist in type 'SnapshotOptions'

Code to reproduce the issue

import percySnapshot from "@percy/playwright";
....
await percySnapshot(page, "name", { scope: '.cookie-banner' })