chore: screencast/tracing/video size conflicts

.playwright/cli.config.json

@@ -0,0 +1,8 @@
+{
+  "browser": {
+    "browserName": "chromium",
+    "launchOptions": {
+      "channel": "chromium"
+    }
+  }
+}

docs/src/api/class-inspector.md

@@ -28,8 +28,6 @@ console.log(locator);
 * since: v1.59
 - 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.
 
@@ -41,7 +39,7 @@ 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 } });
+await inspector.startScreencast({ maxSize: { width: 1200, height: 800 } });
 // ... perform actions ...
 await inspector.stopScreencast();
 ```
@@ -58,18 +56,18 @@ const inspector = page.inspector();
 inspector.on('screencastframe', ({ data, width, height }) => {
   console.log(`frame ${width}x${height}, size: ${data.length}`);
 });
-await inspector.startScreencast({ size: { width: 800, height: 600 } });
+await inspector.startScreencast({ maxSize: { width: 800, height: 600 } });
 // ... perform actions ...
 await inspector.stopScreencast();
 ```
 
-### option: Inspector.startScreencast.size
+### option: Inspector.startScreencast.maxSize
 * since: v1.59
-- `size` ?<[Object]>
-  - `width` <[int]> Frame width in pixels.
-  - `height` <[int]> Frame height in pixels.
+- `maxSize` ?<[Object]>
+  - `width` <[int]> Max frame width in pixels.
+  - `height` <[int]> Max frame height in pixels.
 
-Optional dimensions for the screencast frames. If not specified, the current page viewport size is used.
+Maximum screencast frame dimensions. The output frame may be smaller to preserve the page aspect ratio. Defaults to 800×800.
 
 ## async method: Inspector.stopScreencast
 * since: v1.59

log.txt

@@ -0,0 +1,27 @@
+git bisect start
+# status: waiting for both good and bad commits
+# bad: [e4498b29eababe5ab0345f7dd8ea0bf62932841e] chore: freeze webkit version on macos 14 (#38996)
+git bisect bad e4498b29eababe5ab0345f7dd8ea0bf62932841e
+# status: waiting for good commit(s), bad commit known
+# bad: [e4498b29eababe5ab0345f7dd8ea0bf62932841e] chore: freeze webkit version on macos 14 (#38996)
+git bisect bad e4498b29eababe5ab0345f7dd8ea0bf62932841e
+# status: waiting for good commit(s), bad commit known
+# good: [e4498b29eababe5ab0345f7dd8ea0bf62932841e] chore: freeze webkit version on macos 14 (#38996)
+git bisect good e4498b29eababe5ab0345f7dd8ea0bf62932841e
+# bad: [0c45dfc773fef0aa9e13016052bc4f3cd86ba288] fix(windows): hide console window when spawning browser processes (#38776)
+git bisect bad 0c45dfc773fef0aa9e13016052bc4f3cd86ba288
+# good: [7b3b57ab4cf11065477fabb169f8f5d403ef2729] chore: follow up to args parsing (#39178)
+git bisect good 7b3b57ab4cf11065477fabb169f8f5d403ef2729
+# bad: [65576628e6440c4fe05c88dda4a396ce4576baaa] feat(chromium): roll to r1212 (#39240)
+git bisect bad 65576628e6440c4fe05c88dda4a396ce4576baaa
+# bad: [19b4dcd33d4a5b64c942c535d840ac491a88f63a] chore(cli): tray icon (#39218)
+git bisect bad 19b4dcd33d4a5b64c942c535d840ac491a88f63a
+# bad: [0be34e5b32e4da50427f26262e8caa22de0bb2d6] test: make trace-viewer tests e2e (#39174)
+git bisect bad 0be34e5b32e4da50427f26262e8caa22de0bb2d6
+# good: [bfd1ec67a923589fd3b6ff30a6bcceba87ceaf96] Update params.md: fix "it's" typos (#39180)
+git bisect good bfd1ec67a923589fd3b6ff30a6bcceba87ceaf96
+# good: [8f729bab319adb56d23c224f9aa52b8bbb815734] chore(deps): bump jsonwebtoken from 9.0.2 to 9.0.3 (#39149)
+git bisect good 8f729bab319adb56d23c224f9aa52b8bbb815734
+# good: [3d806ab4f1f71249217dfe804c96a9543173481a] chore(aria): replace UUID with regex (#39191)
+git bisect good 3d806ab4f1f71249217dfe804c96a9543173481a
+# first bad commit: [0be34e5b32e4da50427f26262e8caa22de0bb2d6] test: make trace-viewer tests e2e (#39174)

loggg.txt

@@ -0,0 +1,24 @@
+git bisect start
+# status: waiting for both good and bad commits
+# bad: [0c45dfc773fef0aa9e13016052bc4f3cd86ba288] fix(windows): hide console window when spawning browser processes (#38776)
+git bisect bad 0c45dfc773fef0aa9e13016052bc4f3cd86ba288
+# status: waiting for good commit(s), bad commit known
+# good: [e4498b29eababe5ab0345f7dd8ea0bf62932841e] chore: freeze webkit version on macos 14 (#38996)
+git bisect good e4498b29eababe5ab0345f7dd8ea0bf62932841e
+# good: [7b3b57ab4cf11065477fabb169f8f5d403ef2729] chore: follow up to args parsing (#39178)
+git bisect good 7b3b57ab4cf11065477fabb169f8f5d403ef2729
+# bad: [65576628e6440c4fe05c88dda4a396ce4576baaa] feat(chromium): roll to r1212 (#39240)
+git bisect bad 65576628e6440c4fe05c88dda4a396ce4576baaa
+# good: [19b4dcd33d4a5b64c942c535d840ac491a88f63a] chore(cli): tray icon (#39218)
+git bisect good 19b4dcd33d4a5b64c942c535d840ac491a88f63a
+# good: [529f767c666b092e70525b9bcdc30c0e8335457b] fix(chromium): use actual device scale factor for css-scale screenshots (#39233)
+git bisect good 529f767c666b092e70525b9bcdc30c0e8335457b
+# bad: [951911cefedb1dd5a2a15f854a51bd7c34504a5f] chore: split daemon and client folders (#39245)
+git bisect bad 951911cefedb1dd5a2a15f854a51bd7c34504a5f
+# bad: [63f13454dedaa8f12a487df62cf42d9d89192b5b] chore: roll driver/Dockerfile to recent Node.js LTS version (#39238)
+git bisect bad 63f13454dedaa8f12a487df62cf42d9d89192b5b
+# bad: [8946b03f6f7c53e4bca0e9a2f1ab346133bdd25d] test(bidi): set channel option in showTraceViewer() fixture (#39222)
+git bisect bad 8946b03f6f7c53e4bca0e9a2f1ab346133bdd25d
+# bad: [6d35c8b168768a1f6dbc19eb414b2373bd6de8a9] chore: prep devtools app (#39231)
+git bisect bad 6d35c8b168768a1f6dbc19eb414b2373bd6de8a9
+# first bad commit: [6d35c8b168768a1f6dbc19eb414b2373bd6de8a9] chore: prep devtools app (#39231)

packages/playwright-client/types/types.d.ts

@@ -20445,7 +20445,7 @@ export interface Inspector {
    *   console.log(`frame ${width}x${height}, jpeg size: ${data.length}`);
    *   require('fs').writeFileSync('frame.jpg', data);
    * });
-   * await inspector.startScreencast({ size: { width: 1280, height: 720 } });
+   * await inspector.startScreencast({ maxSize: { width: 1200, height: 800 } });
    * // ... perform actions ...
    * await inspector.stopScreencast();
    * ```
@@ -20456,16 +20456,6 @@ export interface Inspector {
      * JPEG-encoded frame data.
      */
     data: Buffer;
-
-    /**
-     * Frame width in pixels.
-     */
-    width: number;
-
-    /**
-     * Frame height in pixels.
-     */
-    height: number;
   }) => any): this;
 
   /**
@@ -20476,16 +20466,6 @@ export interface Inspector {
      * JPEG-encoded frame data.
      */
     data: Buffer;
-
-    /**
-     * Frame width in pixels.
-     */
-    width: number;
-
-    /**
-     * Frame height in pixels.
-     */
-    height: number;
   }) => any): this;
 
   /**
@@ -20499,7 +20479,7 @@ export interface Inspector {
    *   console.log(`frame ${width}x${height}, jpeg size: ${data.length}`);
    *   require('fs').writeFileSync('frame.jpg', data);
    * });
-   * await inspector.startScreencast({ size: { width: 1280, height: 720 } });
+   * await inspector.startScreencast({ maxSize: { width: 1200, height: 800 } });
    * // ... perform actions ...
    * await inspector.stopScreencast();
    * ```
@@ -20510,16 +20490,6 @@ export interface Inspector {
      * JPEG-encoded frame data.
      */
     data: Buffer;
-
-    /**
-     * Frame width in pixels.
-     */
-    width: number;
-
-    /**
-     * Frame height in pixels.
-     */
-    height: number;
   }) => any): this;
 
   /**
@@ -20530,16 +20500,6 @@ export interface Inspector {
      * JPEG-encoded frame data.
      */
     data: Buffer;
-
-    /**
-     * Frame width in pixels.
-     */
-    width: number;
-
-    /**
-     * Frame height in pixels.
-     */
-    height: number;
   }) => any): this;
 
   /**
@@ -20550,16 +20510,6 @@ export interface Inspector {
      * JPEG-encoded frame data.
      */
     data: Buffer;
-
-    /**
-     * Frame width in pixels.
-     */
-    width: number;
-
-    /**
-     * Frame height in pixels.
-     */
-    height: number;
   }) => any): this;
 
   /**
@@ -20573,7 +20523,7 @@ export interface Inspector {
    *   console.log(`frame ${width}x${height}, jpeg size: ${data.length}`);
    *   require('fs').writeFileSync('frame.jpg', data);
    * });
-   * await inspector.startScreencast({ size: { width: 1280, height: 720 } });
+   * await inspector.startScreencast({ maxSize: { width: 1200, height: 800 } });
    * // ... perform actions ...
    * await inspector.stopScreencast();
    * ```
@@ -20584,16 +20534,6 @@ export interface Inspector {
      * JPEG-encoded frame data.
      */
     data: Buffer;
-
-    /**
-     * Frame width in pixels.
-     */
-    width: number;
-
-    /**
-     * Frame height in pixels.
-     */
-    height: number;
   }) => any): this;
 
   /**
@@ -20630,7 +20570,7 @@ export interface Inspector {
    * inspector.on('screencastframe', ({ data, width, height }) => {
    *   console.log(`frame ${width}x${height}, size: ${data.length}`);
    * });
-   * await inspector.startScreencast({ size: { width: 800, height: 600 } });
+   * await inspector.startScreencast({ maxSize: { width: 800, height: 600 } });
    * // ... perform actions ...
    * await inspector.stopScreencast();
    * ```
@@ -20639,16 +20579,17 @@ export interface Inspector {
    */
   startScreencast(options?: {
     /**
-     * Optional dimensions for the screencast frames. If not specified, the current page viewport size is used.
+     * Maximum screencast frame dimensions. The output frame may be smaller to preserve the page aspect ratio. Defaults to
+     * 800×800.
      */
-    size?: {
+    maxSize?: {
       /**
-       * Frame width in pixels.
+       * Max frame width in pixels.
        */
       width: number;
 
       /**
-       * Frame height in pixels.
+       * Max frame height in pixels.
        */
       height: number;
     };

packages/playwright-core/src/client/inspector.ts

@@ -26,7 +26,7 @@ export class Inspector extends EventEmitter implements api.Inspector {
   constructor(page: Page) {
     super(page._platform);
     this._page = page;
-    this._page._channel.on('screencastFrame', ({ data, width, height }) => this.emit('screencastframe', { data, width, height }));
+    this._page._channel.on('screencastFrame', ({ data }) => this.emit('screencastframe', { data }));
   }
 
   async pickLocator(): Promise<Locator> {
@@ -38,7 +38,7 @@ export class Inspector extends EventEmitter implements api.Inspector {
     await this._page._channel.cancelPickLocator({});
   }
 
-  async startScreencast(options: { size?: { width: number, height: number } } = {}): Promise<void> {
+  async startScreencast(options: { maxSize?: { width: number, height: number } } = {}): Promise<void> {
     await this._page._channel.startScreencast(options);
   }
 

packages/playwright-core/src/protocol/validator.ts

@@ -1231,8 +1231,6 @@ scheme.PageRouteEvent = tObject({
 });
 scheme.PageScreencastFrameEvent = tObject({
   data: tBinary,
-  width: tInt,
-  height: tInt,
 });
 scheme.PageWebSocketRouteEvent = tObject({
   webSocketRoute: tChannel(['WebSocketRoute']),
@@ -1550,7 +1548,7 @@ scheme.PagePickLocatorResult = tObject({
 scheme.PageCancelPickLocatorParams = tOptional(tObject({}));
 scheme.PageCancelPickLocatorResult = tOptional(tObject({}));
 scheme.PageStartScreencastParams = tObject({
-  size: tOptional(tObject({
+  maxSize: tOptional(tObject({
     width: tInt,
     height: tInt,
   })),

packages/playwright-core/src/server/chromium/crPage.ts

@@ -889,8 +889,8 @@ class FrameSession {
     this._page.emit(Page.Events.ScreencastFrame, {
       buffer,
       frameSwapWallTime: payload.metadata.timestamp ? payload.metadata.timestamp * 1000 : Date.now(),
-      width: payload.metadata.deviceWidth,
-      height: payload.metadata.deviceHeight,
+      viewportWidth: payload.metadata.deviceWidth,
+      viewportHeight: payload.metadata.deviceHeight,
     });
   }
 

packages/playwright-core/src/server/dispatchers/pageDispatcher.ts

@@ -17,7 +17,6 @@
 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';
@@ -31,6 +30,7 @@ import { SdkObject } from '../instrumentation';
 import { deserializeURLMatch, urlMatches } from '../../utils/isomorphic/urlMatch';
 import { PageAgentDispatcher } from './pageAgentDispatcher';
 import { Recorder } from '../recorder';
+import { eventsHelper } from '../utils/eventsHelper';
 import { disposeAll } from '../disposable';
 
 import type { Artifact } from '../artifact';
@@ -48,6 +48,7 @@ import type * as channels from '@protocol/channels';
 import type { Progress } from '@protocol/progress';
 import type { URLMatch } from '../../utils/isomorphic/urlMatch';
 import type { ScreencastFrame } from '../types';
+import type { RegisteredListener } from '../utils/eventsHelper';
 
 export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, BrowserContextDispatcher> implements channels.PageChannel {
   _type_EventTarget = true;
@@ -62,6 +63,7 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, Brows
   private _locatorHandlers = new Set<number>();
   private _jsCoverageActive = false;
   private _cssCoverageActive = false;
+  private _screencastFrameListener: RegisteredListener | null = null;
 
   static from(parentScope: BrowserContextDispatcher, page: Page): PageDispatcher {
     return PageDispatcher.fromNullable(parentScope, page)!;
@@ -110,7 +112,6 @@ 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, 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()),
@@ -365,11 +366,20 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, Brows
   }
 
   async startScreencast(params: channels.PageStartScreencastParams, progress?: Progress): Promise<channels.PageStartScreencastResult> {
-    const size = validateVideoSize(params.size, this._page.emulatedSize()?.viewport);
+    if (this._screencastFrameListener)
+      throw new Error('Screencast is already running');
+    const size = params.maxSize || { width: 800, height: 800 };
+    // TODO: move to screencast and make startScrencast accept a listener.
+    this._screencastFrameListener = eventsHelper.addEventListener(this._page, Page.Events.ScreencastFrame, (frame: ScreencastFrame) => {
+      this._dispatchEvent('screencastFrame', { data: frame.buffer });
+    });
     await this._page.screencast.startScreencast(this, { quality: 90, width: size.width, height: size.height });
   }
 
   async stopScreencast(params: channels.PageStopScreencastParams, progress?: Progress): Promise<channels.PageStopScreencastResult> {
+    if (this._screencastFrameListener)
+      eventsHelper.removeEventListeners([this._screencastFrameListener]);
+    this._screencastFrameListener = null;
     return this._page.screencast.stopScreencast(this);
   }
 
@@ -440,6 +450,9 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, Brows
     if (this._cssCoverageActive)
       (this._page.coverage as CRCoverage).stopCSSCoverage().catch(() => {});
     this._cssCoverageActive = false;
+    if (this._screencastFrameListener)
+      eventsHelper.removeEventListeners([this._screencastFrameListener]);
+    this._screencastFrameListener = null;
   }
 
   async setDockTile(params: channels.PageSetDockTileParams): Promise<void> {

packages/playwright-core/src/server/firefox/ffPage.ts

@@ -493,8 +493,8 @@ export class FFPage implements PageDelegate {
     this._page.emit(Page.Events.ScreencastFrame, {
       buffer,
       frameSwapWallTime: event.timestamp * 1000, // timestamp is in seconds, we need to convert to milliseconds.
-      width: event.deviceWidth,
-      height: event.deviceHeight,
+      viewportWidth: event.deviceWidth,
+      viewportHeight: event.deviceHeight,
     });
   }