How to perform mouse operations using node js and puppeteer

 

Hi guys, welcome to another tutorial where we are going to discuss another magic using google puppeteer. In our last tutorial, we talked about how to emulate mobile devices and we saw how fascinating and useful it is. Today, we are going to see how we can perform user mouse clicks using the famous puppeteer.

A quick recall!! Remember that puppeteer is headless chrome and can perform what a normal browser can perform when instructed by a user and one of them is mouse click.

Of course!, I hope someone isn’t waiting for me to explain how a mouse is used (mouse 101)…hahaha 😂☺

Well, if it’s your first time reading about the amazing Google puppeteer, I recommend you check out my recent articles on this blog.

We are going to look at a little example here which explains the entire concept so you will be able to implement in your projects.

The puppeteer API uses the mouse.click() to perform mouse click on any web page like a normal user.

mouse.click() method takes as parameter, the coordinates of the area to be clicked and the button click of the mouse.

In this case, we will;

-    Launch the headless chrome browser,

-    Open a new page or tab,

-    Set screen size,

-    navigate to the required url or website and then perform the click,

-    Takes a screenshot of the page and saves in the uploads folder

NB: The url or website used in this example is a website which tracks mouse click events and logs a statement after every mouse click.

In your IDE, create a file server.js and type the code below;

  const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  // set the viewport so we know the dimensions of the screen
  await page.setViewport({ width: 800, height: 600 })
  // go to a page setup for mouse event tracking
  await page.goto('http://unixpapa.com/js/testmouse.html');
  // click an area
  await page.mouse.click(132, 103, { button: 'left' });
  // the screenshot should show feedback from the page that right part was clicked.
  await page.screenshot({ path: './uploads/image.png' })
  await browser.close()
    console.log ('done');
})()

Run the script file,

If everything works successfully, the word done, will be printed out on the console.

OUTPUT

As you can see the image above, a mouse click was performed on the webpage.

Thanks for coding with me..

Chaow!!

Thanks for reading!