Locate robust/reliable ancestor selectors to generate other selectors relative to

[twschiller]

For creation of selectors, we could take a look at the css-selector-generator implementation. It misses some very good ones. E.g., for many sites we could get a lot of leverage from finding an ancestor that has a known “nice” selector (e.g., an id or BEM block/entity) and then generating the selector relative to that

[fregante]

Can I have more details and examples? Having an actual page where this happens would speed it up considerably because I don't have to look for such cases across the web. Where did you find this?

for many sites we could get a lot of leverage from finding an ancestor that has a known “nice” selector (e.g., an id or BEM block/entity) and then generating the selector relative to that

[twschiller]

Here's a public page showing the general idea: https://www.reddit.com/r/NoStupidQuestions/comments/tmefj1/whats_the_smallest_hill_youre_willing_to_die_on/

Let's say you want to select the post title. You can't use h1, because that selector is not unique (there's 2 h1s. In this case, they both have the same text, but that wouldn't be true in general)

The post has a beautiful data-test-id="post-content" attribute. The classnames are all CSS module class names.

So, if I were to manually write the selector, I would write: [data-test-id="post-content"] h1

I think an MVP for this ticket would be the following logic:

• Walk the ancestors to find the closest element with an id-like attribute
• Generate a set of selectors relative to that root

Then, in future PRs we can also generate them relative to stable-looking class names. (Class names that are long, non-random, and unique on the page)

[twschiller]

Hi @fregante, were you able to look at the example I posted? I'd like to prioritize continuing with selector improvements