Simulate a click at specific coordinates

Some websites use images or <canvas> elements where clicking on a specific part of the element is required to trigger an action, for example, clicking on a specific area of a map, chart, or image-based button.

How to set it up

1. Create a “Click element” step that targets the image or <canvas> element. By default, Playwright will click the center of the element.

2. Convert the “Click element” step into a Playwright code step and specify the coordinates like the following:

   await page.getByRole("button", {name: "My Image Button"}).click({position: {x: 40, y: 40}})

   Adjust x and y to the specific point you want to click, measured in CSS pixels from the top-left corner of the element.

You can find the element’s size and position by using your browser’s element inspector. This will help you estimate the correct coordinates to click within the element.