zoom

What it does

zoom(locator, level) measures the element's center as viewport-relative coordinates and emits a marker-prefixed test.step() directly into the Playwright trace zip. During video generation, subtitlesFromTrace() picks up these markers automatically and attaches the zoom to the currently-active subtitle — no separate .enrichZoomFromReport() call needed.

The zoom starts at the helper's call site (not at the start of the surrounding narration) and runs until the end of the subtitle, so the camera kicks in only once the target is visible.

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)
Writes a marker-prefixed test.step() carrying { x, y, level } into the trace zip (and pushes a matching zoom annotation onto testInfo for legacy reporters)
subtitlesFromTrace() finds the marker step at parse time and attaches the zoom to whichever subtitle covers the call site
The renderer applies the crop-and-scale zoom from the call-site time until the end of that subtitle, 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.