Snapshot does not include #shadow content

[lefado]

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')

[Robdel12]

Hey @lefado! This is expected for now. See percy/cli#280 for more info / tracking