Button in modal not found
HI,
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?"
Related Ask AI answer for "What are some reasons why Playwright might not be able to interact with a button in a modal and how can these issues be addressed?".
Answer
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 => {
console.log(dialog.message());
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
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.