Improve CSS query engine for better ID and class matching

[inancgumus]

What?

Add \\ for each element ID CSS selector that contains a dot (.).

Why?

The current CSS selector engine (v0.51) cannot find the following element:

<input id="dotted.id" type="text" value="dotted" />

When given the following selector query (e.g.):

page.fill('#dotted.id', ...)

However, it can find the element if we query the element like so:

page.fill('#dotted\\.id', ...)

This is because the dot is interpreted as a class selector.

How?

Automatically add \\ for each ID selector that contains a dot.

Tasks

Tasks

Beta Give feedback

1. Improve CSS querier for ID and class matching #1384
   enhancement +1
   
2. Docs PR
3. TypeScript Definitions PR
4. Update the k6 release notes

Related PR(s)/Issue(s)

No response

[inancgumus]

I've changed my mind about this issue and will close it because automatically adding \\ can be problematic. It's because:

• One can mix an ID selector with a class selector.
• E.g.: #my.yours could mean an element with the id my and a class yours.
• Also note that it's a common browser feature: Chromium cannot also select element IDs that contain a dot without the \\ escaping.

A better strategy is to let users escape the dots in CSS queries themselves.