Playwright · API reference · all subjects

page class - video recording

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

page.screencast.start() parameters

page.screencast.start() accepts an options object with the following properties: path (string, required) specifying the output WebM file path, and size (object with width and height properties) specifying the video dimensions in pixels.

page.screencast.showChapter() method

page.screencast.showChapter(title, options) displays a full-screen chapter card with a blurred backdrop. It accepts a title string and an options object with optional properties: description (string), duration (number in milliseconds), and styleSheet (string). The method blocks until the duration expires, then auto-removes the overlay.

page.screencast.showOverlay() method

page.screencast.showOverlay(html, options) displays custom HTML as an overlay on the page. It accepts an html string containing the overlay markup and an optional options object with a duration property (number in milliseconds). When duration is specified, the overlay auto-removes after that time. When no duration is provided, it returns a disposable object with a dispose() method to manually remove the overlay. Overlays have pointer-events: none and do not interfere with page interactions.

page.screencast.stop() method

page.screencast.stop() stops video recording and finalizes the output WebM file.

page.screencast.hideOverlays() and showOverlays() methods

page.screencast.hideOverlays() temporarily hides all active overlays. page.screencast.showOverlays() shows them again.

disposable.dispose() method

disposable.dispose() removes a sticky overlay that was created with page.screencast.showOverlay() without a duration parameter.

Video recording produces WebM format

Video recording captures browser automation sessions as WebM files using VP8/VP9 codec.

Overlay pointer-events behavior

Overlays created with page.screencast.showOverlay() have pointer-events: none applied, which means they do not interfere with page interactions and can safely remain visible while clicking, filling, or performing actions on the page.

Video recording example with chapters and overlays

async page => { await page.screencast.start({ path: 'video.webm', size: { width: 1280, height: 800 } }); await page.goto('https://demo.playwright.dev/todomvc'); await page.screencast.showChapter('Adding Todo Items', { description: 'We will add several items to the todo list.', duration: 2000, }); await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Walk the dog', { delay: 60 }); await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter'); await page.waitForTimeout(1000); await page.screencast.showChapter('Verifying Results', { description: 'Checking the item appeared in the list.', duration: 2000, }); const annotation = await page.screencast.showOverlay(` <div style="position: absolute; top: 8px; right: 8px; padding: 6px 12px; background: rgba(0,0,0,0.7); border-radius: 8px; font-size: 13px; color: white;"> ✓ Item added successfully </div> `); await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Buy groceries', { delay: 60 }); await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter'); await page.waitForTimeout(1500); await annotation.dispose(); const bounds = await page.getByText('Walk the dog').boundingBox(); await page.screencast.showOverlay(` <div style="position: absolute; top: ${bounds.y}px; left: ${bounds.x}px; width: ${bounds.width}px; height: ${bounds.height}px; border: 1px solid red;"> </div> <div style="position: absolute; top: ${bounds.y + bounds.height + 5}px; left: ${bounds.x + bounds.width / 2}px; transform: translateX(-50%); padding: 6px; background: #808080; border-radius: 10px; font-size: 14px; color: white;">Check it out, it is right above this text </div> `, { duration: 2000 }); await page.screencast.stop(); }

Give your agent this brain