page.evaluate: TypeError: Cannot read properties of null (reading 'sheet') at serializeCSSOM

[branislav-remen]

The problem

After last update of @percy/cli I get error page.evaluate: TypeError: Cannot read properties of null (reading 'sheet') at serializeCSSOM when running percy exec ... script.

Environment

• Node version: 14.18.1
• @percy/cli version: 1.19.0-alpha.0
• Version of Percy SDK you’re using: "@percy/playwright": "1.0.4",
• If needed, a build or snapshot ID: -
• OS version: MacOS 12.6.2
• Type of shell command-line [interface]: shell
• Chromium Version 105.0.5195.19 (playwright build 1019)

Details

We are using component library which uses Shadow DOM. After upgrade of your CLI to try Shadow DOM support it is not working. The same code works with previous version of cli 1.17.0.

We are using Playwright test runner.
Running playwright test script (without percy exec) works. (playwright test visualRegression).

Debug logs

> percy exec -- playwright test visualRegression

[percy] Percy has started!
[percy] Running "playwright test visualRegression"

Running 24 tests using 1 worker

     1 [chromium] › src/tests/visualRegression.spec.ts:22:1 › Registrations page
  ✓  1 [chromium] › src/tests/visualRegression.spec.ts:22:1 › Registrations page (4s)
[percy] Could not take DOM snapshot "Registrations page-list"
[percy] Error: page.evaluate: TypeError: Cannot read properties of null (reading 'sheet')
    at serializeCSSOM (eval at evaluate (:192:30), <anonymous>:159:59)
    at Object.serializeDOM (eval at evaluate (:192:30), <anonymous>:502:9)
    at eval (eval at evaluate (:192:30), <anonymous>:3:23)
    at UtilityScript.evaluate (<anonymous>:194:17)
    at UtilityScript.<anonymous> (<anonymous>:1:44)
...

Code to reproduce issue

percy.yml:

version: 2
snapshot:
  widths:
    - 375
    - 1280
  minHeight: 1024
  percyCSS: "#debugModal, #debugBtn { display: none }"
discovery:
  allowedHostnames: [ ]
  disallowedHostnames: [ ]
  networkIdleTimeout: 100
upload:
  files: "**/*.{png,jpg,jpeg}"
  ignore: ""
  stripExtensions: false

test script: "test:percy": "percy exec -- playwright test visualRegression",

Example of test:

test('Add Main Registration page', async ({ page }, testInfo) => {
  await page.goto(`${getAppUrl()}/add-registration`, { waitUntil: 'networkidle' });

  await page.waitForSelector('.Wizard__SelectionWrapper');
  await percySnapshot(page, getScreenshotName(testInfo));
});

Playwright config (I also tried default config and it doesn't work):

import { PlaywrightTestConfig, devices } from '@playwright/test';

const config: PlaywrightTestConfig = {
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
      },
    },
  ],
};
export default config;

[samarsault]

@branislav-remen can you share a reproducible html page with shadow dom?

[branislav-remen]

@branislav-remen can you share a reproducible html page with shadow dom?

for example:
https://www.axa.ch/en/myaxa/company-registration.html#/

Heading (on top of the page) and Button (on bottom) use shadow dom.
Details about components used on this page can be found here: https://github.com/axa-ch-webhub-cloud/pattern-library

[itsjwala]

@branislav-remen can you give v1.19.1-alpha.0 a try?

[branislav-remen]

@itsjwala it works with v1.19.1-alpha.0 👍 Thank you. 👏

But I see some warnings not related to the topic of this issue:

1. [percy] Heads up! The current version of @percy/cli is more than 10 releases behind! 1.19.1-alpha.0 -> 1.19.0-alpha.0 - This message is confusing 😄
2. Stylesheet related warnings, but screenshots in Percy looks correctly (1:1 with real website).

Running 24 tests using 1 worker

     1 [chromium] › src/tests/visualRegression.spec.ts:28:1 › Registrations page
[percy] Snapshot taken: Registrations page-card
[percy] Encountered snapshot serialization warnings:
[percy] - stylesheet with attributes - [ data-name: axa-table-myaxa ] - was not serialized
  ✓  1 [chromium] › src/tests/visualRegression.spec.ts:28:1 › Registrations page (9s)
     2 [chromium] › src/tests/visualRegression.spec.ts:46:1 › Add Main Registration page
[percy] Encountered snapshot serialization warnings:
[percy] - stylesheet with attributes - [ data-name: axa-fieldset-myaxa ] - was not serialized
[percy] - stylesheet with attributes - [ data-name: axa-radio-myaxa ] - was not serialized
  ✓  2 [chromium] › src/tests/visualRegression.spec.ts:46:1 › Add Main Registration page (5s)
...

how can I rid of this second warning?

[itsjwala]

Hey @branislav-remen glad this is fixed for you.

1. we store Github releases in a file located at node_modules/@percy/cli/.releases (for Unix), I had forgotten to draft a release yesterday, just remove this cache file, and it will not show this warning message.

rm node_modules/@percy/cli/.releases

2. As part of v1.19.1-alpha.0 release we'd added this serialization warning message, currently there is no way via a flag to disable this warning message.

I'm closing this issue as the original 🐛 is fixed, please feel free to open another issue/discussion thread if you face any problems, and thanks for reporting the bug 😄 !