SyntaxError: '>input:-webkit-autofill' is not a valid selector

[alissalkvc]

Hi all, I'm using Material UI in my project, which has a few CSS rules with the pseudo-selector :-webkit-autofill.

All was good until a subdependency updated from v2.2.7 of this package. I started to get this error when running jest tests:

   SyntaxError: '>input:-webkit-autofill' is not a valid selector

     185 |       });
     186 |       it(‘tests', async () => {
   > 187 |         render(
         |               ^


     at emit (node_modules/nwsapi/src/nwsapi.js:557:17)
     at _querySelectorAll (node_modules/nwsapi/src/nwsapi.js:1501:9)
     at Object._querySelector [as first] (node_modules/nwsapi/src/nwsapi.js:1412:14)
     at HTMLDivElementImpl.querySelector (node_modules/jsdom/lib/jsdom/living/nodes/ParentNode-impl.js:69:44)
     at HTMLDivElement.querySelector (node_modules/jsdom/lib/jsdom/living/generated/Element.js:1094:58)
     at Array.Resolver (eval at compile (node_modules/nwsapi/src/nwsapi.js:760:17), <anonymous>:3:135)
     at match_assert (node_modules/nwsapi/src/nwsapi.js:1339:13)
     at Object._matches [as match] (node_modules/nwsapi/src/nwsapi.js:1357:16)
     at exports.matchesDontThrow (node_modules/jsdom/lib/jsdom/living/helpers/selectors.js:29:36)
     at matches (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:50:10)
     at node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:35:18
         at Array.forEach (<anonymous>)
     at handleSheet (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:26:13)
         at Array.forEach (<anonymous>)

Adding "nwsapi": "2.2.7" to my Yarn resolutions fixed the issue. I see the issue as soon as I start using v2.2.8, and still see the issue in v.2.2.10. I assume this selector should still be allowed and valid? The only spot I see this selector mentioned is https://github.com/dperini/nwsapi/blame/45e88dee2b02276834bd53584fe82fe031c51592/src/nwsapi.js#L90

thanks for all that you do and let me know if I can provide any additional information!

[dperini]

@alissalkvc
the problem is the first character in your selector.
The '>' symbol, in CSS Selectors syntax, is the direct child combinator:

>input

this is in effect an invalid selector and I believe any browser will treat it the same.
In this case the selector is starting with the '>' symbol which makes it missing left context.

Try removing the '>' at the beginning or add '*' in front of it to make it a valid selector.

Try it in browsers and you will see they treat the selector as invalid.
I hope this help you fix the exact syntax for what you need.

[otaviomad]

@dperini
Hey! We've also started having this problem recently.

The fact is that we're not using it as a standalone selector. It's part of a :has selector.

If we have, for example div:has(> span), we will only select divs that have an immediate child span. This selector isn't marked as invalid.

[dperini]

@alissalkvc & @otaviomad
at first I didn't understand it was a selector inside an ':has()' pseudo.
Now I got that and I am going to check why that functionality was lost.
You told that it worked correctly in release 2.2.7 is that correct ?

[otaviomad]

@dperini
Indeed! Forcing it to 2.2.7 makes it work again.

(We're having this on our own components. I'm unsure whether this issue is also applicable to Material UI)

[dperini]

@otaviomad @alissalkvc
I tested that selector and it doesn't work.
The problem, as outlined above, is the direct child '>' which misses left context.
If you have different results please copy here the code snippet working with 2.2.7.
Is jsdom automatically adding context (left or right) to the query after it realizes the mangled content ?

[alissalkvc]

It’s not quite as easy as just pasting when the code snippet works with 2.2.7 - the failure only happens when Jest tests are run using versions after 2.2.7. usually, I don’t see anything because tests are all passing, but with this error (anything over 2.2.7) I suddenly get errors like these:

‘’’
● Edit Recording Information › allows late dated date input

SyntaxError: '>input:-webkit-autofill' is not a valid selector

  619 |       </ThemeProvider>
  620 |     );
> 621 |     render(testEditDates);
      |           ^
  622 |

  at emit (node_modules/nwsapi/src/nwsapi.js:576:17)
  at _querySelectorAll (node_modules/nwsapi/src/nwsapi.js:1528:9)
  at Object._querySelector [as first] (node_modules/nwsapi/src/nwsapi.js:1437:14)
  at HTMLDivElementImpl.querySelector (node_modules/jsdom/lib/jsdom/living/nodes/ParentNode-impl.js:69:44)
  at HTMLDivElement.querySelector (node_modules/jsdom/lib/jsdom/living/generated/Element.js:1046:58)
  at Array.Resolver (eval at compile (node_modules/nwsapi/src/nwsapi.js:781:17), <anonymous>:3:136)
  at match_assert (node_modules/nwsapi/src/nwsapi.js:1364:13)
  at Object._matches [as match] (node_modules/nwsapi/src/nwsapi.js:1382:16)
  at exports.matchesDontThrow (node_modules/jsdom/lib/jsdom/living/helpers/selectors.js:29:36)
  at matches (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:50:10)
  at node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:35:18
      at Array.forEach (<anonymous>)
  at handleSheet (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:26:13)
      at Array.forEach (<anonymous>)
  at Object.exports.forEachMatchingSheetRuleOfElement (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:46:11)
  at getCascadedPropertyValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:62:11)
  at getSpecifiedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:80:19)
  at getComputedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:100:12)
  at getSpecifiedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:89:12)
  at getComputedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:100:12)
  at exports.getResolvedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:111:10)
  at node_modules/jsdom/lib/jsdom/browser/Window.js:815:41
      at Array.forEach (<anonymous>)
  at Window.getComputedStyle (node_modules/jsdom/lib/jsdom/browser/Window.js:814:13)
  at [node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:69:43](mailto:node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:69:43)
  at [node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:117:28](mailto:node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:117:28)
  at [node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:159:5](mailto:node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:159:5)


SyntaxError: '>input:-webkit-autofill' is not a valid selector

  461 |       expect(editButton).toBeTruthy();
  462 |       if (editButton) {
> 463 |         userEvent.click(editButton);
      |                   ^
  464 |       }
  465 |
  466 |       // Assert that the radio buttons are displayed.

  at emit (node_modules/nwsapi/src/nwsapi.js:576:17)
  at _querySelectorAll (node_modules/nwsapi/src/nwsapi.js:1528:9)
  at Object._querySelector [as first] (node_modules/nwsapi/src/nwsapi.js:1437:14)
  at HTMLDivElementImpl.querySelector (node_modules/jsdom/lib/jsdom/living/nodes/ParentNode-impl.js:69:44)
  at HTMLDivElement.querySelector (node_modules/jsdom/lib/jsdom/living/generated/Element.js:1046:58)
  at Array.Resolver (eval at compile (node_modules/nwsapi/src/nwsapi.js:781:17), <anonymous>:3:136)
  at match_assert (node_modules/nwsapi/src/nwsapi.js:1364:13)
  at Object._matches [as match] (node_modules/nwsapi/src/nwsapi.js:1382:16)
  at exports.matchesDontThrow (node_modules/jsdom/lib/jsdom/living/helpers/selectors.js:29:36)
  at matches (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:50:10)
  at node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:35:18
      at Array.forEach (<anonymous>)
  at handleSheet (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:26:13)
      at Array.forEach (<anonymous>)
  at Object.exports.forEachMatchingSheetRuleOfElement (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:46:11)
  at getCascadedPropertyValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:62:11)
  at getSpecifiedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:80:19)
  at getComputedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:100:12)
  at getSpecifiedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:89:12)
  at getComputedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:100:12)
  at exports.getResolvedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:111:10)
  at node_modules/jsdom/lib/jsdom/browser/Window.js:815:41
      at Array.forEach (<anonymous>)
  at Window.getComputedStyle (node_modules/jsdom/lib/jsdom/browser/Window.js:814:13)
  at [node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:69:43](mailto:node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:69:43)
  at [node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:117:28](mailto:node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:117:28)
  at [node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:159:5](mailto:node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:159:5)
  ‘’’

I’m not sure what changed in 2.2.8 that would have caused this selector to suddenly cause test failures?