[Question] Is it possible to view the location of a mouse click in the debugger / inspector?

[vomc]

I have a super rare edge case where I need to do a test on a Mapbox canvas and click on something based on location, i.e. await page.mouse.click(215, 289)

The problem is that I don't know the exact position of the canvas element that I need to click on, so I need a way to view where a click at say 215, 289 actually took place on the page. In cypress this is quite simple, you can trigger the click command just like Playwright and then the debugger will show you where that click took place by rendering a red dot at the location. This makes it quite simple to using basic trial and error ensure you are at the exact location: https://docs.cypress.io/api/commands/click

Is something like that also possible in Playwright, i.e. provide a debug view in which you can see the location of a given click?

[vomc]

Ah! nvm, I found it, so I guess if you turn on 'record' in the debugger you see what took place.

[vomc]

Potentially I was wrong here. Is there a way to see the click location if it appears on something esoteric like an HTML canvas?

I set my test to find a few positions with this

await page.mouse.click(400, 400)
await page.mouse.click(450, 450)
await page.mouse.click(500, 500)

Just go begin to narrow down where the click needs to be. Now I run my test passing in the --debug flag and when the debugger opens I click record. Then the result of that is when I click on the button to step into each line, all of the mouse click lines run at once and the test finishes and I have no way of knowing where the clicks too place on the page.

Is that the intended behavior or am I just doing something wrong?

[aslushnikov]

@vomc Trace Viewer shows click location - would this work for you?

[vomc]

@vomc Trace Viewer shows click location - would this work for you?

Hi @aslushnikov - thanks for responding so quickly! Could you show me an example? For me when I look through the trace I can scrub to the timeline where the click event happened like this:

However in the screenshot that shows up below (not shown here for confidentiality reasons), I cannot see any mouse click or any changes. How does the click location render for you? Do you actually see a dot or something?

Edit 1 - we are using version 1.22.0
Edit 2 - my configuration for traces is

trace: 'on',
screenshot: 'on'
snapshots: 'on'

I can click on the action and see that it took place, but the screenshot that comes up does not show a click

My assumption was that I would see it as per the documentation with a red dot, but could it be that this works differently since I am clicking inside a canvas element and not on a particular DOM node?

[aslushnikov]

@vomc you should select a click action in the actions panel; then it'll show a red dot in the DOM snapshot:

[vomc]

@vomc you should select a click action in the actions panel; then it'll show a red dot in the DOM snapshot:

I can confirm that this is not working for me in the version of playwright that I listed above. I have the snapshots and screenshot and trace all options on, yet when I view the trace in the browser, I get to the click action and see that it took place as per my screenshot, however the browser window that is shown does not show the click location.

[aslushnikov]

@vomc this looks like a bug then. Can you share your trace with me?

[vomc]

@vomc this looks like a bug then. Can you share your trace with me?

hmmm I am not sure because this is on our internal product, so likely not but I can (when I find the time) try to build something to reproduce it.

In a nutshell the HTML canvas element in question is a MapboxGL map rendered in a react app. If we assume that if the canvas element is the problem it would be simple to write a quick mock file in which a static html page is set up that includes a mapboxGL map and a click is done at some point that is within that canvas element.

[aslushnikov]

hmmm I am not sure because this is on our internal product, so likely not but I can (when I find the time) try to build something to reproduce it.

@vomc This would be very helpful and probably the only way we can proceed further.

Let me close this for now, please file a new issue with the repro so that we get back to it!

[rajveer28]

@vomc you can use: npx playwright codegen
it will find you location where you want to click.. this make things easier with playwright

[yjbdsky]

用page.locator("xxx").click()会显示红点，但用page.mouse.click(1010, 212)不会显示红点