Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: getByRole can't find element with the accessible name from label element when aria-labelledby is not valid #33644

Closed
mehm8128 opened this issue Nov 17, 2024 · 0 comments · Fixed by #33667
Assignees
Labels

Comments

@mehm8128
Copy link

mehm8128 commented Nov 17, 2024

Version

1.48.2

Steps to reproduce

  1. clone https://github.com/mehm8128/playwright-getByRole-repro
  2. run npm i
  3. start src/index.html with live server or such tools and visit http://127.0.0.1:5500/src/index.html (port may depend on your environment
  4. run npm run test
  5. you will see such result below
Running 1 test using 1 worker
[chromium] › repro.spec.ts:3:5 › click two textboxes
textbox1 1
textbox2 0
  1) [chromium] › repro.spec.ts:3:5 › click two textboxes ────────────────────────────────────────────────────

    Test timeout of 30000ms exceeded.

    Error: locator.click: Test timeout of 30000ms exceeded.
    Call log:
      - waiting for getByRole('textbox', { name: 'TestField2' })


       9 | 	const textbox2 = page.getByRole("textbox", { name: "TestField2" });
      10 | 	console.log("textbox2", await textbox2.count());
    > 11 | 	await textbox2.click();
         | 	               ^
      12 | });
      13 |

        at /Users/y_oyama/Desktop/playwright-getByRole-repro/tests/repro.spec.ts:11:17

  Slow test file: [chromium] › repro.spec.ts (30.0s)
  Consider splitting slow test files to speed up parallel execution
  1 failed
    [chromium] › repro.spec.ts:3:5 › click two textboxes ─────────────────────────────────────────────────────

Expected behavior

We want to see such result below and want test to pass (number represents the count of found elements).

textbox1 1
textbox2 1

Actual behavior

textbox2 is not found by getByRole and test is fail.

Additional context

In Chrome browser, when we check the input element of TextField2 with devtools, we can see such a11y information.

Image

This shows this input element has accessible name 'TestField2' from wrapped label and invalid aria-labelledby is disabled, so we want to get this element with getByRole('textbox', { name: 'TestField2' }. But playwright can't find this element with such query probably because getByRole doesn't find it by proper way.
Thank you for checking my issue.

Environment

System:
    OS: macOS 14.2
    CPU: (8) arm64 Apple M2
    Memory: 363.39 MB / 16.00 GB
  Binaries:
    Node: 22.11.0 - ~/.local/share/mise/installs/node/latest/bin/node
    npm: 10.9.0 - ~/.local/share/mise/installs/node/latest/bin/npm
  IDEs:
    VSCode: 1.94.2 - /usr/local/bin/code
  Languages:
    Bash: 3.2.57 - /bin/bash
  npmPackages:
    @playwright/test: ^1.48.2 => 1.48.2
@mehm8128 mehm8128 changed the title [Bug]: getByRole can't find element from label when aria-labelledby is not valid [Bug]: getByRole can't find element from label element when aria-labelledby is not valid Nov 17, 2024
@mehm8128 mehm8128 changed the title [Bug]: getByRole can't find element from label element when aria-labelledby is not valid [Bug]: getByRole can't find element with the accessible name from label element when aria-labelledby is not valid Nov 17, 2024
@dgozman dgozman self-assigned this Nov 19, 2024
@dgozman dgozman added the v1.49 label Nov 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants