Playwright recorder registers double clicks instead of single clicks.
I am using Playwright to test my 3D Babylonjs project. My website has different functionalities when single-clicking and double-clicking. When I record a test through Codegen, vscode or Chrome extension, the recording browser takes single clicks as double clicks because I get the undesired functionality when recording the tests. This is getting frustrating as I cannot find a solution for this. (this stops happening as soon as I stop recording the tests)
This thread is trying to answer question "Why does the Playwright recorder register single clicks as double clicks during testing of a 3D Babylonjs project, and how can this be resolved?"
so the clicks on any html element is not double clicking. but im trying to create my own custom testing suite with test logic for testing babylonJs 3d canvas. which is not directly accessible by playwright as u can see. its in x, y coords inside the canvas object. Im trying to find a fix for this very particular thing.
oh i was not aware of that. with explicit wait (timeout of 1 sec between each click) it doesnt call twice. but im facing this double click issue while recording.
I thought a YouTube video player would be a good example of a popular site that playwright would've had to fix as a non-HTML element on a website. and my suspicions were right. playwright adds a delay like I would manually when I would debug my code. so when I interact with the player, it highlights the player in red twice and then interacts with the player with roughly 1 sec of delay. I would want the recorder to introduce a similar kind of delay or whatever u use on youtubes player to my website as well. how would i ask the dev community to help me out with this?
Related Ask AI answer for "How can I prevent Playwright from registering single clicks as double clicks during test recording?".
Answer
Dealing with Double Clicks in Playwright Test Recording
You might have noticed that sometimes Playwright registers single clicks as double clicks when recording tests. This can be due to various factors like the timing of the click action or the sensitivity of the mouse. But don't worry, there's a way to handle this.
Playwright provides a force option that you can use to disable non-essential actionability checks. Here's how you can use it:
await page.click(selector, { force: true });With this, Playwright won't check if the target element actually receives click events. It's a handy trick when you want to simulate a single click without triggering any additional actions or event listeners associated with double-click behavior.
But remember, use this judiciously. It's generally better to rely on Playwright's default behavior of performing thorough actionability checks for more accurate and reliable test recordings.
So, next time you find single clicks being registered as double clicks during test recording with Playwright, just use the force option with the page.click() method. This will let you simulate a single click without triggering any additional actions or event listeners associated with double-click behavior.
For more tips and tricks on mastering Playwright, check out our blog post: Mastering Playwright: Best Practices for Web Automation with the Page Object Model.
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.