Skip to content

Is there a way to show mouse pointer in puppeteer? #4378

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
bexoss opened this issue May 1, 2019 · 20 comments
Closed

Is there a way to show mouse pointer in puppeteer? #4378

bexoss opened this issue May 1, 2019 · 20 comments
Assignees
Labels

Comments

@bexoss
Copy link

bexoss commented May 1, 2019

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
Copy link

xse commented May 1, 2019

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
Copy link

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

This would be really helpful.

@aslushnikov
Copy link
Contributor

aslushnikov commented Jun 7, 2019

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:

screenshot

@bexoss is this good enough for you?

@MelMacaluso
Copy link

MelMacaluso commented Jul 31, 2020

 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
Copy link

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
Copy link

ccpu commented Sep 21, 2020

@dominuslabs set higher z-index on mousemove

@0x446f6d
Copy link

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
Copy link

ccpu commented Sep 22, 2020

@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
Copy link

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:

screenshot

@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
Copy link

const puppeteer = require('.');

try this:

const puppeteer = require('puppeteer');

@Rem0ld
Copy link

Rem0ld commented Jul 19, 2021

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
Copy link

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

Works great!

@ghost
Copy link

ghost commented Jan 7, 2022

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
Copy link

dword-design commented Jan 21, 2022

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
Copy link

Mecanik commented Mar 16, 2022

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
Copy link

cenfun commented Apr 15, 2023

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

@obfuscated-loop
Copy link

obfuscated-loop commented Nov 15, 2023

For those using JavaScript, the solution I have found is this:

import { createCursor, getRandomPagePoint  } from 'ghost-cursor';
import installMouseHelper from 'ghost-cursor';
// the rest of your code
const page = await browser.newPage();
await installMouseHelper.installMouseHelper(page);

@storenth
Copy link

storenth commented Feb 21, 2024

Guys, just use simplest event listeners to track click like events @aslushnikov talking about: #4378 (comment)
I suggest to close the issue.

@jrandolf-2
Copy link
Contributor

Showing the mouse pointer wouldn't really belong to Puppeteer/Chromium as it's an OS artifact. We recommend using the workarounds listed in this thread.

@jrandolf-2 jrandolf-2 closed this as not planned Won't fix, can't repro, duplicate, stale Feb 21, 2024
@bvandercar-vt
Copy link

Recommend using the package Ghost-Cursor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests