Playwright button click works unpredictably

Question

I have at least three options to click on a button:

1. await page.Locator("button", new() { HasText = "Создать" }).ClickAsync();
2. await page.GetByRole(AriaRole.Button, new() { Name = "Создать" }).ClickAsync();
3. await page.GetByText("Создать") .ClickAsync();

The page on which I do this, based on my practical observations, can give 2 options for this button in the HTML markup:

1. selector: #app-content > div > div > div._1hAP9 > div > div.f\\+e\\+A > button xpath: /html/body/div[1]/div[1]/div[2]/div/div/div[4]/div/div[2]/button
2. selector: #app-content > div > div > div._1hAP9 > div > div > button xpath: /html/body/div[1]/div[1]/div[2]/div/div/div[7]/div/div/button

At the same time, from the developer console document.querySelector will find the button in both paths for both HTML variants. But from playwright, they sometimes work, sometimes they don't. At the same time, the execution continues to go further through the commands, as if the click was made, although, in fact, it does not occur (I observed the behaviour of the browser with the headless=false parameter).

Also, the Force = true parameter sometimes affects the behaviour of buttons, and sometimes nothing changes, the code continues to go further and crashes on the timeout of a component that has not yet appeared, because the button has not been pressed.

How can I make it so that this button is finally clicked ALWAYS?

Eisenhart

Sounds like a bug, either in Playwright your app which you are testing. I recommend filing an issue on GitHub with a reproduction. – Pueblo

although, in fact, it does not occur how did you determine that? Are you sure the problem isn't the click handler, or whatever the page does after the click? crashes on the timeout of a component that has not yet appeared, because the button has not been pressed how is that component displayed? – Bifocal

@panagiotis-kanavos the page gets to the point where the button should be clicked and nothing else happens. After the timeout falls on pressing the next button, which has not yet appeared on the screen (the previous one was not pressed). – Eisenhart

Post your code, don't describe it. The last comment just repeated what's in the question. Post your actual page code, including the script handler. Right now, there's very little usable information: 1) this happens only on headless mode 2) you expected something else to appear. Were you trying to open a doc viewer or print page? At the very least record a trace to see what's actually going on instead of guessing from timeouts. A full trace includes snapshots of the page and the DOM, along with all events, including network events and console messages. – Bifocal

@max-schmitt github.com/microsoft/playwright/issues/26652 – Eisenhart

You can put an expect to stop moving it further if thats possible – Punish

Answer 1

As I always say, if you use a very long Xpath expression, or a very long CSS selector - you are doing something wrong. Always aim to use shortest expression as possible. The expression needs to be readable for you and for other developers in you team. But first, the selector must be short and easy also for the Playwright plugin itself.

I would do something like this:

await page.locator('button').getByText('Создать').click() 

If your locator has 2 results - you can use .first() or .last().

If you locator has 3 or more results - you should ask a member in your UI team to add a specific class of Id for it.

Wendt