Closed twschiller closed 2 years ago
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
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:
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)
Hi @fregante, were you able to look at the example I posted? I'd like to prioritize continuing with selector improvements
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