Text Highlight

Animated marker overlays on text elements. A swipe-in animation reveals the highlight left-to-right, then the overlay disappears at the subtitle boundary.

The renderer accepts highlight events from two sources:

Trace step markers (default). When the test uses the highlight() helper, each call writes a marker-prefixed test.step() into the trace zip. subtitlesFromTrace() reads these at parse time and the renderer draws the overlays automatically — no .textHighlight() call required.
External report.json. Calling .textHighlight() loads highlights from a report.json file sitting next to the trace, useful when your highlights come from a non-Playwright source.

Helper-driven (recommended)

await Recast
  .from('./traces')
  .parse()
  .subtitlesFromTrace()       // picks up highlight markers automatically
  .render({ format: 'mp4' })
  .toFile('demo.mp4')

Loading from report.json

await Recast
  .from('./traces')
  .parse()
  .textHighlight()            // loads from <trace>/report.json
  .render({ format: 'mp4' })
  .toFile('demo.mp4')

How it works

The swipe-in animation reveals the highlight from left to right. The highlight end time is clamped to the subtitle boundary so overlays do not overflow into the next step.

The `highlight()` helper

Capture highlight targets during test execution:

import { highlight } from 'playwright-recast'

When('the user sees the total', async ({ page }) => {
  const total = page.locator('.total-amount')
  await highlight(total)
})

Highlighting specific text

Target a substring within an element:

// Highlight just "Revenue" inside a heading
await highlight(page.locator('h1'), { text: 'Revenue' })

The helper uses the Range API to find the exact text position, including support for text inside input and textarea elements via mirror measurement.

The helper stores the element's bounding box as a Playwright annotation. These annotations are read by .textHighlight() during video generation.

CLI equivalent

Text highlight is configured through the programmatic API and report data.

Tips

Place .textHighlight() after subtitle generation so highlight timing aligns with subtitle boundaries.
Highlight data comes from report.json — the file is generated automatically when using the highlight() step helper.
Only actions from the recording context are processed. Setup/background highlights are filtered out.