← Back to Discord Forum

Button in modal not found


unfortunately playwright cannot find the button in a modal, it might be related to the page.Dialog event as it is not triggered when dialog is opening.

So I have this

page = await context.NewPageAsync();
page.Dialog += (_, dialog) => dialog.AcceptAsync();

// Later, after init etc

await page.GetByRole(AriaRole.Button, new() { Name = Apply }).ClickAsync();

// Exception
System.TimeoutException : Timeout 10000ms exceeded.
=========================== logs ===========================
waiting for GetByRole(AriaRole.Button, new() { Name = "Apply" })

But the modal is there and visible. However, is there any workaround for this like running pure javascript or something? Using the id also does not work.

This thread is trying to answer question "Why can't playwright find the button in a modal and how can this issue be resolved?"

0 replies


Why Playwright Can't Find Your Button

There could be a couple of reasons why Playwright can't find the button in a modal.

Poor Page Hydration

Firstly, your page might be suffering from poor hydration. This is when the page sends a static version to the browser before the dynamic part that makes it "live". If Playwright interacts with the page before its listeners have been added, the click won't have any effect.

You can check if this is the issue by using Chrome DevTools and selecting "Slow 3G" network emulation in the Network panel. If button clicks are ignored and entered text is reset during page load, you've got poor hydration.

The fix? Make sure all interactive controls are disabled until after hydration.

Navigation Events

Secondly, clicking an element in Playwright could trigger multiple navigations. In this case, you should explicitly wait for a specific URL using page.waitForURL() after clicking an element.

Here's a TypeScript example:

await page.click('#my-button');
await page.waitForURL('https://ray.run/expected-url');

Dialog Handling

Lastly, dialogs in web pages are modals and they block further execution until they are handled. If there's no listener for page.on('dialog'), all dialogs are automatically dismissed by default. So, make sure your action handles or dismisses any dialogs encountered during execution.

page.on('dialog', async dialog => {
  await dialog.dismiss();

Remember, these are just a few possible scenarios. For more tips on handling flaky tests in Playwright, check out this blog post.

Related Discord Threads

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.