How to Simulate a Click by Using X,Y Coordinates in JavaScript

How to simulate a click by using x,y coordinates in JavaScript?

You can dispatch a click event, though this is not the same as a real click. For instance, it can't be used to trick a cross-domain iframe document into thinking it was clicked.

All modern browsers support document.elementFromPoint and HTMLElement.prototype.click(), since at least IE 6, Firefox 5, any version of Chrome and probably any version of Safari you're likely to care about. It will even follow links and submit forms:

document.elementFromPoint(x, y).click();

https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Simulate click at x/y coordinates using javascript

This can actually be accomplished with the document.elementFromPoint method. A jQuery example:

function simulateClick(x, y) {
    jQuery(document.elementFromPoint(x, y)).click();
}
simulateClick(100, 250);
simulateClick(400, 250);

Edit: Here is a working example: http://jsfiddle.net/z5YjY/

Simulating a mouse click at (x, y) on an HTML5 canvas element

The problem with your jQuery approach is that you are mixing it with a plain JavaScript event listener. This does not work with jQuery.

If you want to trigger an event and listen it using jQuery you have to use it's .trigger() and .mousedown() methods.

Here's an example:

function getMousePosition(canvas, event) {
  let rect = canvas.getBoundingClientRect();
  let x = event.clientX - rect.left;
  let y = event.clientY - rect.top;
  document.getElementById('output').innerText = x + ", " + y;
}

canvasElem = document.querySelector("canvas");

$('#canvas_element').mousedown(function(e) {
  getMousePosition(canvasElem, e);
});

var e = jQuery.Event("mousedown", {
  clientX: 50,
  clientY: 50
});
$('#canvas_element').trigger(e);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas_element"></canvas>
<div id="output"></div>

simulate click on x y coordinate

I'm not sure if clicking on an item by coordinates rather than a jQuery selector is a good idea. Why do you have to do the click event via coordiates rather than select the button that is being pressed?

You issue seems to be due to the fact that elementFromPoint doesn't return a jQuery Object, try this instead:

$(document.elementFromPoint(416, 825)).click();

How to click element using x/y coordinates with puppeteer?

You can find the iframe and its coordinates, and then add the offset of the element you want inside this iframe, before clicking:

const puppeteer = require("puppeteer");
 
(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
 
  await page.goto("https://example.com/page_with_frame", {waitUntil: 'networkidle0'});
 
  // Find the iframe
  const frame = await page.waitForSelector("iframe");
  // Find its coordinates
  const rect = await page.evaluate(el => {
    const {x, y} = el.getBoundingClientRect();
    return {x, y};
  }, frame);
 
  // Values found manually by doing 
  // `document.querySelector('.yscp_link').getBoundingClientRect()`
  // in the dev console. Add 5 to them, because it's the top left corner
  const offset = {x: 213 + 5, y: 11 + 5};
 
  // Click
  await page.mouse.click(rect.x + offset.x, rect.y + offset.y);
 
  await frame.waitForNavigation({
    waitUntil: 'networkidle2',
  });
 
  await page.screenshot({ path: "example.png" });
 
  await browser.close();
})();

How to Simulate a Click by Using X,Y Coordinates in JavaScript