effect-playwright
    Preparing search index...

    Interface Screencast

    Interface for capturing screencast frames from a page.

    interface Screencast {
        hideActions(): Promise<void>;
        hideOverlays(): Promise<void>;
        showActions(
            options?: {
                cursor?: "none" | "pointer";
                duration?: number;
                fontSize?: number;
                position?:
                    | "top-left"
                    | "top"
                    | "top-right"
                    | "bottom-left"
                    | "bottom"
                    | "bottom-right";
            },
        ): Promise<Disposable>;
        showChapter(
            title: string,
            options?: { description?: string; duration?: number },
        ): Promise<void>;
        showOverlay(
            html: string,
            options?: { duration?: number },
        ): Promise<Disposable>;
        showOverlays(): Promise<void>;
        start(
            options?: {
                annotate?: {
                    duration?: number;
                    fontSize?: number;
                    position?:
                        | "top-left"
                        | "top"
                        | "top-right"
                        | "bottom-left"
                        | "bottom"
                        | "bottom-right";
                };
                onFrame?: (
                    frame: {
                        data: Buffer;
                        timestamp: number;
                        viewportHeight: number;
                        viewportWidth: number;
                    },
                ) => any;
                path?: string;
                quality?: number;
                size?: { height: number; width: number };
            },
        ): Promise<Disposable>;
        stop(): Promise<void>;
    }
    Index
    hideActions hideOverlays showActions showChapter showOverlay showOverlays start stop

    • Removes action decorations.

      Returns Promise<void>

    • Hides overlays without removing them.

      Returns Promise<void>

    • Enables visual annotations on interacted elements. Returns a disposable that stops showing actions when disposed.

      Parameters

      • Optionaloptions: {
            cursor?: "none" | "pointer";
            duration?: number;
            fontSize?: number;
            position?:
                | "top-left"
                | "top"
                | "top-right"
                | "bottom-left"
                | "bottom"
                | "bottom-right";
        }
        • Optionalcursor?: "none" | "pointer"

          Cursor decoration shown for pointer actions. "pointer" (the default) renders a mouse pointer that animates from the previous action point to the next one. "none" disables the cursor decoration.

        • Optionalduration?: number

          How long each annotation is displayed in milliseconds. Defaults to 500.

        • OptionalfontSize?: number

          Font size of the action title in pixels. Defaults to 24.

        • Optionalposition?: "top-left" | "top" | "top-right" | "bottom-left" | "bottom" | "bottom-right"

          Position of the action title overlay. Defaults to "top-right".

      Returns Promise<Disposable>

    • Shows a chapter overlay with a title and optional description, centered on the page with a blurred backdrop. Useful for narrating video recordings. The overlay is removed after the specified duration, or 2000ms.

      Parameters

      • title: string

        Title text displayed prominently in the overlay.

      • Optionaloptions: { description?: string; duration?: number }
        • Optionaldescription?: string

          Optional description text displayed below the title.

        • Optionalduration?: number

          Duration in milliseconds after which the overlay is automatically removed. Defaults to 2000.

      Returns Promise<void>

    • Adds an overlay with the given HTML content. The overlay is displayed on top of the page until removed. Returns a disposable that removes the overlay when disposed.

      Parameters

      • html: string

        HTML content for the overlay.

      • Optionaloptions: { duration?: number }
        • Optionalduration?: number

          Duration in milliseconds after which the overlay is automatically removed. Overlay stays until dismissed if not provided.

      Returns Promise<Disposable>

    • Shows overlays.

      Returns Promise<void>

    • Starts the screencast. When path is provided, it saves video recording to the specified file. When onFrame is provided, delivers JPEG-encoded frames to the callback. Both can be used together.

      Usage

      // Record video
      await page.screencast.start({ path: 'video.webm', size: { width: 1280, height: 800 } });
      // ... perform actions ...
      await page.screencast.stop();

      // Capture frames
      await page.screencast.start({
        onFrame: ({ data, timestamp, viewportWidth, viewportHeight }) => {
          console.log(`frame size: ${data.length} (${viewportWidth}x${viewportHeight}) at ${timestamp}`);
        },
        size: { width: 800, height: 600 },
      });
      // ... perform actions ...
      await page.screencast.stop();

      Parameters

      • Optionaloptions: {
            annotate?: {
                duration?: number;
                fontSize?: number;
                position?:
                    | "top-left"
                    | "top"
                    | "top-right"
                    | "bottom-left"
                    | "bottom"
                    | "bottom-right";
            };
            onFrame?: (
                frame: {
                    data: Buffer;
                    timestamp: number;
                    viewportHeight: number;
                    viewportWidth: number;
                },
            ) => any;
            path?: string;
            quality?: number;
            size?: { height: number; width: number };
        }

      Returns Promise<Disposable>

    • Stops the screencast and video recording if active. If a video was being recorded, saves it to the path specified in screencast.start([options]).

      Returns Promise<void>

    Settings
    Member Visibility

    On This Page
    Methods