Query by autocomplete attribute

Describe the feature you’d like:

Consider this HTML that’s gone through localization into (my amateur) Spanish:

<form method=post lang=es>
  <p><label>Nombre de usuario: <input autocomplete=username name=u></label>

  <p><label>Contraseña: <input autocomplete=current-password name=p></label>

  <p><button>Acceder</button>
</form>

Because the autocomplete attribute is standardized to map directly to user expectations for the purpose of autofill, browser/extension login managers, and password generators, it seems about as robust as the role attribute.

In the above example, you could query the right input across languages via the name or maybe a prefilled value, but those are more likely to change in the case of new tests, new backends, additional auth endpoints, new providers, etc.

However, you can be certain that [autocomplete=username] will always map to the User ID field (or you’ve got bigger problems than a rotting test). In fact, it‘s specified to mean the same thing regardless of the underlying element (banks love using <select> for some reason) or input type; consider login forms that ask for a handle, email address, phone number, ID number, or any combination thereof, but only use them as an opaque user identifier. It even works for <input type=hidden>, as suggested by Chrome for multi-step login flows.

Suggested implementation:

ByAutocomplete seems like the simplest thing that could possibly work.

Describe alternatives you’ve considered:

React’s JSX mappings have unfortunately camel-cased the autocomplete DOM property as autoComplete, but that might just be a specific quirk for only react-testing-library.

Teachability, Documentation, Adoption, Migration Strategy:

I think this would go under “Queries Accessible to Everyone”, as it’s roughly as exposed as role. But I’m certainly not pretending to know for sure.

[kentcdodds]

This would make more sense as an assertion that a query. The user will still primarily know what the field is for based on it’s label and will therefore “query” the screen based on the label. But you could definitely use jest-dom’s toHaveAttribute assertion to get confidence that the autocomplete is set up properly.

[kentcdodds]

I just really don’t think the use case is strong enough to justify an official query. This is what custom queries support is for. For that reason, I’m going to close this. Thanks for the discussion.