add playwright screen recording example #1269

tkattkat · 2025-11-14T21:52:33Z

why

We have users who are unsure how to record videos of the page in v3

what changed

added example of using playwright in v3 to record videos

test plan

tested locally

addresses #1252

changeset-bot · 2025-11-14T21:52:37Z

🦋 Changeset detected

Latest commit: 9ee5687

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@browserbasehq/stagehand	Patch
@browserbasehq/stagehand-evals	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

greptile-apps · 2025-11-14T21:54:50Z

Greptile Overview

Greptile Summary

Added a comprehensive example demonstrating how to use Playwright's video recording feature with Stagehand v3, addressing user confusion about video recording after migrating from v2.5.

The example shows the complete workflow: connecting to the Stagehand browser via CDP, creating a Playwright context with video recording enabled, performing Stagehand operations (act and extract), and properly saving the video file.

Key changes:

New example file recordVideo.ts showing Playwright CDP connection pattern
Demonstrates creating a custom Playwright context with recordVideo configuration
Shows proper video handle capture and path retrieval after context closure
Includes proper cleanup with try/finally block
Standard changeset added for patch release

Issues found:

One indentation error on line 27 that needs correction

Confidence Score: 4/5

Safe to merge after fixing the indentation issue
The implementation is correct and addresses the user's need for video recording in v3. The code follows the existing pattern from other examples (playwright.ts, puppeteer.ts), properly handles resources with try/finally, and demonstrates the complete video recording workflow. Only issue is a minor indentation error that will cause linting to fail.
Fix indentation in packages/core/examples/v3/recordVideo.ts:27 before merging

Important Files Changed

File Analysis

Filename	Score	Overview
packages/core/examples/v3/recordVideo.ts	4/5	New example showing Playwright video recording integration with Stagehand v3, has one indentation issue
.changeset/thin-hotels-feel.md	5/5	Standard changeset file for patch release documenting the new example

Sequence Diagram

sequenceDiagram
    participant User
    participant Stagehand
    participant Chromium
    participant Browser
    participant Context
    participant Page
    participant FileSystem

    User->>Stagehand: new Stagehand({env: "LOCAL"})
    User->>Stagehand: init()
    Stagehand->>Browser: Launch browser session
    
    User->>Chromium: connectOverCDP(connectURL)
    Chromium->>Browser: Connect via CDP
    Browser-->>Chromium: Browser instance
    
    User->>FileSystem: mkdir(videoDir, {recursive: true})
    FileSystem-->>User: Directory created
    
    User->>Browser: newContext({recordVideo: {...}})
    Browser->>Context: Create context with video recording
    Context-->>User: Context instance
    
    User->>Context: newPage()
    Context->>Page: Create new page
    Page-->>User: Page instance
    
    User->>Page: goto(url)
    Page-->>User: Page loaded
    
    User->>Stagehand: act('click the introduction div')
    Stagehand->>Page: Perform action
    Page-->>Stagehand: Action completed
    
    User->>Stagehand: extract('list primitives', schema, {page})
    Stagehand->>Page: Extract data
    Page-->>Stagehand: Extracted data
    Stagehand-->>User: {primitives: [...]}
    
    User->>Page: video()
    Page-->>User: Video handle
    
    User->>Context: close()
    Context->>FileSystem: Save video file
    FileSystem-->>Context: Video saved
    Context-->>User: Context closed
    
    User->>User: video.path()
    User->>User: Log video path
    
    User->>Stagehand: close()
    Stagehand->>Browser: Close browser
    Browser-->>Stagehand: Closed

greptile-apps

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps · 2025-11-14T21:54:50Z

packages/core/examples/v3/recordVideo.ts

+    waitUntil: "domcontentloaded",
+  });
+
+  await stagehand.act("click the introduction div in the first steps section");


syntax: incorrect indentation breaks code formatting

Suggested change

await stagehand.act("click the introduction div in the first steps section");

await stagehand.act('click the introduction div in the first steps section')

Prompt To Fix With AI

This is a comment left during a code review. Path: packages/core/examples/v3/recordVideo.ts Line: 27:27 Comment: **syntax:** incorrect indentation breaks code formatting ```suggestion await stagehand.act('click the introduction div in the first steps section') ``` How can I resolve this? If you propose a fix, please make it concise.

@seanmcguire12

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @browserbasehq/[email protected] ### Patch Changes - [#1273](#1273) [`ab51232`](ab51232) Thanks [@seanmcguire12](https://github.com/seanmcguire12)! - fix: trigger shadow root rerender in OOPIFs by cloning & replacing instead of reloading - [#1268](#1268) [`c76ade0`](c76ade0) Thanks [@tkattkat](https://github.com/tkattkat)! - Expose reasoning, and cached input tokens in stagehand metrics - [#1267](#1267) [`ffb5e5d`](ffb5e5d) Thanks [@seanmcguire12](https://github.com/seanmcguire12)! - fix: file uploads failing on Browserbase - [#1269](#1269) [`772e735`](772e735) Thanks [@tkattkat](https://github.com/tkattkat)! - Add example using playwright screen recording ## @browserbasehq/[email protected] ### Patch Changes - Updated dependencies \[[`ab51232`](ab51232), [`c76ade0`](c76ade0), [`ffb5e5d`](ffb5e5d), [`772e735`](772e735)]: - @browserbasehq/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

@seanmcguire12

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @browserbasehq/[email protected] ### Patch Changes - [#1273](browserbase/stagehand#1273) [`ab51232`](browserbase/stagehand@ab51232) Thanks [@seanmcguire12](https://github.com/seanmcguire12)! - fix: trigger shadow root rerender in OOPIFs by cloning & replacing instead of reloading - [#1268](browserbase/stagehand#1268) [`c76ade0`](browserbase/stagehand@c76ade0) Thanks [@tkattkat](https://github.com/tkattkat)! - Expose reasoning, and cached input tokens in stagehand metrics - [#1267](browserbase/stagehand#1267) [`ffb5e5d`](browserbase/stagehand@ffb5e5d) Thanks [@seanmcguire12](https://github.com/seanmcguire12)! - fix: file uploads failing on Browserbase - [#1269](browserbase/stagehand#1269) [`772e735`](browserbase/stagehand@772e735) Thanks [@tkattkat](https://github.com/tkattkat)! - Add example using playwright screen recording ## @browserbasehq/[email protected] ### Patch Changes - Updated dependencies \[[`ab51232`](browserbase/stagehand@ab51232), [`c76ade0`](browserbase/stagehand@c76ade0), [`ffb5e5d`](browserbase/stagehand@ffb5e5d), [`772e735`](browserbase/stagehand@772e735)]: - @browserbasehq/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

add playwright screen recording example

701c32b

format

9ee5687

greptile-apps bot reviewed Nov 14, 2025

View reviewed changes

seanmcguire12 approved these changes Nov 14, 2025

View reviewed changes

tkattkat merged commit 772e735 into main Nov 14, 2025
15 checks passed

tkattkat mentioned this pull request Nov 14, 2025

How I can record video on Playwright page in Stagehand v3? #1252

Closed

This was referenced Nov 14, 2025

Version Packages #1270

Merged

Version Packages CloudEngineHub/stagehand#1

Open

seanmcguire12 mentioned this pull request Nov 21, 2025

Allow Stagehand to Attach to an Existing Playwright Page for Proper Video Recording in e2e testing #507

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

add playwright screen recording example #1269

add playwright screen recording example #1269

tkattkat commented Nov 14, 2025

Uh oh!

changeset-bot bot commented Nov 14, 2025 •

edited

Loading

Uh oh!

greptile-apps bot commented Nov 14, 2025

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot Nov 14, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	await stagehand.act("click the introduction div in the first steps section");
	await stagehand.act('click the introduction div in the first steps section')

add playwright screen recording example #1269

add playwright screen recording example #1269

Conversation

tkattkat commented Nov 14, 2025

why

what changed

test plan

Uh oh!

changeset-bot bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

greptile-apps bot commented Nov 14, 2025

Greptile Overview

Greptile Summary

Confidence Score: 4/5

Important Files Changed

Sequence Diagram

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Nov 14, 2025 •

edited

Loading