Canvas elements and similar UI components often require precise coordinate-based interactions rather than simple center-based clicks.

​
What is Relative Mode?

By default, Playwright performs clicks at the center of an element. However, for canvas elements where the entire HTML element is a single <canvas> tag, center-based clicking won’t provide the precision required. Relative mode enables you to click at specific coordinates relative to an element’s boundaries, making it essential for accurate canvas interactions.

​
When to Use Relative Mode

Use relative mode when interacting with:
  • Canvas elements (<canvas>)
  • SVG elements
  • Custom drawing applications
  • Any element where precise positioning is critical

​
Enabling Relative Mode

To enable relative mode, click on the target icon in the control bar. This switches the click mode from center-based to coordinate-based interactions.
Once activated, future page interactions will store data about the exact coordinates where you clicked on an element, rather than just the element’s locator. During test execution, these actions will be replayed using the precise coordinates relative to the target element.

Two actions created in relative mode, drawing at specific coordinates on the canvas

Drag and drop actions automatically utilize relative mode for precise positioning.

​
How AI Handles Canvas Interactions

Stably AI automatically operates in relative mode when interacting with canvas elements, ensuring accurate positioning without requiring manual configuration.