TypeError: Cannot read properties of null (reading 'cssRules')

[tmcconechy]

The problem

Upgraded from 1.18.0 to 1.20.1 and now get this error on most tests:

[percy] Could not take DOM snapshot "ids-data-grid-new-light"
[percy] Error: Evaluation failed: TypeError: Cannot read properties of null (reading 'cssRules')
    at styleSheetsMatch (pptr://__puppeteer_evaluation_script__:177:50)
    at serializeCSSOM (pptr://__puppeteer_evaluation_script__:210:15)
    at serializeElements (pptr://__puppeteer_evaluation_script__:465:9)
    at Object.serializeDOM (pptr://__puppeteer_evaluation_script__:504:7)
    at pptr://__puppeteer_evaluation_script__:3:23

Environment

• Node version:
• @percy/cli version: 1.20.1
• Version of Percy SDK you’re using:
• If needed, a build or snapshot ID: https://github.com/infor-design/enterprise-wc/actions/runs/4315837554/jobs/7530775761#step:10:267
• OS version: Unix/Mac
• Type of shell command-line [interface]: bash

Details

Example test https://github.com/infor-design/enterprise-wc/blob/main/test/ids-data-grid/ids-data-grid-percy-test.ts

Debug logs

https://github.com/infor-design/enterprise-wc/actions/runs/4315837554/jobs/7530775761#step:10:267

Code to reproduce issue

If needed:

• clone https://github.com/infor-design/enterprise-wc
• change "@percy/cli": "1.18.0", to "@percy/cli": "1.20.1", in package.json
• npm i && npm run test

[tmcconechy]

@itsjwala this fixed the cssRules error but i still cant use the latest version it gives some unknown errors now not showing up in the log https://github.com/infor-design/enterprise-wc/actions/runs/4365577412/jobs/7637547882#step:10:29623

Just mentioning it in case you have an idea. If not i can try to get verbose logs turned on (is that possible I forget) when i have more time and make a new issue.

[samarsault]

@tmcconechy I see the visual changes are happening due to javascript being enabled. Is there any reason for enabling it? (If its Shadow DOM, then we support it since 1.19.2+) We noticed that the visual errors are a result of javascript side effects. Can you try disabling it and running the builds?

[tmcconechy]

@samarsault i disabled it on https://github.com/infor-design/enterprise-wc/pull/1165 but it a) still has a lot of errors b) the images dont look correct anymore.

We do use shadowRoot (web components). But not sure i recall why we enabled it. I think support suggested it. Still this only is a problem moving up from 1.18.0

https://github.com/infor-design/enterprise-wc/actions/runs/4375912710

[samarsault]

@tmcconechy we see some unusual diffs in your build and will take a look. Can you try using the latest version setting enableJavascript:true and disableShadowDOM:true?

[tmcconechy]

@samarsault still doing some weird things https://github.com/infor-design/enterprise-wc/actions/runs/4397781859/jobs/7716169624 https://github.com/infor-design/enterprise-wc/pull/1165

I would think we want JS and shadowRoot since these are JS components and they use web components/shadowRoot

[tmcconechy]

@samarsault should i be using the support at browser stack instead? My concern is we can no longer update and use percy so might need to look at other options before renewing.

[samarsault]

@tmcconechy For the enableJavascript: false case, I see the following classes of visual changes in your build

• Date & Time changes in tables : These are expected because javascript is no longer running in the rendering environment
• Width changes: This can happen If you handle responsive changes in your javascript. See this doc for reference.

Also, is the cypress test failure happening because of percy? If yes, what is the error message?
If you still face any issue, please reach out through support. It would help us in prioritizng this.

Edit:
For the enableJavascript: true case, we've identified an issue with shadow dom + enableJavascript: true configuration. Fixing this in #1210

[tmcconechy]

ok thanks @samarsault cant seem to get it to work with any configuration i can come up with. We use JS and and its all web components so Js off is not an option (will show nothing). Shadow root is also needed, without it will show nothing on the page. This is the last build https://github.com/infor-design/enterprise-wc/pull/1165 every time it just comes up with errors on each test i cant figure out. So will log a support ticket for now. Cheers