OverlayRect

OverlayRect = object

A locator’s on-screen box in CSS pixels of the recording viewport, ready to position an overlay over a live element.

The top-level placement fields (relativeTo, x, y, and exactly one of width/height) spread straight into an overlay config:

const rect = await overlayRect(page.locator('#save'))
const overlays = createOverlays({
  ring: (p: { rect: OverlayRect }) => ({ element: <Ring />, ...p.rect }),
})
await overlays.ring({ rect }).start()

The full geometry (both axes) is also available under pixels, so a factory can pass it to a component that draws relative to the element (for example a circle around it).

Properties

height?

optional height?: number

Defined in: overlayRect.ts:32

Height in CSS px. Present only when dimension: 'height' was requested.

pixels

pixels: object

Defined in: overlayRect.ts:38

The full box in CSS pixels (viewport-relative), after any margin and clamping to the viewport, carrying both axes. Equals the element’s boundingBox() when no margin is set.