Is there a way to show mouse pointer in puppeteer?

[bexoss]

I have to see the movement of mouse pointer that running by puppeteer for debugging. I red this document : #374

But the problem is, the test website is not mine, it is other's website like google, github website. So I dont know how to implement above code to client page. When puppeteer launch the browser, I opend developer console and and paste above code and enter it, it doesn't work. Maybe it is removed when page reloaded or redirected.

Is there a way to show mouse cursor permanently during puppeteer running?

[xse]

Hey,
I don't have a way to test that right now but you can inject scripts in page context using page.evaluateOnNewDocument or page.evaluate and so on which will inject a script on any page.
From there you can easily add any script that displays an image or a colored dot where the mouse is.
This should be "permanently" displayed unless puppeteer actually "moves the mouse outside the page" when it's not used.

If you're still having issues i'll try to get an example working, have a good day!

[DanielRuf]

i'll try to get an example working, have a good day!

This would be really helpful.

[aslushnikov]

I extracted the mouse helper we use in Puppeteer tests and a little bit enhanced it.

Check it out: install-mouse-helper.js

This function will inject an element to the page's DOM that will track mouse position. This should be good-enough for a majority of use cases.

Here's what it takes to use the helper. Consider the helper is saved to the file install-mouse-helper.js:

const puppeteer = require('.');
const {installMouseHelper} = require('./install-mouse-helper');

(async() => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // Installs the helper to the page. Mouse will be visible in the subsequent navigation.
  await installMouseHelper(page);
  // Here's the navigation. From now on we'll have a mouse cursor on the page.
  await page.goto('https://example.com');
  await page.mouse.move(135, 173);
  await page.mouse.down();
  await page.mouse.move(400, 225);
  await page.screenshot({path: 'screenshot.png'});
  await browser.close();
})();

The screenshot now has the mouse position and looks like this:

@bexoss is this good enough for you?

[MelMacaluso]

 await page.mouse.move(135, 173);
  await page.mouse.down();
  await page.mouse.move(400, 225);

Hi @aslushnikov , thanks! It does not work for me, do you think is not compatible with puppeteer latest?

@aslushnikov Ignore me, my linter removed the ; from the css inline styles 😂

[0x446f6d]

How could you get this working with something like a modal? Right now, the grey circle hides behind the modal and isn't visible in front of modals that pop up.

[ccpu]

@dominuslabs set higher z-index on mousemove

[0x446f6d]

I set the z-index to the maximum z-index allowed (2,147,483,647) and it still didn't work. Maybe its because the modal is in an iframe?

[ccpu]

@dominuslabs difficult to say, as you have mentioned it could be the iframe, im using higher z-index in my code with playwright, haven't noticed any problem yet.