[BUG] "Clicking the checkbox did not change its state" on rare occasions

Context:

• Playwright Version: @playwright/test 1.17.2
• Operating System: Linux
• Node.js version: 16.14
• Browser: Chrome Headless
• Extra: Run in Bitbucket Pipelines

Code Snippet

Trying to check a checkbox with following code:

await this.page!.check(`data-test-id=iAcceptUsageOfMyData`);

will result in about 1/20 of executions to this error:

Clicking the checkbox did not change its state.

Describe the bug

The checkbox has no logic to be disabled or anything. Also, according to the Playwright trace it is perfectly visible (I would like to avoid the “force” flag if possible). Still, on about 1/10 or 1/20 executions, the test fails with the mentioned error.

The website has a sticky header at the top. Not sure if this might have any influence on the issue.

You can find a trace of a failed run here:

Alles-2022-04-11-12-05-18-trace.zip

[MiladSadinam]

I just saw that basically any input action (e.g. also await page.click()) can have the same problem. Do you have any generic advice how to solve the problem without using everywhere {force: true}?

You suggested to “wait until form stops changing”. How would you do this in a framework like vue.js or Angular?

[whyisusernamealwaystaken]

Just had this issue in webkit tests with styled radio groups. Webkit trace for the radio check shows consistently off-target clicks. Our current workaround is having await page.click("text=the text on it") instead of await page.check("input[name=its name]", {force: true}) Firefox and Chrome tests were working using page.check-method tho