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
Create a “Click element” step that targets the image or
<canvas>
element. By default, Playwright will click the center of the element.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
andy
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.