cannot use a textfield that does not have a label

[cowboyd]

If a text field does not have a label, it fails with the following error NoSuchElementError: cannot find Label

It is because the FormField interaction delegates to its label for its locator. Is this really what we want? While I agree that you should be able to find via the label locator, its seems suspect that you cannot use it if it is not present at all.

https://github.com/thefrontside/interactors/blob/main/packages/html/src/form-field.ts#L19

[cowboyd]

Actually, it isn't just that it doesn't work without a label. It doesn't seem to work when the label does not conform to a particular structure.

[cowboyd]

Here is the problem. If you ever have a situation where you have an input that does not have corresponding <label> element, then it will break all FormField interactors on the entire page.

Let's say you have the following form:

<form>
   <label for="username">Username</label><input id="username" type="password"/>
   <label for="password">Password</label><input id="password" type="password"/>
   <input type="text" id="2FA" aria-label="2FA Code"/>
</form>

We cannot use any of the form fields in this form because of the single field which uses an aria-label attribute to specify its label.

For example, trying to use:

TextField("Username").fillIn("cowboyd")

Will result in the cannot find Label error, even though the "Username" field does, in fact, have a label. This is because when looking up "Username" it will try to find the locator of all the inputs against which to match. To do this, it reads the text() attribute from an associated label interaction from each to assert that it is unique before performing the action.

However, a label is not always specified with an element. It can also be specified with the aria-label attribute, in which case there is no element at all, and in the DOM API, the element.labels array is empty.

This is still a totally valid label and use case and so it should definitely match.

I think my recommendation is just to implement the locator to search both element.labels[] AND the arial-label attribute.

[cowboyd]

This was resolved by #255