Robustness comparison

[dandv]

First off, fantastic work on my request to compare this library with alternatives! In 6+ years of being active on GitHub, this is the best I've seen, by far, hands-down.

Besides speed and selector length, a critical attribute of generated selectors is robustness to changes in the page structure. The open-source Hypothes.is project has written an extensive piece on that at https://hypothes.is/blog/fuzzy-anchoring/ and they have some OSS repos too.

[fczbkk]

@dandv What exactly do you mean by robustness? How would you test it?

I read the article and it seems that what they do is out of scope of all tested libraries. They are targeting a specific snippet of text in the document. So they combine the CSS selector with a text selection range. How does this apply to libraries for generating just the CSS selectors?

[dandv]

By robustness I meant "robustness to changes in the page structure". Here's a blog post + solution that talks about that: http://www.timvasil.com/blog14/post/2014/02/24/Build-a-unique-selector-for-any-DOM-element-using-jQuery.aspx

For example, an nth-child() selector is less robust than an id-based selector. How to test and score this, is a good question.

[fczbkk]

Ok, I understand now. I'll try to think of some way to test it.

I suspect that my library will be the winner in robustness, because it:

• uses nth-child selector as a last resort
• tries to find minimum viable selector, so it doesn't include all the parents in the child-selector chain

I guess that the only way to increase the "robustness index" of CSS generator would be to not use child-selector if possible. But I have tried that, but performance was an issue. I could not find a way to do it effectively.

[dandv]

What would be some use cases when performance is critical?

My use case is similar to linklink.io (create a deep link to an arbitrary paragraph) or gottafix.it. In both cases, only one selector is generated per page, and the bottleneck is user input.

[fczbkk]

When you are really tring to optimize the CSS selectors, you have to check lots of various combinations for uniqueness. With every parent element of the target element, the complexity grows exponentialy. When I was doing tests on elements with 10 parents, it took around two seconds on my strong machine and the CPU usage went through the roof.

I think it could be done with some clever algorithm, that would filter out obviously wrong combinations before testing them. But I never really needed it, so I didn't even try to come up with something.

[dandv]

Worth adding an option then to control the optimization of selectors?

[fczbkk]

I think it would be better to figure out a way to do it correctly.