getByRole doesn't work for passwords #1128

dwjohnston · 2022-05-13T02:23:27Z

Note, I think I answered my own answer. But can someone clarify - when searching for password fields - should I just search by labelText?

This is possibly a regression of #737 ?

Found "@testing-library/react@13.2.0"
Found "jest@27.5.1"
Found "jsdom@16.7.0"

Relevant code or config:

const MyPassword = () => {
  return <label>Hello<input type="password" /></label>
}

const MyPassword2 = () => {
  return <><label htmlFor="password">Hello</label><input type="password" id="password" /></>
}
const MyPassword3 = () => {
  return <><label id="label">Hello</label><input type="password" aria-labelledby='label' /></>
}


describe('</>', () => {
  it("Passwords are selectedable label 1", () => {
    render(<MyPassword />)

    expect(screen.getByRole("textbox", {
      name: /hello/i
    })).toBeInTheDocument();
  });

  it("Passwords are selectedable label 2", () => {
    render(<MyPassword2 />)

    expect(screen.getByRole("textbox", {
      name: /hello/i
    })).toBeInTheDocument();
  });

  it("Passwords are selectedable label 3", () => {
    render(<MyPassword3 />)

    expect(screen.getByRole("textbox", {
      name: /hello/i
    })).toBeInTheDocument();
  });
});

What you did:

Try to write tests to assert that password fields exist.

What happened:

These tests fail.

TestingLibraryElementError: Unable to find an accessible element with the role "textbox" and name `/hello/i`

    There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole

    Ignored nodes: comments, <script />, <style />
    <body>
      <div>
        <label
          id="label"
        >
          Hello
        </label>
        <input
          aria-labelledby="label"
          type="password"
        />
      </div>
    </body>

      35 |     render(<MyPassword3 />)
      36 |
    > 37 |     expect(screen.getByRole("textbox", {
         |                   ^
      38 |       name: /hello/i
      39 |     })).toBeInTheDocument();
      40 |   });

Reproduction:

Full repro here.

https://github.com/dwjohnston/rtl-password

Run yarn && yarn test

Problem description:

~~<input type='password'> should have role 'textbox'~~

Whoops, no it shouldn't - as per the W3 aria spec - it has no role.

Suggested solution:

The text was updated successfully, but these errors were encountered:

eps1lon · 2022-05-13T05:09:22Z

Duplicate of #567
TL;DR: type="password" has no role and is therefore not suitable for getByRole

BudgieInWA · 2023-09-11T07:50:05Z

This should be added to the examples in the docs. Many of the examples use a "username" input, but there is no mention of "password" near any of them.

type=password having no role is a surprise for many users (as indicated by the many issues in this repo) so I think it would be very valuable to provide guidance from veterans/authors as to which query tool fits the philosophy best for this awkward situation that new users are likely to encounter.

MatanBobi · 2023-09-11T08:45:23Z

@BudgieInWA we're open for PR's in the docs repo if you feel that this can be helpful :)

eps1lon closed this as completed May 13, 2022

This was referenced Aug 19, 2024

docs(byrole.mdx): add tips for input type password moeyashi/testing-library-docs#1

Closed

docs(byrole.mdx): add tips for input type password testing-library/testing-library-docs#1410

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

getByRole doesn't work for passwords #1128

getByRole doesn't work for passwords #1128

dwjohnston commented May 13, 2022 •

edited

Loading

eps1lon commented May 13, 2022

BudgieInWA commented Sep 11, 2023

MatanBobi commented Sep 11, 2023

getByRole doesn't work for passwords #1128

getByRole doesn't work for passwords #1128

Comments

dwjohnston commented May 13, 2022 • edited Loading

Relevant code or config:

What you did:

What happened:

Reproduction:

Problem description:

Suggested solution:

eps1lon commented May 13, 2022

BudgieInWA commented Sep 11, 2023

MatanBobi commented Sep 11, 2023

dwjohnston commented May 13, 2022 •

edited

Loading