Comparison with prior art

[dandv]

I'm looking for a library to generate unique CSS selectors for DOM elements in an arbitrary page (see 1, 2, 3, 4).

In case you looked at existing alternatives before coding a new one from scratch, how does this library compare with @fczbkk's css-selector-generator, which started development before this one?

[fczbkk]

I have put together a simple comparsion of both libraries: https://jsfiddle.net/fczbkk/7thgz3b0/1/

There's some complex HTML structure. Both libraries go through all the elements and try to generate unique CSS selector for each of them. You can see the results in the JS console.

The main difference is that my library tries to optimize the CSS selectors, while @olivierrr's library generates the most complex CSS selector. For example, my library generated this selector header, while the other library generated this #wrap header.navbar.navbar-static-top:nth-child(1). These are both valid. The first one is shorter, the second one is longer, but very specific and it will probably work even when another HEADER element is added to the document.

Another thing: I didn't test for this, but I'm pretty sure that my library is slower. That's because it generates more variants of the CSS selector, tests their uniqueness, etc.

Both approaches have their pros and cons, I guess. It depends what exactly are you looking for.

One little thing, though: @olivierrr, because you generate descendant selectors, there are some cases, where the generated selector is not unique. For example this selector in the test: #main div.container:nth-child(1) div.main-content:nth-child(1) div.row:nth-child(1). Try to use Child selectors. They work fine in everything except IE6 and lower.