Puppeteer click on coordinates

To click on specific coordinates using Puppeteer, you can use the `page.mouse` object to move the mouse cursor to the desired coordinates and then trigger a click event. Here’s an example of how you can achieve this:

“`html


“`

Explanation:
1. The script is wrapped within a `div` element with the id `content`, where the resulting HTML content after the click event will be displayed.

2. First, we import the Puppeteer library and launch a new browser instance.

3. We create a new page and set its viewport size.

4. Using `page.goto()`, we navigate to the desired page. Replace `’https://example.com’` with the actual URL you want to visit.

5. Using `page.$()`, we select the element on the page which you want to click. Replace `’#myElement’` with a valid CSS selector for your specific element.

6. `boundingBox()` method gives us the size and position of the element.

7. We extract the coordinates of the center point of the element by calculating the average of its `x` and `y` values.

8. `page.mouse.move()` is used to move the mouse cursor to the desired coordinates.

9. `page.mouse.down()` triggers a mouse button press event, and `page.mouse.up()` triggers a mouse button release event, essentially simulating a click event at the specified coordinates.

10. Using `page.waitForTimeout()`, you can optionally add a delay for a specified number of milliseconds.

11. `page.screenshot()` captures a screenshot of the updated page. You can change the file path and name as needed.

12. The resulting HTML content after the click event is extracted using `page.evaluate()`, and it is set as the inner HTML of the `div` with the id `content`.

13. Finally, we close the browser with `browser.close()`.

Make sure to replace the placeholders like URL and CSS selector with the appropriate values for your use-case.

Leave a comment