From 77cb3577c2972ca6414b7a10b66b7c53aaa6bf48 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Mon, 2 Mar 2026 17:31:53 -0800
Subject: [PATCH 1/7] feat(video): add screencast mode to Video.start for JPEG
 frame events

---
 docs/src/api/class-video.md                   | 24 +++++++
 packages/playwright-client/types/types.d.ts   | 70 +++++++++++++++++++
 packages/playwright-core/src/client/video.ts  | 22 +++++-
 .../playwright-core/src/protocol/validator.ts |  6 +-
 .../src/server/dispatchers/pageDispatcher.ts  | 21 +++++-
 .../playwright-core/src/server/screencast.ts  |  1 +
 packages/playwright-core/types/types.d.ts     | 70 +++++++++++++++++++
 packages/protocol/src/channels.d.ts           |  9 ++-
 packages/protocol/src/protocol.yml            | 11 ++-
 tests/library/video.spec.ts                   | 24 +++++++
 10 files changed, 251 insertions(+), 7 deletions(-)

diff --git a/docs/src/api/class-video.md b/docs/src/api/class-video.md
index 294478f29373b..df8950961b7b1 100644
--- a/docs/src/api/class-video.md
+++ b/docs/src/api/class-video.md
@@ -92,6 +92,23 @@ Saves the video to a user-specified path. If using the sync API, this must be ca
 Path where the video should be saved.
 
 
+## event: Video.frame
+* since: v1.59
+* langs: js
+- argument: <[Buffer]>
+
+Emitted for each screencast frame when video was started with `mode: 'screencast'`.
+
+**Usage**
+
+```js
+const video = page.video();
+video.on('frame', data => console.log('received frame, jpeg size:', data.length));
+await video.start({ mode: 'screencast' });
+// ... perform actions ...
+await video.stop();
+```
+
 ## async method: Video.start
 * since: v1.59
 
@@ -129,6 +146,13 @@ await page.Video.StartAsync();
 await page.Video.StopAsync(new() { Path = "video.webm" });
 ```
 
+### option: Video.start.mode
+* since: v1.59
+* langs: js
+- `mode` ?<[VideoMode]<"video"|"screencast">>
+
+Recording mode. When set to `'screencast'`, JPEG frames are emitted as [`event: Video.frame`] events on the [Video] object instead of writing a video file. Defaults to `'video'`.
+
 ### option: Video.start.size
 * since: v1.59
 - `size` ?<[Object]>
diff --git a/packages/playwright-client/types/types.d.ts b/packages/playwright-client/types/types.d.ts
index 979a929dd6823..177f24e1db8e7 100644
--- a/packages/playwright-client/types/types.d.ts
+++ b/packages/playwright-client/types/types.d.ts
@@ -21920,6 +21920,69 @@ export interface Tracing {
  *
  */
 export interface Video {
+  /**
+   * Emitted for each screencast frame when video was started with `mode: 'screencast'`.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const video = page.video();
+   * video.on('frame', data => console.log('received frame, jpeg size:', data.length));
+   * await video.start({ mode: 'screencast' });
+   * // ... perform actions ...
+   * await video.stop();
+   * ```
+   *
+   */
+  on(event: 'frame', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Adds an event listener that will be automatically removed after it is triggered once. See `addListener` for more information about this event.
+   */
+  once(event: 'frame', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Emitted for each screencast frame when video was started with `mode: 'screencast'`.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const video = page.video();
+   * video.on('frame', data => console.log('received frame, jpeg size:', data.length));
+   * await video.start({ mode: 'screencast' });
+   * // ... perform actions ...
+   * await video.stop();
+   * ```
+   *
+   */
+  addListener(event: 'frame', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Removes an event listener added by `on` or `addListener`.
+   */
+  removeListener(event: 'frame', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Removes an event listener added by `on` or `addListener`.
+   */
+  off(event: 'frame', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Emitted for each screencast frame when video was started with `mode: 'screencast'`.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const video = page.video();
+   * video.on('frame', data => console.log('received frame, jpeg size:', data.length));
+   * await video.start({ mode: 'screencast' });
+   * // ... perform actions ...
+   * await video.stop();
+   * ```
+   *
+   */
+  prependListener(event: 'frame', listener: (buffer: Buffer) => any): this;
+
   /**
    * Deletes the video file. Will wait for the video to finish if necessary.
    */
@@ -21952,6 +22015,13 @@ export interface Video {
    * @param options
    */
   start(options?: {
+    /**
+     * Recording mode. When set to `'screencast'`, JPEG frames are emitted as
+     * [video.on('frame')](https://playwright.dev/docs/api/class-video#video-event-frame) events on the
+     * [Video](https://playwright.dev/docs/api/class-video) object instead of writing a video file. Defaults to `'video'`.
+     */
+    mode?: "video"|"screencast";
+
     /**
      * Optional dimensions of the recorded video. If not specified the size will be equal to page viewport scaled down to
      * fit into 800x800. Actual picture of the page will be scaled down if necessary to fit the specified size.
diff --git a/packages/playwright-core/src/client/video.ts b/packages/playwright-core/src/client/video.ts
index 2c0d700508b7e..9963852fab7ec 100644
--- a/packages/playwright-core/src/client/video.ts
+++ b/packages/playwright-core/src/client/video.ts
@@ -15,30 +15,46 @@
  */
 
 import { Artifact } from './artifact';
+import { EventEmitter } from './eventEmitter';
 
 import type { Connection } from './connection';
 import type { Page } from './page';
 import type * as api from '../../types/types';
+import type * as channels from '@protocol/channels';
 
-export class Video implements api.Video {
+export class Video extends EventEmitter implements api.Video {
   private _artifact: Artifact | undefined;
   private _isRemote = false;
   private _page: Page;
+  private _stopFrameEvents: (() => void) | null = null;
 
   constructor(page: Page, connection: Connection, artifact: Artifact | undefined) {
+    super(page._platform);
     this._page = page;
     this._isRemote = connection.isRemote();
     this._artifact = artifact;
   }
 
-  async start(options: { size?: { width: number, height: number } } = {}): Promise<void> {
+  async start(options: { size?: { width: number, height: number }, mode?: 'video' | 'screencast' } = {}): Promise<void> {
     const result = await this._page._channel.videoStart(options);
-    this._artifact = Artifact.from(result.artifact);
+    if (result.artifact)
+      this._artifact = Artifact.from(result.artifact);
+    if (options.mode === 'screencast') {
+      const listener = ({ data }: channels.PageVideoFrameEvent) => {
+        this.emit('frame', data);
+      };
+      this._page._channel.on('videoFrame', listener);
+      this._stopFrameEvents = () => (this._page._channel as unknown as EventEmitter).removeListener('videoFrame', listener);
+    }
   }
 
   async stop(options: { path?: string } = {}): Promise<void> {
     await this._page._wrapApiCall(async () => {
       await this._page._channel.videoStop();
+      if (this._stopFrameEvents) {
+        this._stopFrameEvents();
+        this._stopFrameEvents = null;
+      }
       if (options.path)
         await this.saveAs(options.path);
     });
diff --git a/packages/playwright-core/src/protocol/validator.ts b/packages/playwright-core/src/protocol/validator.ts
index d554ad8983b86..ac00a8782ed63 100644
--- a/packages/playwright-core/src/protocol/validator.ts
+++ b/packages/playwright-core/src/protocol/validator.ts
@@ -1231,6 +1231,9 @@ scheme.PageWebSocketRouteEvent = tObject({
 scheme.PageWebSocketEvent = tObject({
   webSocket: tChannel(['WebSocket']),
 });
+scheme.PageVideoFrameEvent = tObject({
+  data: tBinary,
+});
 scheme.PageWorkerEvent = tObject({
   worker: tChannel(['Worker']),
 });
@@ -1541,9 +1544,10 @@ scheme.PageVideoStartParams = tObject({
     width: tInt,
     height: tInt,
   })),
+  mode: tOptional(tEnum(['video', 'screencast'])),
 });
 scheme.PageVideoStartResult = tObject({
-  artifact: tChannel(['Artifact']),
+  artifact: tOptional(tChannel(['Artifact'])),
 });
 scheme.PageVideoStopParams = tOptional(tObject({}));
 scheme.PageVideoStopResult = tOptional(tObject({}));
diff --git a/packages/playwright-core/src/server/dispatchers/pageDispatcher.ts b/packages/playwright-core/src/server/dispatchers/pageDispatcher.ts
index 96875090ee40d..b256011ad4755 100644
--- a/packages/playwright-core/src/server/dispatchers/pageDispatcher.ts
+++ b/packages/playwright-core/src/server/dispatchers/pageDispatcher.ts
@@ -17,6 +17,7 @@
 import { Page, Worker } from '../page';
 import { Dispatcher } from './dispatcher';
 import { parseError, serializeError } from '../errors';
+import { validateVideoSize } from '../browserContext';
 import { ArtifactDispatcher } from './artifactDispatcher';
 import { ElementHandleDispatcher } from './elementHandlerDispatcher';
 import { FrameDispatcher } from './frameDispatcher';
@@ -27,6 +28,7 @@ import { RouteDispatcher, WebSocketDispatcher } from './networkDispatchers';
 import { WebSocketRouteDispatcher } from './webSocketRouteDispatcher';
 import { SdkObject } from '../instrumentation';
 import { deserializeURLMatch, urlMatches } from '../../utils/isomorphic/urlMatch';
+import { eventsHelper } from '../../utils';
 import { PageAgentDispatcher } from './pageAgentDispatcher';
 import { Recorder } from '../recorder';
 
@@ -38,11 +40,13 @@ import type { FileChooser } from '../fileChooser';
 import type { JSHandle } from '../javascript';
 import type { BrowserContextDispatcher } from './browserContextDispatcher';
 import type { Frame } from '../frames';
+import type { RegisteredListener } from '../../utils';
 import type { RouteHandler } from '../network';
 import type { InitScript, PageBinding } from '../page';
 import type * as channels from '@protocol/channels';
 import type { Progress } from '@protocol/progress';
 import type { URLMatch } from '../../utils/isomorphic/urlMatch';
+import type * as types from '../types';
 
 export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, BrowserContextDispatcher> implements channels.PageChannel {
   _type_EventTarget = true;
@@ -58,6 +62,7 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, Brows
   private _locatorHandlers = new Set<number>();
   private _jsCoverageActive = false;
   private _cssCoverageActive = false;
+  private _videoFrameListener: RegisteredListener | null = null;
 
   static from(parentScope: BrowserContextDispatcher, page: Page): PageDispatcher {
     return PageDispatcher.fromNullable(parentScope, page)!;
@@ -357,11 +362,25 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, Brows
   }
 
   async videoStart(params: channels.PageVideoStartParams, progress: Progress): Promise<channels.PageVideoStartResult> {
+    if (params.mode === 'screencast') {
+      const size = validateVideoSize(params.size, this._page.emulatedSize()?.viewport);
+      this._videoFrameListener = eventsHelper.addEventListener(this._page, Page.Events.ScreencastFrame, (frame: types.ScreencastFrame) => {
+        this._dispatchEvent('videoFrame', { data: frame.buffer });
+      });
+      await this._page.screencast.startScreencast(this, { quality: 90, width: size.width, height: size.height });
+      return {};
+    }
     const artifact = await this._page.screencast.startExplicitVideoRecording(params);
-    return { artifact: createVideoDispatcher(this.parentScope(), artifact) };
+    return { artifact: createVideoDispatcher(this.parentScope(), artifact!) };
   }
 
   async videoStop(params: channels.PageVideoStopParams, progress: Progress): Promise<channels.PageVideoStopResult> {
+    if (this._videoFrameListener) {
+      await this._page.screencast.stopScreencast(this);
+      eventsHelper.removeEventListeners([this._videoFrameListener]);
+      this._videoFrameListener = null;
+      return;
+    }
     await this._page.screencast.stopExplicitVideoRecording();
   }
 
diff --git a/packages/playwright-core/src/server/screencast.ts b/packages/playwright-core/src/server/screencast.ts
index 38de70b9e9a75..d84eea5d41406 100644
--- a/packages/playwright-core/src/server/screencast.ts
+++ b/packages/playwright-core/src/server/screencast.ts
@@ -28,6 +28,7 @@ export class Screencast {
   private _page: Page;
   private _videoRecorder: VideoRecorder | null = null;
   private _videoId: string | null = null;
+  private _framesMode = false;
   private _screencastClients = new Set<unknown>();
 
   // Aiming at 25 fps by default - each frame is 40ms, but we give some slack with 35ms.
diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts
index 979a929dd6823..177f24e1db8e7 100644
--- a/packages/playwright-core/types/types.d.ts
+++ b/packages/playwright-core/types/types.d.ts
@@ -21920,6 +21920,69 @@ export interface Tracing {
  *
  */
 export interface Video {
+  /**
+   * Emitted for each screencast frame when video was started with `mode: 'screencast'`.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const video = page.video();
+   * video.on('frame', data => console.log('received frame, jpeg size:', data.length));
+   * await video.start({ mode: 'screencast' });
+   * // ... perform actions ...
+   * await video.stop();
+   * ```
+   *
+   */
+  on(event: 'frame', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Adds an event listener that will be automatically removed after it is triggered once. See `addListener` for more information about this event.
+   */
+  once(event: 'frame', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Emitted for each screencast frame when video was started with `mode: 'screencast'`.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const video = page.video();
+   * video.on('frame', data => console.log('received frame, jpeg size:', data.length));
+   * await video.start({ mode: 'screencast' });
+   * // ... perform actions ...
+   * await video.stop();
+   * ```
+   *
+   */
+  addListener(event: 'frame', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Removes an event listener added by `on` or `addListener`.
+   */
+  removeListener(event: 'frame', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Removes an event listener added by `on` or `addListener`.
+   */
+  off(event: 'frame', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Emitted for each screencast frame when video was started with `mode: 'screencast'`.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const video = page.video();
+   * video.on('frame', data => console.log('received frame, jpeg size:', data.length));
+   * await video.start({ mode: 'screencast' });
+   * // ... perform actions ...
+   * await video.stop();
+   * ```
+   *
+   */
+  prependListener(event: 'frame', listener: (buffer: Buffer) => any): this;
+
   /**
    * Deletes the video file. Will wait for the video to finish if necessary.
    */
@@ -21952,6 +22015,13 @@ export interface Video {
    * @param options
    */
   start(options?: {
+    /**
+     * Recording mode. When set to `'screencast'`, JPEG frames are emitted as
+     * [video.on('frame')](https://playwright.dev/docs/api/class-video#video-event-frame) events on the
+     * [Video](https://playwright.dev/docs/api/class-video) object instead of writing a video file. Defaults to `'video'`.
+     */
+    mode?: "video"|"screencast";
+
     /**
      * Optional dimensions of the recorded video. If not specified the size will be equal to page viewport scaled down to
      * fit into 800x800. Actual picture of the page will be scaled down if necessary to fit the specified size.
diff --git a/packages/protocol/src/channels.d.ts b/packages/protocol/src/channels.d.ts
index f7206cdc0052b..b582c13c77eac 100644
--- a/packages/protocol/src/channels.d.ts
+++ b/packages/protocol/src/channels.d.ts
@@ -2102,6 +2102,7 @@ export interface PageEventTarget {
   on(event: 'route', callback: (params: PageRouteEvent) => void): this;
   on(event: 'webSocketRoute', callback: (params: PageWebSocketRouteEvent) => void): this;
   on(event: 'webSocket', callback: (params: PageWebSocketEvent) => void): this;
+  on(event: 'videoFrame', callback: (params: PageVideoFrameEvent) => void): this;
   on(event: 'worker', callback: (params: PageWorkerEvent) => void): this;
 }
 export interface PageChannel extends PageEventTarget, EventTargetChannel {
@@ -2192,6 +2193,9 @@ export type PageWebSocketRouteEvent = {
 export type PageWebSocketEvent = {
   webSocket: WebSocketChannel,
 };
+export type PageVideoFrameEvent = {
+  data: Binary,
+};
 export type PageWorkerEvent = {
   worker: WorkerChannel,
 };
@@ -2667,15 +2671,17 @@ export type PageVideoStartParams = {
     width: number,
     height: number,
   },
+  mode?: 'video' | 'screencast',
 };
 export type PageVideoStartOptions = {
   size?: {
     width: number,
     height: number,
   },
+  mode?: 'video' | 'screencast',
 };
 export type PageVideoStartResult = {
-  artifact: ArtifactChannel,
+  artifact?: ArtifactChannel,
 };
 export type PageVideoStopParams = {};
 export type PageVideoStopOptions = {};
@@ -2744,6 +2750,7 @@ export interface PageEvents {
   'route': PageRouteEvent;
   'webSocketRoute': PageWebSocketRouteEvent;
   'webSocket': PageWebSocketEvent;
+  'videoFrame': PageVideoFrameEvent;
   'worker': PageWorkerEvent;
 }
 
diff --git a/packages/protocol/src/protocol.yml b/packages/protocol/src/protocol.yml
index 1e27b0edbd380..74eec4c6cd1b4 100644
--- a/packages/protocol/src/protocol.yml
+++ b/packages/protocol/src/protocol.yml
@@ -2083,8 +2083,13 @@ Page:
           properties:
             width: int
             height: int
+        mode:
+          type: enum?
+          literals:
+          - video
+          - screencast
       returns:
-        artifact: Artifact
+        artifact: Artifact?
 
     videoStop:
       title: Stop video recording
@@ -2185,6 +2190,10 @@ Page:
       parameters:
         webSocket: WebSocket
 
+    videoFrame:
+      parameters:
+        data: binary
+
     worker:
       parameters:
         worker: Worker
diff --git a/tests/library/video.spec.ts b/tests/library/video.spec.ts
index 89154044bf50f..bf3bc788afbf0 100644
--- a/tests/library/video.spec.ts
+++ b/tests/library/video.spec.ts
@@ -897,6 +897,30 @@ it.describe('screencast', () => {
     await context.close();
     expectFrames(videoPath, size, isAlmostWhite);
   });
+
+  it('video.start with frames option emits frame events', async ({ browser, browserName, server }) => {
+    const size = browserName === 'firefox' ? { width: 500, height: 400 } : { width: 320, height: 240 };
+    const context = await browser.newContext({ viewport: size });
+    const page = await context.newPage();
+
+    const frames: Buffer[] = [];
+    page.video().on('frame', (data: Buffer) => frames.push(data));
+
+    await page.video().start({ size, mode: 'screencast' });
+    await page.goto(server.EMPTY_PAGE);
+    await page.evaluate(() => document.body.style.backgroundColor = 'red');
+    await rafraf(page, 100);
+    await page.video().stop();
+
+    expect(frames.length).toBeGreaterThan(0);
+    // Each frame must be a valid JPEG (starts with FF D8)
+    for (const frame of frames) {
+      expect(frame[0]).toBe(0xff);
+      expect(frame[1]).toBe(0xd8);
+    }
+
+    await context.close();
+  });
 });
 
 it('should saveAs video', async ({ browser }, testInfo) => {

From 1cd284749bb400c2a4a71a3b49d5bb45c9e5a818 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Tue, 3 Mar 2026 11:59:30 -0800
Subject: [PATCH 2/7] move listeners

---
 packages/playwright-core/src/client/page.ts       |  1 +
 packages/playwright-core/src/client/video.ts      | 13 -------------
 .../src/server/dispatchers/pageDispatcher.ts      | 15 +++------------
 packages/playwright-core/src/server/screencast.ts |  1 -
 4 files changed, 4 insertions(+), 26 deletions(-)

diff --git a/packages/playwright-core/src/client/page.ts b/packages/playwright-core/src/client/page.ts
index 42f14dec3bb7d..76cf483c33cf0 100644
--- a/packages/playwright-core/src/client/page.ts
+++ b/packages/playwright-core/src/client/page.ts
@@ -142,6 +142,7 @@ export class Page extends ChannelOwner<channels.PageChannel> implements api.Page
       const artifactObject = Artifact.from(artifact);
       this.emit(Events.Page.Download, new Download(this, url, suggestedFilename, artifactObject));
     });
+    this._channel.on('videoFrame', ({ data }) => this._video.emit('frame', data));
     this._channel.on('fileChooser', ({ element, isMultiple }) => this.emit(Events.Page.FileChooser, new FileChooser(this, ElementHandle.from(element), isMultiple)));
     this._channel.on('frameAttached', ({ frame }) => this._onFrameAttached(Frame.from(frame)));
     this._channel.on('frameDetached', ({ frame }) => this._onFrameDetached(Frame.from(frame)));
diff --git a/packages/playwright-core/src/client/video.ts b/packages/playwright-core/src/client/video.ts
index 9963852fab7ec..3a56812ed29e1 100644
--- a/packages/playwright-core/src/client/video.ts
+++ b/packages/playwright-core/src/client/video.ts
@@ -20,13 +20,11 @@ import { EventEmitter } from './eventEmitter';
 import type { Connection } from './connection';
 import type { Page } from './page';
 import type * as api from '../../types/types';
-import type * as channels from '@protocol/channels';
 
 export class Video extends EventEmitter implements api.Video {
   private _artifact: Artifact | undefined;
   private _isRemote = false;
   private _page: Page;
-  private _stopFrameEvents: (() => void) | null = null;
 
   constructor(page: Page, connection: Connection, artifact: Artifact | undefined) {
     super(page._platform);
@@ -39,22 +37,11 @@ export class Video extends EventEmitter implements api.Video {
     const result = await this._page._channel.videoStart(options);
     if (result.artifact)
       this._artifact = Artifact.from(result.artifact);
-    if (options.mode === 'screencast') {
-      const listener = ({ data }: channels.PageVideoFrameEvent) => {
-        this.emit('frame', data);
-      };
-      this._page._channel.on('videoFrame', listener);
-      this._stopFrameEvents = () => (this._page._channel as unknown as EventEmitter).removeListener('videoFrame', listener);
-    }
   }
 
   async stop(options: { path?: string } = {}): Promise<void> {
     await this._page._wrapApiCall(async () => {
       await this._page._channel.videoStop();
-      if (this._stopFrameEvents) {
-        this._stopFrameEvents();
-        this._stopFrameEvents = null;
-      }
       if (options.path)
         await this.saveAs(options.path);
     });
diff --git a/packages/playwright-core/src/server/dispatchers/pageDispatcher.ts b/packages/playwright-core/src/server/dispatchers/pageDispatcher.ts
index b256011ad4755..918efda653c73 100644
--- a/packages/playwright-core/src/server/dispatchers/pageDispatcher.ts
+++ b/packages/playwright-core/src/server/dispatchers/pageDispatcher.ts
@@ -28,7 +28,6 @@ import { RouteDispatcher, WebSocketDispatcher } from './networkDispatchers';
 import { WebSocketRouteDispatcher } from './webSocketRouteDispatcher';
 import { SdkObject } from '../instrumentation';
 import { deserializeURLMatch, urlMatches } from '../../utils/isomorphic/urlMatch';
-import { eventsHelper } from '../../utils';
 import { PageAgentDispatcher } from './pageAgentDispatcher';
 import { Recorder } from '../recorder';
 
@@ -62,7 +61,6 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, Brows
   private _locatorHandlers = new Set<number>();
   private _jsCoverageActive = false;
   private _cssCoverageActive = false;
-  private _videoFrameListener: RegisteredListener | null = null;
 
   static from(parentScope: BrowserContextDispatcher, page: Page): PageDispatcher {
     return PageDispatcher.fromNullable(parentScope, page)!;
@@ -111,6 +109,7 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, Brows
       // Artifact can outlive the page, so bind to the context scope.
       this._dispatchEvent('download', { url: download.url, suggestedFilename: download.suggestedFilename(), artifact: ArtifactDispatcher.from(parentScope, download.artifact) });
     });
+    this.addObjectListener(Page.Events.ScreencastFrame, (frame: types.ScreencastFrame) => this._dispatchEvent('videoFrame', { data: frame.buffer }));
     this.addObjectListener(Page.Events.EmulatedSizeChanged, () => this._dispatchEvent('viewportSizeChanged', { viewportSize: page.emulatedSize()?.viewport }));
     this.addObjectListener(Page.Events.FileChooser, (fileChooser: FileChooser) => this._dispatchEvent('fileChooser', {
       element: ElementHandleDispatcher.from(mainFrame, fileChooser.element()),
@@ -364,23 +363,15 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, Brows
   async videoStart(params: channels.PageVideoStartParams, progress: Progress): Promise<channels.PageVideoStartResult> {
     if (params.mode === 'screencast') {
       const size = validateVideoSize(params.size, this._page.emulatedSize()?.viewport);
-      this._videoFrameListener = eventsHelper.addEventListener(this._page, Page.Events.ScreencastFrame, (frame: types.ScreencastFrame) => {
-        this._dispatchEvent('videoFrame', { data: frame.buffer });
-      });
       await this._page.screencast.startScreencast(this, { quality: 90, width: size.width, height: size.height });
       return {};
     }
     const artifact = await this._page.screencast.startExplicitVideoRecording(params);
-    return { artifact: createVideoDispatcher(this.parentScope(), artifact!) };
+    return { artifact: createVideoDispatcher(this.parentScope(), artifact) };
   }
 
   async videoStop(params: channels.PageVideoStopParams, progress: Progress): Promise<channels.PageVideoStopResult> {
-    if (this._videoFrameListener) {
-      await this._page.screencast.stopScreencast(this);
-      eventsHelper.removeEventListeners([this._videoFrameListener]);
-      this._videoFrameListener = null;
-      return;
-    }
+    await this._page.screencast.stopScreencast(this);
     await this._page.screencast.stopExplicitVideoRecording();
   }
 
diff --git a/packages/playwright-core/src/server/screencast.ts b/packages/playwright-core/src/server/screencast.ts
index d84eea5d41406..38de70b9e9a75 100644
--- a/packages/playwright-core/src/server/screencast.ts
+++ b/packages/playwright-core/src/server/screencast.ts
@@ -28,7 +28,6 @@ export class Screencast {
   private _page: Page;
   private _videoRecorder: VideoRecorder | null = null;
   private _videoId: string | null = null;
-  private _framesMode = false;
   private _screencastClients = new Set<unknown>();
 
   // Aiming at 25 fps by default - each frame is 40ms, but we give some slack with 35ms.

From b81a3502985951fe433fc22b8e623b65b969379d Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Tue, 3 Mar 2026 14:59:20 -0800
Subject: [PATCH 3/7] inspector namespace

---
 docs/src/api/class-inspector.md               |  71 ++++++
 docs/src/api/class-page.md                    |  19 ++
 docs/src/api/class-video.md                   |  24 --
 packages/playwright-client/types/types.d.ts   | 225 ++++++++++++------
 .../playwright-core/src/client/inspector.ts   |  38 +++
 packages/playwright-core/src/client/page.ts   |   8 +-
 packages/playwright-core/src/client/video.ts  |   5 +-
 .../playwright-core/src/protocol/validator.ts |  18 +-
 .../src/server/dispatchers/pageDispatcher.ts  |  22 +-
 .../src/utils/isomorphic/protocolMetainfo.ts  |   2 +
 packages/playwright-core/types/types.d.ts     | 225 ++++++++++++------
 packages/protocol/src/channels.d.ts           |  32 ++-
 packages/protocol/src/protocol.yml            |  29 ++-
 tests/library/video.spec.ts                   |  12 +-
 14 files changed, 523 insertions(+), 207 deletions(-)
 create mode 100644 docs/src/api/class-inspector.md
 create mode 100644 packages/playwright-core/src/client/inspector.ts

diff --git a/docs/src/api/class-inspector.md b/docs/src/api/class-inspector.md
new file mode 100644
index 0000000000000..9ec866a7447d3
--- /dev/null
+++ b/docs/src/api/class-inspector.md
@@ -0,0 +1,71 @@
+# class: Inspector
+* since: v1.59
+* langs: js
+
+The `Inspector` object provides access to the Playwright inspector's screencast capabilities, allowing you to capture live JPEG frames from the page as it renders.
+
+**Usage**
+
+```js
+const inspector = page.inspector();
+inspector.on('screencastFrame', data => {
+  console.log('received frame, jpeg size:', data.length);
+});
+await inspector.startScreencast();
+// ... perform actions ...
+await inspector.stopScreencast();
+```
+
+## event: Inspector.screencastFrame
+* since: v1.59
+- argument: <[Buffer]>
+
+Emitted for each captured JPEG screencast frame while the screencast is running.
+
+**Usage**
+
+```js
+const inspector = page.inspector();
+inspector.on('screencastFrame', data => {
+  require('fs').writeFileSync('frame.jpg', data);
+});
+await inspector.startScreencast({ size: { width: 1280, height: 720 } });
+// ... perform actions ...
+await inspector.stopScreencast();
+```
+
+## async method: Inspector.startScreencast
+* since: v1.59
+
+Starts capturing screencast frames. Frames are emitted as [`event: Inspector.screencastFrame`] events.
+
+**Usage**
+
+```js
+const inspector = page.inspector();
+inspector.on('screencastFrame', data => console.log('frame size:', data.length));
+await inspector.startScreencast({ size: { width: 800, height: 600 } });
+// ... perform actions ...
+await inspector.stopScreencast();
+```
+
+### option: Inspector.startScreencast.size
+* since: v1.59
+- `size` ?<[Object]>
+  - `width` <[int]> Frame width in pixels.
+  - `height` <[int]> Frame height in pixels.
+
+Optional dimensions for the screencast frames. If not specified, the page viewport size is used.
+
+## async method: Inspector.stopScreencast
+* since: v1.59
+
+Stops the screencast started with [`method: Inspector.startScreencast`].
+
+**Usage**
+
+```js
+await inspector.startScreencast();
+// ... perform actions ...
+await inspector.stopScreencast();
+```
diff --git a/docs/src/api/class-page.md b/docs/src/api/class-page.md
index fa226172acb9f..4618253e18d4d 100644
--- a/docs/src/api/class-page.md
+++ b/docs/src/api/class-page.md
@@ -2597,6 +2597,25 @@ Throws for non-input elements. However, if the element is inside the `<label>` e
 ### option: Page.inputValue.timeout = %%-input-timeout-js-%%
 * since: v1.13
 
+## method: Page.inspector
+* since: v1.59
+* langs: js
+- returns: <[Inspector]>
+
+Returns the [Inspector] object associated with this page.
+
+**Usage**
+
+```js
+const inspector = page.inspector();
+inspector.on('screencastFrame', data => {
+  console.log('received frame, jpeg size:', data.length);
+});
+await inspector.startScreencast();
+// ... perform actions ...
+await inspector.stopScreencast();
+```
+
 ## async method: Page.isChecked
 * since: v1.8
 * discouraged: Use locator-based [`method: Locator.isChecked`] instead. Read more about [locators](../locators.md).
diff --git a/docs/src/api/class-video.md b/docs/src/api/class-video.md
index df8950961b7b1..294478f29373b 100644
--- a/docs/src/api/class-video.md
+++ b/docs/src/api/class-video.md
@@ -92,23 +92,6 @@ Saves the video to a user-specified path. If using the sync API, this must be ca
 Path where the video should be saved.
 
 
-## event: Video.frame
-* since: v1.59
-* langs: js
-- argument: <[Buffer]>
-
-Emitted for each screencast frame when video was started with `mode: 'screencast'`.
-
-**Usage**
-
-```js
-const video = page.video();
-video.on('frame', data => console.log('received frame, jpeg size:', data.length));
-await video.start({ mode: 'screencast' });
-// ... perform actions ...
-await video.stop();
-```
-
 ## async method: Video.start
 * since: v1.59
 
@@ -146,13 +129,6 @@ await page.Video.StartAsync();
 await page.Video.StopAsync(new() { Path = "video.webm" });
 ```
 
-### option: Video.start.mode
-* since: v1.59
-* langs: js
-- `mode` ?<[VideoMode]<"video"|"screencast">>
-
-Recording mode. When set to `'screencast'`, JPEG frames are emitted as [`event: Video.frame`] events on the [Video] object instead of writing a video file. Defaults to `'video'`.
-
 ### option: Video.start.size
 * since: v1.59
 - `size` ?<[Object]>
diff --git a/packages/playwright-client/types/types.d.ts b/packages/playwright-client/types/types.d.ts
index 177f24e1db8e7..3cf8bab46d8b2 100644
--- a/packages/playwright-client/types/types.d.ts
+++ b/packages/playwright-client/types/types.d.ts
@@ -3508,6 +3508,24 @@ export interface Page {
     timeout?: number;
   }): Promise<string>;
 
+  /**
+   * Returns the [Inspector](https://playwright.dev/docs/api/class-inspector) object associated with this page.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const inspector = page.inspector();
+   * inspector.on('screencastFrame', data => {
+   *   console.log('received frame, jpeg size:', data.length);
+   * });
+   * await inspector.startScreencast();
+   * // ... perform actions ...
+   * await inspector.stopScreencast();
+   * ```
+   *
+   */
+  inspector(): Inspector;
+
   /**
    * **NOTE** Use locator-based [locator.isChecked([options])](https://playwright.dev/docs/api/class-locator#locator-is-checked)
    * instead. Read more about [locators](https://playwright.dev/docs/locators).
@@ -20418,6 +20436,143 @@ export interface FrameLocator {
   owner(): Locator;
 }
 
+/**
+ * The `Inspector` object provides access to the Playwright inspector's screencast capabilities, allowing you to
+ * capture live JPEG frames from the page as it renders.
+ *
+ * **Usage**
+ *
+ * ```js
+ * const inspector = page.inspector();
+ * inspector.on('screencastFrame', data => {
+ *   console.log('received frame, jpeg size:', data.length);
+ * });
+ * await inspector.startScreencast();
+ * // ... perform actions ...
+ * await inspector.stopScreencast();
+ * ```
+ *
+ */
+export interface Inspector {
+  /**
+   * Emitted for each captured JPEG screencast frame while the screencast is running.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const inspector = page.inspector();
+   * inspector.on('screencastFrame', data => {
+   *   require('fs').writeFileSync('frame.jpg', data);
+   * });
+   * await inspector.startScreencast({ size: { width: 1280, height: 720 } });
+   * // ... perform actions ...
+   * await inspector.stopScreencast();
+   * ```
+   *
+   */
+  on(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Adds an event listener that will be automatically removed after it is triggered once. See `addListener` for more information about this event.
+   */
+  once(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Emitted for each captured JPEG screencast frame while the screencast is running.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const inspector = page.inspector();
+   * inspector.on('screencastFrame', data => {
+   *   require('fs').writeFileSync('frame.jpg', data);
+   * });
+   * await inspector.startScreencast({ size: { width: 1280, height: 720 } });
+   * // ... perform actions ...
+   * await inspector.stopScreencast();
+   * ```
+   *
+   */
+  addListener(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Removes an event listener added by `on` or `addListener`.
+   */
+  removeListener(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Removes an event listener added by `on` or `addListener`.
+   */
+  off(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Emitted for each captured JPEG screencast frame while the screencast is running.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const inspector = page.inspector();
+   * inspector.on('screencastFrame', data => {
+   *   require('fs').writeFileSync('frame.jpg', data);
+   * });
+   * await inspector.startScreencast({ size: { width: 1280, height: 720 } });
+   * // ... perform actions ...
+   * await inspector.stopScreencast();
+   * ```
+   *
+   */
+  prependListener(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Starts capturing screencast frames. Frames are emitted as
+   * [inspector.on('screencastframe')](https://playwright.dev/docs/api/class-inspector#inspector-event-screencast-frame)
+   * events.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const inspector = page.inspector();
+   * inspector.on('screencastFrame', data => console.log('frame size:', data.length));
+   * await inspector.startScreencast({ size: { width: 800, height: 600 } });
+   * // ... perform actions ...
+   * await inspector.stopScreencast();
+   * ```
+   *
+   * @param options
+   */
+  startScreencast(options?: {
+    /**
+     * Optional dimensions for the screencast frames. If not specified, the page viewport size is used.
+     */
+    size?: {
+      /**
+       * Frame width in pixels.
+       */
+      width: number;
+
+      /**
+       * Frame height in pixels.
+       */
+      height: number;
+    };
+  }): Promise<void>;
+
+  /**
+   * Stops the screencast started with
+   * [inspector.startScreencast([options])](https://playwright.dev/docs/api/class-inspector#inspector-start-screencast).
+   *
+   * **Usage**
+   *
+   * ```js
+   * await inspector.startScreencast();
+   * // ... perform actions ...
+   * await inspector.stopScreencast();
+   * ```
+   *
+   */
+  stopScreencast(): Promise<void>;
+}
+
 /**
  * Keyboard provides an api for managing a virtual keyboard. The high level api is
  * [keyboard.type(text[, options])](https://playwright.dev/docs/api/class-keyboard#keyboard-type), which takes raw
@@ -21920,69 +22075,6 @@ export interface Tracing {
  *
  */
 export interface Video {
-  /**
-   * Emitted for each screencast frame when video was started with `mode: 'screencast'`.
-   *
-   * **Usage**
-   *
-   * ```js
-   * const video = page.video();
-   * video.on('frame', data => console.log('received frame, jpeg size:', data.length));
-   * await video.start({ mode: 'screencast' });
-   * // ... perform actions ...
-   * await video.stop();
-   * ```
-   *
-   */
-  on(event: 'frame', listener: (buffer: Buffer) => any): this;
-
-  /**
-   * Adds an event listener that will be automatically removed after it is triggered once. See `addListener` for more information about this event.
-   */
-  once(event: 'frame', listener: (buffer: Buffer) => any): this;
-
-  /**
-   * Emitted for each screencast frame when video was started with `mode: 'screencast'`.
-   *
-   * **Usage**
-   *
-   * ```js
-   * const video = page.video();
-   * video.on('frame', data => console.log('received frame, jpeg size:', data.length));
-   * await video.start({ mode: 'screencast' });
-   * // ... perform actions ...
-   * await video.stop();
-   * ```
-   *
-   */
-  addListener(event: 'frame', listener: (buffer: Buffer) => any): this;
-
-  /**
-   * Removes an event listener added by `on` or `addListener`.
-   */
-  removeListener(event: 'frame', listener: (buffer: Buffer) => any): this;
-
-  /**
-   * Removes an event listener added by `on` or `addListener`.
-   */
-  off(event: 'frame', listener: (buffer: Buffer) => any): this;
-
-  /**
-   * Emitted for each screencast frame when video was started with `mode: 'screencast'`.
-   *
-   * **Usage**
-   *
-   * ```js
-   * const video = page.video();
-   * video.on('frame', data => console.log('received frame, jpeg size:', data.length));
-   * await video.start({ mode: 'screencast' });
-   * // ... perform actions ...
-   * await video.stop();
-   * ```
-   *
-   */
-  prependListener(event: 'frame', listener: (buffer: Buffer) => any): this;
-
   /**
    * Deletes the video file. Will wait for the video to finish if necessary.
    */
@@ -22015,13 +22107,6 @@ export interface Video {
    * @param options
    */
   start(options?: {
-    /**
-     * Recording mode. When set to `'screencast'`, JPEG frames are emitted as
-     * [video.on('frame')](https://playwright.dev/docs/api/class-video#video-event-frame) events on the
-     * [Video](https://playwright.dev/docs/api/class-video) object instead of writing a video file. Defaults to `'video'`.
-     */
-    mode?: "video"|"screencast";
-
     /**
      * Optional dimensions of the recorded video. If not specified the size will be equal to page viewport scaled down to
      * fit into 800x800. Actual picture of the page will be scaled down if necessary to fit the specified size.
diff --git a/packages/playwright-core/src/client/inspector.ts b/packages/playwright-core/src/client/inspector.ts
new file mode 100644
index 0000000000000..3efa07d646a3e
--- /dev/null
+++ b/packages/playwright-core/src/client/inspector.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { EventEmitter } from './eventEmitter';
+
+import type * as api from '../../types/types';
+import type { Page } from './page';
+
+export class Inspector extends EventEmitter implements api.Inspector {
+  private readonly _page: Page;
+
+  constructor(page: Page) {
+    super(page._platform);
+    this._page = page;
+    this._page._channel.on('screencastFrame', ({ data }) => this.emit('screencastframe', data));
+  }
+
+  async startScreencast(options: { size?: { width: number, height: number } } = {}): Promise<void> {
+    await this._page._channel.startScreencast(options);
+  }
+
+  async stopScreencast(): Promise<void> {
+    await this._page._channel.stopScreencast();
+  }
+}
diff --git a/packages/playwright-core/src/client/page.ts b/packages/playwright-core/src/client/page.ts
index 76cf483c33cf0..d1eaca443e12e 100644
--- a/packages/playwright-core/src/client/page.ts
+++ b/packages/playwright-core/src/client/page.ts
@@ -30,6 +30,7 @@ import { Keyboard, Mouse, Touchscreen } from './input';
 import { JSHandle, assertMaxArguments, parseResult, serializeArgument } from './jsHandle';
 import { Request, Response, Route, RouteHandler, WebSocket,  WebSocketRoute, WebSocketRouteHandler, validateHeaders } from './network';
 import { Video } from './video';
+import { Inspector } from './inspector';
 import { Waiter } from './waiter';
 import { Worker } from './worker';
 import { TimeoutSettings } from './timeoutSettings';
@@ -100,6 +101,7 @@ export class Page extends ChannelOwner<channels.PageChannel> implements api.Page
   readonly _bindings = new Map<string, (source: structs.BindingSource, ...args: any[]) => any>();
   readonly _timeoutSettings: TimeoutSettings;
   private _video: Video;
+  private _inspector: Inspector;
   readonly _opener: Page | null;
   private _closeReason: string | undefined;
   _closeWasCalled: boolean = false;
@@ -134,6 +136,7 @@ export class Page extends ChannelOwner<channels.PageChannel> implements api.Page
     this._closed = initializer.isClosed;
     this._opener = Page.fromNullable(initializer.opener);
     this._video = new Video(this, this._connection, initializer.video ? Artifact.from(initializer.video) : undefined);
+    this._inspector = new Inspector(this);
 
     this._channel.on('bindingCall', ({ binding }) => this._onBinding(BindingCall.from(binding)));
     this._channel.on('close', () => this._onClose());
@@ -142,7 +145,6 @@ export class Page extends ChannelOwner<channels.PageChannel> implements api.Page
       const artifactObject = Artifact.from(artifact);
       this.emit(Events.Page.Download, new Download(this, url, suggestedFilename, artifactObject));
     });
-    this._channel.on('videoFrame', ({ data }) => this._video.emit('frame', data));
     this._channel.on('fileChooser', ({ element, isMultiple }) => this.emit(Events.Page.FileChooser, new FileChooser(this, ElementHandle.from(element), isMultiple)));
     this._channel.on('frameAttached', ({ frame }) => this._onFrameAttached(Frame.from(frame)));
     this._channel.on('frameDetached', ({ frame }) => this._onFrameDetached(Frame.from(frame)));
@@ -284,6 +286,10 @@ export class Page extends ChannelOwner<channels.PageChannel> implements api.Page
     return this._video;
   }
 
+  inspector(): Inspector {
+    return this._inspector;
+  }
+
   async $(selector: string, options?: { strict?: boolean }): Promise<ElementHandle<SVGElement | HTMLElement> | null> {
     return await this._mainFrame.$(selector, options);
   }
diff --git a/packages/playwright-core/src/client/video.ts b/packages/playwright-core/src/client/video.ts
index 3a56812ed29e1..47e594ae536a7 100644
--- a/packages/playwright-core/src/client/video.ts
+++ b/packages/playwright-core/src/client/video.ts
@@ -33,10 +33,9 @@ export class Video extends EventEmitter implements api.Video {
     this._artifact = artifact;
   }
 
-  async start(options: { size?: { width: number, height: number }, mode?: 'video' | 'screencast' } = {}): Promise<void> {
+  async start(options: { size?: { width: number, height: number } } = {}): Promise<void> {
     const result = await this._page._channel.videoStart(options);
-    if (result.artifact)
-      this._artifact = Artifact.from(result.artifact);
+    this._artifact = Artifact.from(result.artifact);
   }
 
   async stop(options: { path?: string } = {}): Promise<void> {
diff --git a/packages/playwright-core/src/protocol/validator.ts b/packages/playwright-core/src/protocol/validator.ts
index ac00a8782ed63..87c4bbb4c1a0c 100644
--- a/packages/playwright-core/src/protocol/validator.ts
+++ b/packages/playwright-core/src/protocol/validator.ts
@@ -1225,15 +1225,15 @@ scheme.PageLocatorHandlerTriggeredEvent = tObject({
 scheme.PageRouteEvent = tObject({
   route: tChannel(['Route']),
 });
+scheme.PageScreencastFrameEvent = tObject({
+  data: tBinary,
+});
 scheme.PageWebSocketRouteEvent = tObject({
   webSocketRoute: tChannel(['WebSocketRoute']),
 });
 scheme.PageWebSocketEvent = tObject({
   webSocket: tChannel(['WebSocket']),
 });
-scheme.PageVideoFrameEvent = tObject({
-  data: tBinary,
-});
 scheme.PageWorkerEvent = tObject({
   worker: tChannel(['Worker']),
 });
@@ -1539,15 +1539,23 @@ scheme.PagePickLocatorResult = tObject({
 });
 scheme.PageCancelPickLocatorParams = tOptional(tObject({}));
 scheme.PageCancelPickLocatorResult = tOptional(tObject({}));
+scheme.PageStartScreencastParams = tObject({
+  size: tOptional(tObject({
+    width: tInt,
+    height: tInt,
+  })),
+});
+scheme.PageStartScreencastResult = tOptional(tObject({}));
+scheme.PageStopScreencastParams = tOptional(tObject({}));
+scheme.PageStopScreencastResult = tOptional(tObject({}));
 scheme.PageVideoStartParams = tObject({
   size: tOptional(tObject({
     width: tInt,
     height: tInt,
   })),
-  mode: tOptional(tEnum(['video', 'screencast'])),
 });
 scheme.PageVideoStartResult = tObject({
-  artifact: tOptional(tChannel(['Artifact'])),
+  artifact: tChannel(['Artifact']),
 });
 scheme.PageVideoStopParams = tOptional(tObject({}));
 scheme.PageVideoStopResult = tOptional(tObject({}));
diff --git a/packages/playwright-core/src/server/dispatchers/pageDispatcher.ts b/packages/playwright-core/src/server/dispatchers/pageDispatcher.ts
index 918efda653c73..c73c4909a1f4e 100644
--- a/packages/playwright-core/src/server/dispatchers/pageDispatcher.ts
+++ b/packages/playwright-core/src/server/dispatchers/pageDispatcher.ts
@@ -39,13 +39,12 @@ import type { FileChooser } from '../fileChooser';
 import type { JSHandle } from '../javascript';
 import type { BrowserContextDispatcher } from './browserContextDispatcher';
 import type { Frame } from '../frames';
-import type { RegisteredListener } from '../../utils';
 import type { RouteHandler } from '../network';
 import type { InitScript, PageBinding } from '../page';
 import type * as channels from '@protocol/channels';
 import type { Progress } from '@protocol/progress';
 import type { URLMatch } from '../../utils/isomorphic/urlMatch';
-import type * as types from '../types';
+import type { ScreencastFrame } from '../types';
 
 export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, BrowserContextDispatcher> implements channels.PageChannel {
   _type_EventTarget = true;
@@ -85,7 +84,7 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, Brows
       viewportSize: page.emulatedSize()?.viewport,
       isClosed: page.isClosed(),
       opener: PageDispatcher.fromNullable(parentScope, page.opener()),
-      video: page.video ? createVideoDispatcher(parentScope, page.video) : undefined,
+      video: page.video ? createVideoDispatcher(parentScope, page.video) : undefined
     });
 
     this.adopt(mainFrame);
@@ -109,7 +108,7 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, Brows
       // Artifact can outlive the page, so bind to the context scope.
       this._dispatchEvent('download', { url: download.url, suggestedFilename: download.suggestedFilename(), artifact: ArtifactDispatcher.from(parentScope, download.artifact) });
     });
-    this.addObjectListener(Page.Events.ScreencastFrame, (frame: types.ScreencastFrame) => this._dispatchEvent('videoFrame', { data: frame.buffer }));
+    this.addObjectListener(Page.Events.ScreencastFrame, (frame: ScreencastFrame) => this._dispatchEvent('screencastFrame', { data: frame.buffer }));
     this.addObjectListener(Page.Events.EmulatedSizeChanged, () => this._dispatchEvent('viewportSizeChanged', { viewportSize: page.emulatedSize()?.viewport }));
     this.addObjectListener(Page.Events.FileChooser, (fileChooser: FileChooser) => this._dispatchEvent('fileChooser', {
       element: ElementHandleDispatcher.from(mainFrame, fileChooser.element()),
@@ -360,18 +359,21 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, Brows
     await recorder?.setMode('none');
   }
 
+  async startScreencast(params: channels.PageStartScreencastParams, progress?: Progress): Promise<channels.PageStartScreencastResult> {
+    const size = validateVideoSize(params.size, this._page.emulatedSize()?.viewport);
+    await this._page.screencast.startScreencast(this, { quality: 90, width: size.width, height: size.height });
+  }
+
+  async stopScreencast(params: channels.PageStopScreencastParams, progress?: Progress): Promise<channels.PageStopScreencastResult> {
+    return this._page.screencast.stopScreencast(this);
+  }
+
   async videoStart(params: channels.PageVideoStartParams, progress: Progress): Promise<channels.PageVideoStartResult> {
-    if (params.mode === 'screencast') {
-      const size = validateVideoSize(params.size, this._page.emulatedSize()?.viewport);
-      await this._page.screencast.startScreencast(this, { quality: 90, width: size.width, height: size.height });
-      return {};
-    }
     const artifact = await this._page.screencast.startExplicitVideoRecording(params);
     return { artifact: createVideoDispatcher(this.parentScope(), artifact) };
   }
 
   async videoStop(params: channels.PageVideoStopParams, progress: Progress): Promise<channels.PageVideoStopResult> {
-    await this._page.screencast.stopScreencast(this);
     await this._page.screencast.stopExplicitVideoRecording();
   }
 
diff --git a/packages/playwright-core/src/utils/isomorphic/protocolMetainfo.ts b/packages/playwright-core/src/utils/isomorphic/protocolMetainfo.ts
index 2cdbb3dec7b53..8b5f29d09bcde 100644
--- a/packages/playwright-core/src/utils/isomorphic/protocolMetainfo.ts
+++ b/packages/playwright-core/src/utils/isomorphic/protocolMetainfo.ts
@@ -148,6 +148,8 @@ export const methodMetainfo = new Map<string, { internal?: boolean, title?: stri
   ['Page.bringToFront', { title: 'Bring to front', }],
   ['Page.pickLocator', { title: 'Pick locator', group: 'configuration', }],
   ['Page.cancelPickLocator', { title: 'Cancel pick locator', group: 'configuration', }],
+  ['Page.startScreencast', { title: 'Start screencast', group: 'configuration', }],
+  ['Page.stopScreencast', { title: 'Stop screencast', group: 'configuration', }],
   ['Page.videoStart', { title: 'Start video recording', group: 'configuration', }],
   ['Page.videoStop', { title: 'Stop video recording', group: 'configuration', }],
   ['Page.updateSubscription', { internal: true, }],
diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts
index 177f24e1db8e7..3cf8bab46d8b2 100644
--- a/packages/playwright-core/types/types.d.ts
+++ b/packages/playwright-core/types/types.d.ts
@@ -3508,6 +3508,24 @@ export interface Page {
     timeout?: number;
   }): Promise<string>;
 
+  /**
+   * Returns the [Inspector](https://playwright.dev/docs/api/class-inspector) object associated with this page.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const inspector = page.inspector();
+   * inspector.on('screencastFrame', data => {
+   *   console.log('received frame, jpeg size:', data.length);
+   * });
+   * await inspector.startScreencast();
+   * // ... perform actions ...
+   * await inspector.stopScreencast();
+   * ```
+   *
+   */
+  inspector(): Inspector;
+
   /**
    * **NOTE** Use locator-based [locator.isChecked([options])](https://playwright.dev/docs/api/class-locator#locator-is-checked)
    * instead. Read more about [locators](https://playwright.dev/docs/locators).
@@ -20418,6 +20436,143 @@ export interface FrameLocator {
   owner(): Locator;
 }
 
+/**
+ * The `Inspector` object provides access to the Playwright inspector's screencast capabilities, allowing you to
+ * capture live JPEG frames from the page as it renders.
+ *
+ * **Usage**
+ *
+ * ```js
+ * const inspector = page.inspector();
+ * inspector.on('screencastFrame', data => {
+ *   console.log('received frame, jpeg size:', data.length);
+ * });
+ * await inspector.startScreencast();
+ * // ... perform actions ...
+ * await inspector.stopScreencast();
+ * ```
+ *
+ */
+export interface Inspector {
+  /**
+   * Emitted for each captured JPEG screencast frame while the screencast is running.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const inspector = page.inspector();
+   * inspector.on('screencastFrame', data => {
+   *   require('fs').writeFileSync('frame.jpg', data);
+   * });
+   * await inspector.startScreencast({ size: { width: 1280, height: 720 } });
+   * // ... perform actions ...
+   * await inspector.stopScreencast();
+   * ```
+   *
+   */
+  on(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Adds an event listener that will be automatically removed after it is triggered once. See `addListener` for more information about this event.
+   */
+  once(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Emitted for each captured JPEG screencast frame while the screencast is running.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const inspector = page.inspector();
+   * inspector.on('screencastFrame', data => {
+   *   require('fs').writeFileSync('frame.jpg', data);
+   * });
+   * await inspector.startScreencast({ size: { width: 1280, height: 720 } });
+   * // ... perform actions ...
+   * await inspector.stopScreencast();
+   * ```
+   *
+   */
+  addListener(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Removes an event listener added by `on` or `addListener`.
+   */
+  removeListener(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Removes an event listener added by `on` or `addListener`.
+   */
+  off(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Emitted for each captured JPEG screencast frame while the screencast is running.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const inspector = page.inspector();
+   * inspector.on('screencastFrame', data => {
+   *   require('fs').writeFileSync('frame.jpg', data);
+   * });
+   * await inspector.startScreencast({ size: { width: 1280, height: 720 } });
+   * // ... perform actions ...
+   * await inspector.stopScreencast();
+   * ```
+   *
+   */
+  prependListener(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+
+  /**
+   * Starts capturing screencast frames. Frames are emitted as
+   * [inspector.on('screencastframe')](https://playwright.dev/docs/api/class-inspector#inspector-event-screencast-frame)
+   * events.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const inspector = page.inspector();
+   * inspector.on('screencastFrame', data => console.log('frame size:', data.length));
+   * await inspector.startScreencast({ size: { width: 800, height: 600 } });
+   * // ... perform actions ...
+   * await inspector.stopScreencast();
+   * ```
+   *
+   * @param options
+   */
+  startScreencast(options?: {
+    /**
+     * Optional dimensions for the screencast frames. If not specified, the page viewport size is used.
+     */
+    size?: {
+      /**
+       * Frame width in pixels.
+       */
+      width: number;
+
+      /**
+       * Frame height in pixels.
+       */
+      height: number;
+    };
+  }): Promise<void>;
+
+  /**
+   * Stops the screencast started with
+   * [inspector.startScreencast([options])](https://playwright.dev/docs/api/class-inspector#inspector-start-screencast).
+   *
+   * **Usage**
+   *
+   * ```js
+   * await inspector.startScreencast();
+   * // ... perform actions ...
+   * await inspector.stopScreencast();
+   * ```
+   *
+   */
+  stopScreencast(): Promise<void>;
+}
+
 /**
  * Keyboard provides an api for managing a virtual keyboard. The high level api is
  * [keyboard.type(text[, options])](https://playwright.dev/docs/api/class-keyboard#keyboard-type), which takes raw
@@ -21920,69 +22075,6 @@ export interface Tracing {
  *
  */
 export interface Video {
-  /**
-   * Emitted for each screencast frame when video was started with `mode: 'screencast'`.
-   *
-   * **Usage**
-   *
-   * ```js
-   * const video = page.video();
-   * video.on('frame', data => console.log('received frame, jpeg size:', data.length));
-   * await video.start({ mode: 'screencast' });
-   * // ... perform actions ...
-   * await video.stop();
-   * ```
-   *
-   */
-  on(event: 'frame', listener: (buffer: Buffer) => any): this;
-
-  /**
-   * Adds an event listener that will be automatically removed after it is triggered once. See `addListener` for more information about this event.
-   */
-  once(event: 'frame', listener: (buffer: Buffer) => any): this;
-
-  /**
-   * Emitted for each screencast frame when video was started with `mode: 'screencast'`.
-   *
-   * **Usage**
-   *
-   * ```js
-   * const video = page.video();
-   * video.on('frame', data => console.log('received frame, jpeg size:', data.length));
-   * await video.start({ mode: 'screencast' });
-   * // ... perform actions ...
-   * await video.stop();
-   * ```
-   *
-   */
-  addListener(event: 'frame', listener: (buffer: Buffer) => any): this;
-
-  /**
-   * Removes an event listener added by `on` or `addListener`.
-   */
-  removeListener(event: 'frame', listener: (buffer: Buffer) => any): this;
-
-  /**
-   * Removes an event listener added by `on` or `addListener`.
-   */
-  off(event: 'frame', listener: (buffer: Buffer) => any): this;
-
-  /**
-   * Emitted for each screencast frame when video was started with `mode: 'screencast'`.
-   *
-   * **Usage**
-   *
-   * ```js
-   * const video = page.video();
-   * video.on('frame', data => console.log('received frame, jpeg size:', data.length));
-   * await video.start({ mode: 'screencast' });
-   * // ... perform actions ...
-   * await video.stop();
-   * ```
-   *
-   */
-  prependListener(event: 'frame', listener: (buffer: Buffer) => any): this;
-
   /**
    * Deletes the video file. Will wait for the video to finish if necessary.
    */
@@ -22015,13 +22107,6 @@ export interface Video {
    * @param options
    */
   start(options?: {
-    /**
-     * Recording mode. When set to `'screencast'`, JPEG frames are emitted as
-     * [video.on('frame')](https://playwright.dev/docs/api/class-video#video-event-frame) events on the
-     * [Video](https://playwright.dev/docs/api/class-video) object instead of writing a video file. Defaults to `'video'`.
-     */
-    mode?: "video"|"screencast";
-
     /**
      * Optional dimensions of the recorded video. If not specified the size will be equal to page viewport scaled down to
      * fit into 800x800. Actual picture of the page will be scaled down if necessary to fit the specified size.
diff --git a/packages/protocol/src/channels.d.ts b/packages/protocol/src/channels.d.ts
index b582c13c77eac..3d945e50e283a 100644
--- a/packages/protocol/src/channels.d.ts
+++ b/packages/protocol/src/channels.d.ts
@@ -2100,9 +2100,9 @@ export interface PageEventTarget {
   on(event: 'frameDetached', callback: (params: PageFrameDetachedEvent) => void): this;
   on(event: 'locatorHandlerTriggered', callback: (params: PageLocatorHandlerTriggeredEvent) => void): this;
   on(event: 'route', callback: (params: PageRouteEvent) => void): this;
+  on(event: 'screencastFrame', callback: (params: PageScreencastFrameEvent) => void): this;
   on(event: 'webSocketRoute', callback: (params: PageWebSocketRouteEvent) => void): this;
   on(event: 'webSocket', callback: (params: PageWebSocketEvent) => void): this;
-  on(event: 'videoFrame', callback: (params: PageVideoFrameEvent) => void): this;
   on(event: 'worker', callback: (params: PageWorkerEvent) => void): this;
 }
 export interface PageChannel extends PageEventTarget, EventTargetChannel {
@@ -2149,6 +2149,8 @@ export interface PageChannel extends PageEventTarget, EventTargetChannel {
   bringToFront(params?: PageBringToFrontParams, progress?: Progress): Promise<PageBringToFrontResult>;
   pickLocator(params?: PagePickLocatorParams, progress?: Progress): Promise<PagePickLocatorResult>;
   cancelPickLocator(params?: PageCancelPickLocatorParams, progress?: Progress): Promise<PageCancelPickLocatorResult>;
+  startScreencast(params: PageStartScreencastParams, progress?: Progress): Promise<PageStartScreencastResult>;
+  stopScreencast(params?: PageStopScreencastParams, progress?: Progress): Promise<PageStopScreencastResult>;
   videoStart(params: PageVideoStartParams, progress?: Progress): Promise<PageVideoStartResult>;
   videoStop(params?: PageVideoStopParams, progress?: Progress): Promise<PageVideoStopResult>;
   updateSubscription(params: PageUpdateSubscriptionParams, progress?: Progress): Promise<PageUpdateSubscriptionResult>;
@@ -2187,15 +2189,15 @@ export type PageLocatorHandlerTriggeredEvent = {
 export type PageRouteEvent = {
   route: RouteChannel,
 };
+export type PageScreencastFrameEvent = {
+  data: Binary,
+};
 export type PageWebSocketRouteEvent = {
   webSocketRoute: WebSocketRouteChannel,
 };
 export type PageWebSocketEvent = {
   webSocket: WebSocketChannel,
 };
-export type PageVideoFrameEvent = {
-  data: Binary,
-};
 export type PageWorkerEvent = {
   worker: WorkerChannel,
 };
@@ -2666,22 +2668,36 @@ export type PagePickLocatorResult = {
 export type PageCancelPickLocatorParams = {};
 export type PageCancelPickLocatorOptions = {};
 export type PageCancelPickLocatorResult = void;
+export type PageStartScreencastParams = {
+  size?: {
+    width: number,
+    height: number,
+  },
+};
+export type PageStartScreencastOptions = {
+  size?: {
+    width: number,
+    height: number,
+  },
+};
+export type PageStartScreencastResult = void;
+export type PageStopScreencastParams = {};
+export type PageStopScreencastOptions = {};
+export type PageStopScreencastResult = void;
 export type PageVideoStartParams = {
   size?: {
     width: number,
     height: number,
   },
-  mode?: 'video' | 'screencast',
 };
 export type PageVideoStartOptions = {
   size?: {
     width: number,
     height: number,
   },
-  mode?: 'video' | 'screencast',
 };
 export type PageVideoStartResult = {
-  artifact?: ArtifactChannel,
+  artifact: ArtifactChannel,
 };
 export type PageVideoStopParams = {};
 export type PageVideoStopOptions = {};
@@ -2748,9 +2764,9 @@ export interface PageEvents {
   'frameDetached': PageFrameDetachedEvent;
   'locatorHandlerTriggered': PageLocatorHandlerTriggeredEvent;
   'route': PageRouteEvent;
+  'screencastFrame': PageScreencastFrameEvent;
   'webSocketRoute': PageWebSocketRouteEvent;
   'webSocket': PageWebSocketEvent;
-  'videoFrame': PageVideoFrameEvent;
   'worker': PageWorkerEvent;
 }
 
diff --git a/packages/protocol/src/protocol.yml b/packages/protocol/src/protocol.yml
index 74eec4c6cd1b4..c22a29b4cbf1d 100644
--- a/packages/protocol/src/protocol.yml
+++ b/packages/protocol/src/protocol.yml
@@ -2074,6 +2074,20 @@ Page:
       title: Cancel pick locator
       group: configuration
 
+    startScreencast:
+      title: Start screencast
+      group: configuration
+      parameters:
+        size:
+          type: object?
+          properties:
+            width: int
+            height: int
+
+    stopScreencast:
+      title: Stop screencast
+      group: configuration
+
     videoStart:
       title: Start video recording
       group: configuration
@@ -2083,13 +2097,8 @@ Page:
           properties:
             width: int
             height: int
-        mode:
-          type: enum?
-          literals:
-          - video
-          - screencast
       returns:
-        artifact: Artifact?
+        artifact: Artifact
 
     videoStop:
       title: Stop video recording
@@ -2182,6 +2191,10 @@ Page:
       parameters:
         route: Route
 
+    screencastFrame:
+      parameters:
+        data: binary
+
     webSocketRoute:
       parameters:
         webSocketRoute: WebSocketRoute
@@ -2190,10 +2203,6 @@ Page:
       parameters:
         webSocket: WebSocket
 
-    videoFrame:
-      parameters:
-        data: binary
-
     worker:
       parameters:
         worker: Worker
diff --git a/tests/library/video.spec.ts b/tests/library/video.spec.ts
index bf3bc788afbf0..c08b3fa85c17e 100644
--- a/tests/library/video.spec.ts
+++ b/tests/library/video.spec.ts
@@ -898,19 +898,19 @@ it.describe('screencast', () => {
     expectFrames(videoPath, size, isAlmostWhite);
   });
 
-  it('video.start with frames option emits frame events', async ({ browser, browserName, server }) => {
-    const size = browserName === 'firefox' ? { width: 500, height: 400 } : { width: 320, height: 240 };
+  it('inspector.startScreencast emits screencastframe events', async ({ browser, server }) => {
+    const size = { width: 500, height: 400 };
     const context = await browser.newContext({ viewport: size });
-    const page = await context.newPage();
+    const page = await context.newPage(); 
 
     const frames: Buffer[] = [];
-    page.video().on('frame', (data: Buffer) => frames.push(data));
+    page.inspector().on('screencastframe', (data: Buffer) => frames.push(data));
 
-    await page.video().start({ size, mode: 'screencast' });
+    await page.inspector().startScreencast({ size });
     await page.goto(server.EMPTY_PAGE);
     await page.evaluate(() => document.body.style.backgroundColor = 'red');
     await rafraf(page, 100);
-    await page.video().stop();
+    await page.inspector().stopScreencast();
 
     expect(frames.length).toBeGreaterThan(0);
     // Each frame must be a valid JPEG (starts with FF D8)

From 0fd84ab8d084a8ea74dd1cd4f24d704e9629062e Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Tue, 3 Mar 2026 15:25:40 -0800
Subject: [PATCH 4/7] check screencast parameters

---
 docs/src/api/class-inspector.md               |  2 +-
 packages/playwright-client/types/types.d.ts   |  3 +-
 .../playwright-core/src/server/screencast.ts  | 10 ++++-
 packages/playwright-core/types/types.d.ts     |  3 +-
 tests/library/video.spec.ts                   | 39 ++++++++++++++++++-
 5 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/docs/src/api/class-inspector.md b/docs/src/api/class-inspector.md
index 9ec866a7447d3..98ad77a759459 100644
--- a/docs/src/api/class-inspector.md
+++ b/docs/src/api/class-inspector.md
@@ -2,7 +2,7 @@
 * since: v1.59
 * langs: js
 
-The `Inspector` object provides access to the Playwright inspector's screencast capabilities, allowing you to capture live JPEG frames from the page as it renders.
+The `Inspector` object provides access to the Playwright inspector's capabilities.
 
 **Usage**
 
diff --git a/packages/playwright-client/types/types.d.ts b/packages/playwright-client/types/types.d.ts
index 3cf8bab46d8b2..81cd6b43819a4 100644
--- a/packages/playwright-client/types/types.d.ts
+++ b/packages/playwright-client/types/types.d.ts
@@ -20437,8 +20437,7 @@ export interface FrameLocator {
 }
 
 /**
- * The `Inspector` object provides access to the Playwright inspector's screencast capabilities, allowing you to
- * capture live JPEG frames from the page as it renders.
+ * The `Inspector` object provides access to the Playwright inspector's capabilities.
  *
  * **Usage**
  *
diff --git a/packages/playwright-core/src/server/screencast.ts b/packages/playwright-core/src/server/screencast.ts
index 38de70b9e9a75..42c6f446408f6 100644
--- a/packages/playwright-core/src/server/screencast.ts
+++ b/packages/playwright-core/src/server/screencast.ts
@@ -29,6 +29,7 @@ export class Screencast {
   private _videoRecorder: VideoRecorder | null = null;
   private _videoId: string | null = null;
   private _screencastClients = new Set<unknown>();
+  private _screencastOptions: { width: number, height: number, quality: number } | null = null;
 
   // Aiming at 25 fps by default - each frame is 40ms, but we give some slack with 35ms.
   // When throttling for tracing, 200ms between frames, except for 10 frames around the action.
@@ -140,8 +141,13 @@ export class Screencast {
   }
 
   async startScreencast(client: unknown, options: { width: number, height: number, quality: number }) {
+    if (this._screencastOptions) {
+      if (options.width !== this._screencastOptions.width || options.height !== this._screencastOptions.height || options.quality !== this._screencastOptions.quality)
+        throw new Error(`Screencast is already running with different options (${this._screencastOptions.width}x${this._screencastOptions.height} quality=${this._screencastOptions.quality})`);
+    }
     this._screencastClients.add(client);
     if (this._screencastClients.size === 1) {
+      this._screencastOptions = options;
       await this._page.delegate.startScreencast({
         width: options.width,
         height: options.height,
@@ -152,8 +158,10 @@ export class Screencast {
 
   async stopScreencast(client: unknown) {
     this._screencastClients.delete(client);
-    if (!this._screencastClients.size)
+    if (!this._screencastClients.size) {
+      this._screencastOptions = null;
       await this._page.delegate.stopScreencast();
+    }
   }
 }
 
diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts
index 3cf8bab46d8b2..81cd6b43819a4 100644
--- a/packages/playwright-core/types/types.d.ts
+++ b/packages/playwright-core/types/types.d.ts
@@ -20437,8 +20437,7 @@ export interface FrameLocator {
 }
 
 /**
- * The `Inspector` object provides access to the Playwright inspector's screencast capabilities, allowing you to
- * capture live JPEG frames from the page as it renders.
+ * The `Inspector` object provides access to the Playwright inspector's capabilities.
  *
  * **Usage**
  *
diff --git a/tests/library/video.spec.ts b/tests/library/video.spec.ts
index c08b3fa85c17e..ff312eb57fe68 100644
--- a/tests/library/video.spec.ts
+++ b/tests/library/video.spec.ts
@@ -901,7 +901,7 @@ it.describe('screencast', () => {
   it('inspector.startScreencast emits screencastframe events', async ({ browser, server }) => {
     const size = { width: 500, height: 400 };
     const context = await browser.newContext({ viewport: size });
-    const page = await context.newPage(); 
+    const page = await context.newPage();
 
     const frames: Buffer[] = [];
     page.inspector().on('screencastframe', (data: Buffer) => frames.push(data));
@@ -921,6 +921,43 @@ it.describe('screencast', () => {
 
     await context.close();
   });
+
+  it('startScreencast throws when called with different options while running', async ({ browser }) => {
+    const size = { width: 500, height: 400 };
+    const context = await browser.newContext({ viewport: size });
+    const page = await context.newPage();
+
+    await page.inspector().startScreencast({ size });
+    await expect(page.inspector().startScreencast({ size: { width: 320, height: 240 } })).rejects.toThrow('Screencast is already running with different options');
+
+    await page.inspector().stopScreencast();
+    await context.close();
+  });
+
+  it('startScreencast allows restart with different options after stop', async ({ browser }) => {
+    const context = await browser.newContext({ viewport: { width: 500, height: 400 } });
+    const page = await context.newPage();
+
+    await page.inspector().startScreencast({ size: { width: 500, height: 400 } });
+    await page.inspector().stopScreencast();
+    // Different options should succeed once the previous screencast is stopped.
+    await expect(page.inspector().startScreencast({ size: { width: 320, height: 240 } })).resolves.toBeUndefined();
+
+    await page.inspector().stopScreencast();
+    await context.close();
+  });
+
+  it('startScreencast throws when video recording is running with different params', async ({ browser }) => {
+    const videoSize = { width: 500, height: 400 };
+    const context = await browser.newContext({ viewport: videoSize });
+    const page = await context.newPage();
+
+    await page.video().start({ size: videoSize });
+    await expect(page.inspector().startScreencast({ size: { width: 320, height: 240 } })).rejects.toThrow('Screencast is already running with different options');
+
+    await page.video().stop();
+    await context.close();
+  });
 });
 
 it('should saveAs video', async ({ browser }, testInfo) => {

From 0eb17bb4925460c91bb889934bc70e6be776bdd2 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Tue, 3 Mar 2026 16:01:18 -0800
Subject: [PATCH 5/7] add inspector to api.ts

---
 packages/playwright-core/src/client/api.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/playwright-core/src/client/api.ts b/packages/playwright-core/src/client/api.ts
index e4b0abb923f90..db6d504267a4f 100644
--- a/packages/playwright-core/src/client/api.ts
+++ b/packages/playwright-core/src/client/api.ts
@@ -28,6 +28,7 @@ export { Electron, ElectronApplication } from './electron';
 export { FrameLocator, Locator } from './locator';
 export { ElementHandle } from './elementHandle';
 export { FileChooser } from './fileChooser';
+export type { Inspector } from './inspector';
 export type { Logger } from './types';
 export { TimeoutError } from './errors';
 export { Frame } from './frame';

From 6a8502c49892843a234f3a14dbf852eb4aba741b Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Tue, 3 Mar 2026 16:17:11 -0800
Subject: [PATCH 6/7] frame metadata, address comments

---
 docs/src/api/class-inspector.md               |  18 ++-
 packages/playwright-client/types/types.d.ts   | 121 ++++++++++++++++--
 .../playwright-core/src/client/inspector.ts   |   2 +-
 .../playwright-core/src/protocol/validator.ts |   2 +
 .../src/server/dispatchers/pageDispatcher.ts  |   2 +-
 packages/playwright-core/types/types.d.ts     | 121 ++++++++++++++++--
 packages/protocol/src/channels.d.ts           |   2 +
 packages/protocol/src/protocol.yml            |   2 +
 tests/library/video.spec.ts                   |  12 +-
 9 files changed, 240 insertions(+), 42 deletions(-)

diff --git a/docs/src/api/class-inspector.md b/docs/src/api/class-inspector.md
index 98ad77a759459..ca24bdd8bf5ab 100644
--- a/docs/src/api/class-inspector.md
+++ b/docs/src/api/class-inspector.md
@@ -2,14 +2,14 @@
 * since: v1.59
 * langs: js
 
-The `Inspector` object provides access to the Playwright inspector's capabilities.
+Interface to the Playwright inspector.
 
 **Usage**
 
 ```js
 const inspector = page.inspector();
-inspector.on('screencastFrame', data => {
-  console.log('received frame, jpeg size:', data.length);
+inspector.on('screencastframe', ({ data, width, height }) => {
+  console.log(`received frame ${width}x${height}, jpeg size: ${data.length}`);
 });
 await inspector.startScreencast();
 // ... perform actions ...
@@ -18,7 +18,10 @@ await inspector.stopScreencast();
 
 ## event: Inspector.screencastFrame
 * since: v1.59
-- argument: <[Buffer]>
+- argument: <[Object]>
+  - `data` <[Buffer]> JPEG-encoded frame data.
+  - `width` <[int]> Frame width in pixels.
+  - `height` <[int]> Frame height in pixels.
 
 Emitted for each captured JPEG screencast frame while the screencast is running.
 
@@ -26,7 +29,8 @@ Emitted for each captured JPEG screencast frame while the screencast is running.
 
 ```js
 const inspector = page.inspector();
-inspector.on('screencastFrame', data => {
+inspector.on('screencastframe', ({ data, width, height }) => {
+  console.log(`frame ${width}x${height}, jpeg size: ${data.length}`);
   require('fs').writeFileSync('frame.jpg', data);
 });
 await inspector.startScreencast({ size: { width: 1280, height: 720 } });
@@ -43,7 +47,7 @@ Starts capturing screencast frames. Frames are emitted as [`event: Inspector.scr
 
 ```js
 const inspector = page.inspector();
-inspector.on('screencastFrame', data => console.log('frame size:', data.length));
+inspector.on('screencastframe', ({ data, width, height }) => console.log(`frame ${width}x${height}, size: ${data.length}`));
 await inspector.startScreencast({ size: { width: 800, height: 600 } });
 // ... perform actions ...
 await inspector.stopScreencast();
@@ -55,7 +59,7 @@ await inspector.stopScreencast();
   - `width` <[int]> Frame width in pixels.
   - `height` <[int]> Frame height in pixels.
 
-Optional dimensions for the screencast frames. If not specified, the page viewport size is used.
+Optional dimensions for the screencast frames. If not specified, the current page viewport size is used.
 
 ## async method: Inspector.stopScreencast
 * since: v1.59
diff --git a/packages/playwright-client/types/types.d.ts b/packages/playwright-client/types/types.d.ts
index 81cd6b43819a4..aedf26535a823 100644
--- a/packages/playwright-client/types/types.d.ts
+++ b/packages/playwright-client/types/types.d.ts
@@ -20437,14 +20437,14 @@ export interface FrameLocator {
 }
 
 /**
- * The `Inspector` object provides access to the Playwright inspector's capabilities.
+ * Interface to the Playwright inspector.
  *
  * **Usage**
  *
  * ```js
  * const inspector = page.inspector();
- * inspector.on('screencastFrame', data => {
- *   console.log('received frame, jpeg size:', data.length);
+ * inspector.on('screencastframe', ({ data, width, height }) => {
+ *   console.log(`received frame ${width}x${height}, jpeg size: ${data.length}`);
  * });
  * await inspector.startScreencast();
  * // ... perform actions ...
@@ -20460,7 +20460,8 @@ export interface Inspector {
    *
    * ```js
    * const inspector = page.inspector();
-   * inspector.on('screencastFrame', data => {
+   * inspector.on('screencastframe', ({ data, width, height }) => {
+   *   console.log(`frame ${width}x${height}, jpeg size: ${data.length}`);
    *   require('fs').writeFileSync('frame.jpg', data);
    * });
    * await inspector.startScreencast({ size: { width: 1280, height: 720 } });
@@ -20469,12 +20470,42 @@ export interface Inspector {
    * ```
    *
    */
-  on(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+  on(event: 'screencastframe', listener: (data: {
+    /**
+     * JPEG-encoded frame data.
+     */
+    data: Buffer;
+
+    /**
+     * Frame width in pixels.
+     */
+    width: number;
+
+    /**
+     * Frame height in pixels.
+     */
+    height: number;
+  }) => any): this;
 
   /**
    * Adds an event listener that will be automatically removed after it is triggered once. See `addListener` for more information about this event.
    */
-  once(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+  once(event: 'screencastframe', listener: (data: {
+    /**
+     * JPEG-encoded frame data.
+     */
+    data: Buffer;
+
+    /**
+     * Frame width in pixels.
+     */
+    width: number;
+
+    /**
+     * Frame height in pixels.
+     */
+    height: number;
+  }) => any): this;
 
   /**
    * Emitted for each captured JPEG screencast frame while the screencast is running.
@@ -20483,7 +20514,8 @@ export interface Inspector {
    *
    * ```js
    * const inspector = page.inspector();
-   * inspector.on('screencastFrame', data => {
+   * inspector.on('screencastframe', ({ data, width, height }) => {
+   *   console.log(`frame ${width}x${height}, jpeg size: ${data.length}`);
    *   require('fs').writeFileSync('frame.jpg', data);
    * });
    * await inspector.startScreencast({ size: { width: 1280, height: 720 } });
@@ -20492,17 +20524,62 @@ export interface Inspector {
    * ```
    *
    */
-  addListener(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+  addListener(event: 'screencastframe', listener: (data: {
+    /**
+     * JPEG-encoded frame data.
+     */
+    data: Buffer;
+
+    /**
+     * Frame width in pixels.
+     */
+    width: number;
+
+    /**
+     * Frame height in pixels.
+     */
+    height: number;
+  }) => any): this;
 
   /**
    * Removes an event listener added by `on` or `addListener`.
    */
-  removeListener(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+  removeListener(event: 'screencastframe', listener: (data: {
+    /**
+     * JPEG-encoded frame data.
+     */
+    data: Buffer;
+
+    /**
+     * Frame width in pixels.
+     */
+    width: number;
+
+    /**
+     * Frame height in pixels.
+     */
+    height: number;
+  }) => any): this;
 
   /**
    * Removes an event listener added by `on` or `addListener`.
    */
-  off(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+  off(event: 'screencastframe', listener: (data: {
+    /**
+     * JPEG-encoded frame data.
+     */
+    data: Buffer;
+
+    /**
+     * Frame width in pixels.
+     */
+    width: number;
+
+    /**
+     * Frame height in pixels.
+     */
+    height: number;
+  }) => any): this;
 
   /**
    * Emitted for each captured JPEG screencast frame while the screencast is running.
@@ -20511,7 +20588,8 @@ export interface Inspector {
    *
    * ```js
    * const inspector = page.inspector();
-   * inspector.on('screencastFrame', data => {
+   * inspector.on('screencastframe', ({ data, width, height }) => {
+   *   console.log(`frame ${width}x${height}, jpeg size: ${data.length}`);
    *   require('fs').writeFileSync('frame.jpg', data);
    * });
    * await inspector.startScreencast({ size: { width: 1280, height: 720 } });
@@ -20520,7 +20598,22 @@ export interface Inspector {
    * ```
    *
    */
-  prependListener(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+  prependListener(event: 'screencastframe', listener: (data: {
+    /**
+     * JPEG-encoded frame data.
+     */
+    data: Buffer;
+
+    /**
+     * Frame width in pixels.
+     */
+    width: number;
+
+    /**
+     * Frame height in pixels.
+     */
+    height: number;
+  }) => any): this;
 
   /**
    * Starts capturing screencast frames. Frames are emitted as
@@ -20531,7 +20624,7 @@ export interface Inspector {
    *
    * ```js
    * const inspector = page.inspector();
-   * inspector.on('screencastFrame', data => console.log('frame size:', data.length));
+   * inspector.on('screencastframe', ({ data, width, height }) => console.log(`frame ${width}x${height}, size: ${data.length}`));
    * await inspector.startScreencast({ size: { width: 800, height: 600 } });
    * // ... perform actions ...
    * await inspector.stopScreencast();
@@ -20541,7 +20634,7 @@ export interface Inspector {
    */
   startScreencast(options?: {
     /**
-     * Optional dimensions for the screencast frames. If not specified, the page viewport size is used.
+     * Optional dimensions for the screencast frames. If not specified, the current page viewport size is used.
      */
     size?: {
       /**
diff --git a/packages/playwright-core/src/client/inspector.ts b/packages/playwright-core/src/client/inspector.ts
index 3efa07d646a3e..98b81c347cb15 100644
--- a/packages/playwright-core/src/client/inspector.ts
+++ b/packages/playwright-core/src/client/inspector.ts
@@ -25,7 +25,7 @@ export class Inspector extends EventEmitter implements api.Inspector {
   constructor(page: Page) {
     super(page._platform);
     this._page = page;
-    this._page._channel.on('screencastFrame', ({ data }) => this.emit('screencastframe', data));
+    this._page._channel.on('screencastFrame', ({ data, width, height }) => this.emit('screencastframe', { data, width, height }));
   }
 
   async startScreencast(options: { size?: { width: number, height: number } } = {}): Promise<void> {
diff --git a/packages/playwright-core/src/protocol/validator.ts b/packages/playwright-core/src/protocol/validator.ts
index 87c4bbb4c1a0c..fc1fea1a46a52 100644
--- a/packages/playwright-core/src/protocol/validator.ts
+++ b/packages/playwright-core/src/protocol/validator.ts
@@ -1227,6 +1227,8 @@ scheme.PageRouteEvent = tObject({
 });
 scheme.PageScreencastFrameEvent = tObject({
   data: tBinary,
+  width: tInt,
+  height: tInt,
 });
 scheme.PageWebSocketRouteEvent = tObject({
   webSocketRoute: tChannel(['WebSocketRoute']),
diff --git a/packages/playwright-core/src/server/dispatchers/pageDispatcher.ts b/packages/playwright-core/src/server/dispatchers/pageDispatcher.ts
index c73c4909a1f4e..ccfde8ec5a688 100644
--- a/packages/playwright-core/src/server/dispatchers/pageDispatcher.ts
+++ b/packages/playwright-core/src/server/dispatchers/pageDispatcher.ts
@@ -108,7 +108,7 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, Brows
       // Artifact can outlive the page, so bind to the context scope.
       this._dispatchEvent('download', { url: download.url, suggestedFilename: download.suggestedFilename(), artifact: ArtifactDispatcher.from(parentScope, download.artifact) });
     });
-    this.addObjectListener(Page.Events.ScreencastFrame, (frame: ScreencastFrame) => this._dispatchEvent('screencastFrame', { data: frame.buffer }));
+    this.addObjectListener(Page.Events.ScreencastFrame, (frame: ScreencastFrame) => this._dispatchEvent('screencastFrame', { data: frame.buffer, width: frame.width, height: frame.height }));
     this.addObjectListener(Page.Events.EmulatedSizeChanged, () => this._dispatchEvent('viewportSizeChanged', { viewportSize: page.emulatedSize()?.viewport }));
     this.addObjectListener(Page.Events.FileChooser, (fileChooser: FileChooser) => this._dispatchEvent('fileChooser', {
       element: ElementHandleDispatcher.from(mainFrame, fileChooser.element()),
diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts
index 81cd6b43819a4..aedf26535a823 100644
--- a/packages/playwright-core/types/types.d.ts
+++ b/packages/playwright-core/types/types.d.ts
@@ -20437,14 +20437,14 @@ export interface FrameLocator {
 }
 
 /**
- * The `Inspector` object provides access to the Playwright inspector's capabilities.
+ * Interface to the Playwright inspector.
  *
  * **Usage**
  *
  * ```js
  * const inspector = page.inspector();
- * inspector.on('screencastFrame', data => {
- *   console.log('received frame, jpeg size:', data.length);
+ * inspector.on('screencastframe', ({ data, width, height }) => {
+ *   console.log(`received frame ${width}x${height}, jpeg size: ${data.length}`);
  * });
  * await inspector.startScreencast();
  * // ... perform actions ...
@@ -20460,7 +20460,8 @@ export interface Inspector {
    *
    * ```js
    * const inspector = page.inspector();
-   * inspector.on('screencastFrame', data => {
+   * inspector.on('screencastframe', ({ data, width, height }) => {
+   *   console.log(`frame ${width}x${height}, jpeg size: ${data.length}`);
    *   require('fs').writeFileSync('frame.jpg', data);
    * });
    * await inspector.startScreencast({ size: { width: 1280, height: 720 } });
@@ -20469,12 +20470,42 @@ export interface Inspector {
    * ```
    *
    */
-  on(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+  on(event: 'screencastframe', listener: (data: {
+    /**
+     * JPEG-encoded frame data.
+     */
+    data: Buffer;
+
+    /**
+     * Frame width in pixels.
+     */
+    width: number;
+
+    /**
+     * Frame height in pixels.
+     */
+    height: number;
+  }) => any): this;
 
   /**
    * Adds an event listener that will be automatically removed after it is triggered once. See `addListener` for more information about this event.
    */
-  once(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+  once(event: 'screencastframe', listener: (data: {
+    /**
+     * JPEG-encoded frame data.
+     */
+    data: Buffer;
+
+    /**
+     * Frame width in pixels.
+     */
+    width: number;
+
+    /**
+     * Frame height in pixels.
+     */
+    height: number;
+  }) => any): this;
 
   /**
    * Emitted for each captured JPEG screencast frame while the screencast is running.
@@ -20483,7 +20514,8 @@ export interface Inspector {
    *
    * ```js
    * const inspector = page.inspector();
-   * inspector.on('screencastFrame', data => {
+   * inspector.on('screencastframe', ({ data, width, height }) => {
+   *   console.log(`frame ${width}x${height}, jpeg size: ${data.length}`);
    *   require('fs').writeFileSync('frame.jpg', data);
    * });
    * await inspector.startScreencast({ size: { width: 1280, height: 720 } });
@@ -20492,17 +20524,62 @@ export interface Inspector {
    * ```
    *
    */
-  addListener(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+  addListener(event: 'screencastframe', listener: (data: {
+    /**
+     * JPEG-encoded frame data.
+     */
+    data: Buffer;
+
+    /**
+     * Frame width in pixels.
+     */
+    width: number;
+
+    /**
+     * Frame height in pixels.
+     */
+    height: number;
+  }) => any): this;
 
   /**
    * Removes an event listener added by `on` or `addListener`.
    */
-  removeListener(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+  removeListener(event: 'screencastframe', listener: (data: {
+    /**
+     * JPEG-encoded frame data.
+     */
+    data: Buffer;
+
+    /**
+     * Frame width in pixels.
+     */
+    width: number;
+
+    /**
+     * Frame height in pixels.
+     */
+    height: number;
+  }) => any): this;
 
   /**
    * Removes an event listener added by `on` or `addListener`.
    */
-  off(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+  off(event: 'screencastframe', listener: (data: {
+    /**
+     * JPEG-encoded frame data.
+     */
+    data: Buffer;
+
+    /**
+     * Frame width in pixels.
+     */
+    width: number;
+
+    /**
+     * Frame height in pixels.
+     */
+    height: number;
+  }) => any): this;
 
   /**
    * Emitted for each captured JPEG screencast frame while the screencast is running.
@@ -20511,7 +20588,8 @@ export interface Inspector {
    *
    * ```js
    * const inspector = page.inspector();
-   * inspector.on('screencastFrame', data => {
+   * inspector.on('screencastframe', ({ data, width, height }) => {
+   *   console.log(`frame ${width}x${height}, jpeg size: ${data.length}`);
    *   require('fs').writeFileSync('frame.jpg', data);
    * });
    * await inspector.startScreencast({ size: { width: 1280, height: 720 } });
@@ -20520,7 +20598,22 @@ export interface Inspector {
    * ```
    *
    */
-  prependListener(event: 'screencastframe', listener: (buffer: Buffer) => any): this;
+  prependListener(event: 'screencastframe', listener: (data: {
+    /**
+     * JPEG-encoded frame data.
+     */
+    data: Buffer;
+
+    /**
+     * Frame width in pixels.
+     */
+    width: number;
+
+    /**
+     * Frame height in pixels.
+     */
+    height: number;
+  }) => any): this;
 
   /**
    * Starts capturing screencast frames. Frames are emitted as
@@ -20531,7 +20624,7 @@ export interface Inspector {
    *
    * ```js
    * const inspector = page.inspector();
-   * inspector.on('screencastFrame', data => console.log('frame size:', data.length));
+   * inspector.on('screencastframe', ({ data, width, height }) => console.log(`frame ${width}x${height}, size: ${data.length}`));
    * await inspector.startScreencast({ size: { width: 800, height: 600 } });
    * // ... perform actions ...
    * await inspector.stopScreencast();
@@ -20541,7 +20634,7 @@ export interface Inspector {
    */
   startScreencast(options?: {
     /**
-     * Optional dimensions for the screencast frames. If not specified, the page viewport size is used.
+     * Optional dimensions for the screencast frames. If not specified, the current page viewport size is used.
      */
     size?: {
       /**
diff --git a/packages/protocol/src/channels.d.ts b/packages/protocol/src/channels.d.ts
index 3d945e50e283a..8f9ca58401488 100644
--- a/packages/protocol/src/channels.d.ts
+++ b/packages/protocol/src/channels.d.ts
@@ -2191,6 +2191,8 @@ export type PageRouteEvent = {
 };
 export type PageScreencastFrameEvent = {
   data: Binary,
+  width: number,
+  height: number,
 };
 export type PageWebSocketRouteEvent = {
   webSocketRoute: WebSocketRouteChannel,
diff --git a/packages/protocol/src/protocol.yml b/packages/protocol/src/protocol.yml
index c22a29b4cbf1d..5add91162acb0 100644
--- a/packages/protocol/src/protocol.yml
+++ b/packages/protocol/src/protocol.yml
@@ -2194,6 +2194,8 @@ Page:
     screencastFrame:
       parameters:
         data: binary
+        width: int
+        height: int
 
     webSocketRoute:
       parameters:
diff --git a/tests/library/video.spec.ts b/tests/library/video.spec.ts
index ff312eb57fe68..1a153ab89eda7 100644
--- a/tests/library/video.spec.ts
+++ b/tests/library/video.spec.ts
@@ -903,8 +903,8 @@ it.describe('screencast', () => {
     const context = await browser.newContext({ viewport: size });
     const page = await context.newPage();
 
-    const frames: Buffer[] = [];
-    page.inspector().on('screencastframe', (data: Buffer) => frames.push(data));
+    const frames: { data: Buffer, width: number, height: number }[] = [];
+    page.inspector().on('screencastframe', frame => frames.push(frame));
 
     await page.inspector().startScreencast({ size });
     await page.goto(server.EMPTY_PAGE);
@@ -913,10 +913,12 @@ it.describe('screencast', () => {
     await page.inspector().stopScreencast();
 
     expect(frames.length).toBeGreaterThan(0);
-    // Each frame must be a valid JPEG (starts with FF D8)
     for (const frame of frames) {
-      expect(frame[0]).toBe(0xff);
-      expect(frame[1]).toBe(0xd8);
+      // Each frame must be a valid JPEG (starts with FF D8)
+      expect(frame.data[0]).toBe(0xff);
+      expect(frame.data[1]).toBe(0xd8);
+      expect(frame.width).toBe(size.width);
+      expect(frame.height).toBe(size.height);
     }
 
     await context.close();

From 16c8deab02d7d2d499496e6b821f5612380076d2 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Tue, 3 Mar 2026 17:04:18 -0800
Subject: [PATCH 7/7] snippets lint

---
 docs/src/api/class-inspector.md             | 4 +++-
 packages/playwright-client/types/types.d.ts | 4 +++-
 packages/playwright-core/types/types.d.ts   | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/src/api/class-inspector.md b/docs/src/api/class-inspector.md
index ca24bdd8bf5ab..07a4f39503feb 100644
--- a/docs/src/api/class-inspector.md
+++ b/docs/src/api/class-inspector.md
@@ -47,7 +47,9 @@ Starts capturing screencast frames. Frames are emitted as [`event: Inspector.scr
 
 ```js
 const inspector = page.inspector();
-inspector.on('screencastframe', ({ data, width, height }) => console.log(`frame ${width}x${height}, size: ${data.length}`));
+inspector.on('screencastframe', ({ data, width, height }) => {
+  console.log(`frame ${width}x${height}, size: ${data.length}`);
+});
 await inspector.startScreencast({ size: { width: 800, height: 600 } });
 // ... perform actions ...
 await inspector.stopScreencast();
diff --git a/packages/playwright-client/types/types.d.ts b/packages/playwright-client/types/types.d.ts
index aedf26535a823..5cfbb21320586 100644
--- a/packages/playwright-client/types/types.d.ts
+++ b/packages/playwright-client/types/types.d.ts
@@ -20624,7 +20624,9 @@ export interface Inspector {
    *
    * ```js
    * const inspector = page.inspector();
-   * inspector.on('screencastframe', ({ data, width, height }) => console.log(`frame ${width}x${height}, size: ${data.length}`));
+   * inspector.on('screencastframe', ({ data, width, height }) => {
+   *   console.log(`frame ${width}x${height}, size: ${data.length}`);
+   * });
    * await inspector.startScreencast({ size: { width: 800, height: 600 } });
    * // ... perform actions ...
    * await inspector.stopScreencast();
diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts
index aedf26535a823..5cfbb21320586 100644
--- a/packages/playwright-core/types/types.d.ts
+++ b/packages/playwright-core/types/types.d.ts
@@ -20624,7 +20624,9 @@ export interface Inspector {
    *
    * ```js
    * const inspector = page.inspector();
-   * inspector.on('screencastframe', ({ data, width, height }) => console.log(`frame ${width}x${height}, size: ${data.length}`));
+   * inspector.on('screencastframe', ({ data, width, height }) => {
+   *   console.log(`frame ${width}x${height}, size: ${data.length}`);
+   * });
    * await inspector.startScreencast({ size: { width: 800, height: 600 } });
    * // ... perform actions ...
    * await inspector.stopScreencast();