Skip to content

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

@Retsam

Description

@Retsam

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 #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

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions