playwright icon indicating copy to clipboard operation
playwright copied to clipboard

[Bug]: Slotted content in a dialog is not found by chaining locators with `getByRole("dialog")`

Open Retsam opened this issue 2 months ago • 5 comments

Version

1.57.0-alpha-2025-11-10

Steps to reproduce

  1. Clone my repo at https://github.com/Retsam/playwright-dialog-bug-repro
  2. npm install
  3. npm run test

Contains this test:

test("should click into shadow root with slotted div", async ({ page }) => {
    await page.setContent(`
        <my-dialog>
          <template shadowrootmode="open">
            <dialog open><slot></slot></dialog>
          </template>
          <div><button>Foo</button></div>
        </my-dialog>
      `);

    await page.getByRole("dialog").getByRole("button", { name: "Foo" }).click();
  });

Expected behavior

Since the button is inside the dialog, I expected getByRole("dialog").getByRole("button") to be able to locate and click it.

Image

Actual behavior

Timeout waiting for getByRole('dialog').getByRole('button', { name: 'Foo' })

Additional context

This seems similar to https://github.com/microsoft/playwright/issues/37768 so I've modeled the reproduction on that issue.

Environment

System:
    OS: macOS 15.6
    CPU: (14) arm64 Apple M4 Pro
    Memory: 120.70 MB / 48.00 GB
  Binaries:
    Node: 18.19.1 - /Users/bn/.nvm/versions/node/v18.19.1/bin/node
    npm: 10.2.4 - /Users/bn/.nvm/versions/node/v18.19.1/bin/npm
    pnpm: 9.15.0 - /Users/bn/.nvm/versions/node/v18.19.1/bin/pnpm
  IDEs:
    VSCode: 1.105.1 - /usr/local/bin/code
    Cursor: 2.0.43 - /Users/bn/.local/bin/cursor
  Languages:
    Bash: 3.2.57 - /bin/bash
  npmPackages:
    @playwright/test: ^1.57.0-alpha-2025-11-10 => 1.57.0-alpha-2025-11-10

Retsam avatar Nov 10 '25 19:11 Retsam

We investigated this, and it's a known bug. But sadly, fixing it would require breaking changes that aren't worth it.

Skn0tt avatar Nov 12 '25 14:11 Skn0tt

Thanks for looking, is there anything that we can do to work around this on our end? I see that this is implemented in a "role engine" is there a way to provide an alternative implementation of that engine or anything, short of forking or patching playwright?

This sort of fix is pretty important to us - we're trying to move towards consistently using role selectors, but we use a custom-element based design system, it's going to a bit of a common footgun for us if we have to switch to a different style of selector just because we happen to be selecting into a custom-element wrapped part of the UI.


Is this something that would be eligible for a breaking change in a "v2" release? (Is there going to be a Playwright v2 someday?)

Retsam avatar Nov 12 '25 23:11 Retsam

There's no plans of releasing a v2. We do care a lot about role selectors too, though - let me bring it up with the team again. Maybe there's something we can do if we look more closely.

Skn0tt avatar Nov 13 '25 09:11 Skn0tt

We discussed it and will take another stab at making this change. It's scary but i'll give it a try.

Skn0tt avatar Nov 13 '25 17:11 Skn0tt

Awesome, I really appreciate you taking a second look, regardless of how it turns out!

Retsam avatar Nov 13 '25 17:11 Retsam