querySelector not work for attr whose value contains colon

[ilyydy]

Describe the bug
querySelector not work for attr whose value contains colon. But in browser, it will be ok.

To Reproduce

import { Window } from 'happy-dom';

const window = new Window();
const document = window.document;

document.body.innerHTML = `<meta ab="a:b"/>`;
const element = document.querySelector('[ab="a\\:b"]');
console.log(element !== null); // output false
const element1 = document.querySelector('[ab="a:b"]');
console.log(element1 !== null); // output false

Expected behavior
should find meta element

Screenshots
If applicable, add screenshots to help explain your problem.

Device:

• OS: win10
• Browser: chrome
• Version: 106

Additional context
Add any other context about the problem here.

[Pumpuli]

This is actually quite a big problem when happy-dom is used for testing React applications. That's because React's useId() hook returns strings which always seem to contain colon characters. And even if useId() is not used directly, for example Material UI's form field components use it internally. The typical use case for useId() is form controls and their labels:

function PasswordInput() {
  const suffix = useId();

  return (
    <>
      <label>
        Password:
        <input type="password" aria-describedby={`password-${suffix}`} />
      </label>
      <p id={`password-${suffix}`}>Should contain at least 18 characters.</p>
    </>
  );
}

The result of that is something like aria-describedby="password-:r5:" and id="password-:r5:". @testing-library/dom then tries to do .querySelector('[id="password-:r5:"]'), which yields null on happy-dom. The problem can be traced back to the regex that checks whether a selector has a pseudo class:

happy-dom/packages/happy-dom/src/query-selector/SelectorItem.ts

Lines 8 to 9 in 13bcfe7

	const PSUEDO_REGEXP =
	/(?<!\\):([a-zA-Z-]+)\(([0-9n+-]+|odd|even)\)|(?<!\\):not\(([^)]+)\)|(?<!\\):([a-zA-Z-]+)/g;

However, I'm not sure what's the best way to go about fixing this. Should the regex be made more complicated to make sure that an attribute selector is excluded?

[capricorn86]

Thank you for reporting @ilyydy and @Pumpuli ! 🙂

I believe that the query selector for [ab="a:b"] was fixed in v9.10.0.

I have now added support for using an escape character, so that the [ab="a\\:b"] query selector will work.

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v10.5.2