zoom

What it does

zoom(locator, level) captures an element's bounding box and stores viewport-relative coordinates as a Playwright annotation. During video generation, the renderer crops and scales the video to zoom into the recorded position during the step's time window.

Usage

import { zoom } from 'playwright-recast'

const sidebar = page.locator('.sidebar-panel')
await zoom(sidebar, 1.3)

Parameters

Parameter	Type	Default	Description
`locator`	`Locator`	(required)	Playwright Locator pointing to the element to zoom into
`level`	`number`	`1.5`	Zoom level: `1.0` = no zoom, `2.0` = 2x closer

How it works

Gets the element's bounding box via locator.boundingBox()
Computes the center as viewport-relative fractions (0.0--1.0)
Stores { x, y, level } as a zoom annotation on the current test
During rendering, enrichZoomFromReport() reads these annotations and applies crop-and-scale zoom with smooth easing transitions

Zoom coordinates

The stored coordinates use viewport-relative fractions:

Field	Range	Description
`x`	0.0--1.0	Center X (0 = left edge, 1 = right edge)
`y`	0.0--1.0	Center Y (0 = top edge, 1 = bottom edge)
`level`	1.0+	Zoom factor (1.0 = no zoom)

Example in a BDD step

import { When } from './fixtures'
import { narrate, zoom } from 'playwright-recast'

When('the user opens the sidebar', async ({ page }, docString?: string) => {
  narrate(docString)
  const sidebar = page.locator('.sidebar-panel')
  await zoom(sidebar, 1.3)
  await sidebar.click()
})

When the user opens the sidebar
  """
  Let's take a closer look at the sidebar navigation.
  """

The video will zoom into the sidebar element during this step, then smoothly zoom back out when the next step begins.