Error message when no elements match an interactors's selector is not as helpful as it could be

[cowboyd]

If you have an interactor like:

export default HTML.extend("MyComponent")
  .selector('.my-class')

and when you try and use it

await MyComponent("Hello").exists();

but there is no element matching .my-class in the DOM, you will see an error like this:

NoSuchElementError: cannot find MyComponent  "Hello"

The specific meaning of this error is that no elements matched the selector, and therefore no attempt could even be made to match the locator and filters.

This could mean two things. Either, there is a bug in your app and the desired element is not appearing at all, or there is a bug in your interactor selector. We diagnose the first case accurately, but if second case holds and there is a bug in your interactor selector we don't give direct feedback that there were zero matching candidates. This false negative can be misleading. We should try and at least present the developer with the possibility that their selector is wrong. Possibilities include:

NoSuchElement: no elements found matching selector for MyComponent "Hello"

NoSuchElement: selector `.my-class` did not find any elements for MyComponent "Hello"

The only problem with ☝🏻 is that not all selectors are short and sweet:

NoSuchElement: selector did not find any elements for MyComponent "Hello"
selector: '[^my-class-pretty-gnarly*]'

Finding "adjacent" selectors that are similar would be awesome too, but don't know how to even begin to look at that.