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 😂

[dominusLabs]

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

[dominusLabs]

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.

[nathalizator]

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?

Hello ! I try to make it form but i get an error
Error: Cannot find module '.'

• I have creat a file name test-mouse-help.js
• I have added your file "install-mouse-helper" in the same directory

Can you help me define what's wrong ?

[DanielRuf]

const puppeteer = require('.');

try this:

const puppeteer = require('puppeteer');

[Rem0ld]

I'm using this helper to see where the mouse is on the webpage, but I've found something, not sure if it's a bug or if I'm doing something wrong.
This is automated test, I'm giving list of events that puppeteer will go through.
At first there is no problem but when scrolling down, but at some point the cursor disappear (basically it's pretty much when scrollY > screenY) and it only shows up when scrolling is back up.
I expecting to keep seeing the cursor at any scrollY position.
So my question is, is it normal behavior, is it a bug?

[chaffeqa]

I thought it may be useful to note that we solved this using this click hijacking hack.

Works great!

[ghost]

It should also be possible to use Overlay.highlightQuad to draw a cursor anywhere on the page (should work with iframes and any zIndex and doesn't require injecting scripts): https://chromedevtools.github.io/devtools-protocol/tot/Overlay/#method-highlightQuad

await Main.MainImpl.sendOverProtocol('Overlay.highlightQuad', {
 quad: [1, 1, 100, 1, 1, 10, 1, 1], color: {r: 100, g: 200, b: 200}
});

[dword-design]

Check it out: install-mouse-helper.js

@nathalizator You want to put the mouse helper into an npm package? Otherwise I can do it.

[Mecanik]

Drawing is one thing, moving it is another thing...

And for the record...

const cdp = await page.target().createCDPSession();

await cdp.send('DOM.enable');
await cdp.send('Overlay.enable');

const data = await cdp.send('Overlay.highlightQuad', {
      quad: [1, 1, 100, 1, 1, 10, 1, 1], 
	  color: {r: 100, g: 200, b: 200},
    });
console.log(data);

[cenfun]

Check it out: install-mouse-helper.js

@nathalizator You want to put the mouse helper into an npm package? Otherwise I can do it.

here is https://www.npmjs.com/package/mouse-helper