-
Notifications
You must be signed in to change notification settings - Fork 9.2k
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
Comments
Hey, If you're still having issues i'll try to get an example working, have a good day! |
This would be really helpful. |
I extracted the mouse helper we use in Puppeteer tests and a little bit enhanced it. Check it out: 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 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? |
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 |
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. |
@dominuslabs set higher z-index on |
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? |
@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. |
Hello ! I try to make it form but i get an error
Can you help me define what's wrong ? |
try this:
|
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. |
I thought it may be useful to note that we solved this using this click hijacking hack. Works great! |
It should also be possible to use
|
@nathalizator You want to put the mouse helper into an npm package? Otherwise I can do it. |
Drawing is one thing, moving it is another thing... And for the record...
|
|
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); |
Guys, just use simplest event listeners to track click like events @aslushnikov talking about: #4378 (comment) |
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. |
Recommend using the package Ghost-Cursor |
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?
The text was updated successfully, but these errors were encountered: