What do we recommend people do for elements that have no implicit role (like input[type=password])

Say you have a login form:

<form>
  <div>
    <label for="username-field">Username</label>
    <input id="username-field" name="username" type="text" />
  </div>
  <div>
    <label for="password-field">Password</label>
    <input id="password-field" name="password" type="password" />
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

You can retrieve the username field via: screen.getByRole('textbox', {name: /username/i}) However, the password field has no implicit role so you’d have to use getByLabelText(/password/i) for that one.

I’m guessing that we just recommend people use getByLabelText as a fallback in this case, but I’m curious what other people think about this (especially curious to hear @eps1lon’s thoughts here).

[eps1lon]

I’m guessing that we just recommend people use getByLabelText as a fallback in this case

I think this is our safest bet. I wouldn’t want to diverge from the spec. Otherwise people might use <input type="text" role="password" />.

If people stumble over this often when doing getByRole('textbox', { name: 'Password' }) we could check if there are other roles with the same superclass (related to #448) and name (and add a special case for input[type="text"]).

[Tohaker]

Quite conveniently (or not), I’ve just faced this issue and was confused as to why my password input just couldn’t be found. Using getByLabelText works, but it does a look a bit strange in my test;

const usernameInput = getByRole("textbox", { name: /username/i });
const domainInput = getByRole("textbox", { name: /domain/i });
const passwordInput = getByLabelText(/password/i);

I’d appreciate eps1lon’s suggestion, but if this would result in some hacky, unstable solution I’d rather stick with what I already have.