API option to generate more than one unique selector

[mnoorenberghe]

Sometimes you want to generate a selector that is unique for one page which will also be used on similar pages but without having access to all the other pages in advance it's hard to know if the unique selector generated will work on those pages e.g. it may be specific to the variation of the page it was generated on.

Example:

1. Generate the selector on product page 1 for the price
2. Try to use the same selector on other product pages

Since CSG currently only returns one unique selector, if it doesn't work on the other product pages then there isn't much you can do. If CSG generated a configurable # of unique selectors then all others could be tested on other similar pages to see which ones aren't unique to that specific page.

Following the example, we may get both .product-1-price and .price back instead of just .product-1-price which won't work for product N.

Would you consider adding a public API to specify how many unique selectors are desired?

[fczbkk]

Yes. What I'm actually working on is rewriting the mechanism for generating the selectors to be a generator function. I'd like to expose this generator as another method of the library. You should then be able to use it in two practical ways, something like this (note that the API is definitely not final):

import { getCssSelector, createCssSelectorGenerator } from "css-selector-generator";

// 1. get up to three CSS selectors
const selectors = getCssSelector(myElement, {
  // this would be a new option
  maxResults: 3
})
console.log(selectors) // [..., ..., ...]

// 2. use the generator to come up with selectors until you find the one that satisfies your needs
function getSelectorThatWorksOnOtherProductPages (myElement) {
  const generateCssSelector = createCssSelectorGenerator(myElement)

  for (const selector of generateCssSelector()) {
    if (isSelectorValidOnOtherPages(selector)) {
      return selector;
    }
  }
  return null;
}

There are a few things to note:

• Adding the "maxResults" option would mean a breaking change to the library. Currently, the return type of the getCssSelector method is a string. With this option, it would be an array of strings instead. To make it as backwards compatible as possible, I will probably still return a string if the "maxResults" option is undefined. But still, a breaking change.
• Setting the "maxResults" option to 3 would not mean that you'll get three results. You'll get up to three results. Sometimes it just is not possible to create enough CSS selectors for an element. Sometimes it's only possible to get a fallback selector.

Feel free to comment what you think about these changes. Will they help with your use cases?

The example above is a work in progress, everything can still change. I can't provide a specific timeframe when it will be implemented.

[mnoorenberghe]

@fczbkk I think adding the new public API to return a generator would be sufficient and avoids a breaking change and variable return type. The existing getCssSelector function would just use createCssSelectorGenerator internally to get the first selector.

We would like to use this API shortly. Do you think it's something we could contribute effectively?