fix(browser): Improve unique CSS selector generation

[zacharyvoase]

Fixes #6211

Description

Currently the User Interactivity API, which is required to interact with any elements via the browser, generates a unique CSS selector based on the element requested. However, there are two main cases where this fails:

• When an element on the path (anywhere from the top-level HTML down to the target element itself) has an ID containing special characters that need escaping, such as :; and
• When an element on the path has an ID containing uppercase letters. This is because CSS selectors are case-sensitive for HTML IDs and class names, yet the entire selector is currently lowercased before being sent to the browser engine.

I've added a test here that fails with the current code, and passes with the changes.

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
• Ideally, include a test that fails without this PR but passes with it.
• Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Tests

• Run the tests with pnpm test:ci.

Documentation

• If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

• Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

[netlify]

✅ Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	3c666be
🔍 Latest deploy log	https://app.netlify.com/sites/vitest-dev/deploys/66a814e60b199400084bc9fc
😎 Deploy Preview	https://deploy-preview-6243--vitest-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[zacharyvoase]

Here's the error before the fix is applied:

 FAIL  test/userEvent.test.ts > userEvent.click > clicks a button with complex HTML ID
Error: locator.click: Unexpected token "#" while parsing selector "html > body > #:r3: > #a:button"
Call log:
  - waiting for [data-vitest="true"] >> internal:control=enter-frame >> css=html > body > #:r3: > #a:button

[zacharyvoase]

I'm not sure what happened to the macos-14 webkit test, it looks like it may have been a timeout?

[sheremet-va]

Thank you! The test on Windows is flaky, ignore it for now

[sheremet-va]

Note: in the future we will be using Playwright locators directly: #6084