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

tmcconechy commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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

percy / cli