search

percy / percy-playwright

Playwright client library for visual testing with Percy
MIT License
17 stars 6 forks source link

Screenshots inside Shadow DOM are not taken successfully #199

Closed borecz closed 1 year ago

borecz commented 1 year ago

The problem

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

Environment

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] })
});
itsjwala commented 1 year ago

@borecz