Session Replay (Beta)

info

Session Replay is a Beta feature available for all users.

The Session Replay feature lets you record browser sessions and later replay them for debugging and analysis.

This feature is particularly useful for:

• Debugging complex user workflows and interactions
• Creating visual documentation of browser automation processes
• Troubleshooting issues with recorded evidence

Prerequisites

Before using Session Replay, make sure you have:

1. A Browserless account with Session Replay access
2. Node.js installed on your system (for code examples)
3. A browserless API key
4. The required npm packages:

   npm install puppeteer-core

Recording a Session

With Browserless-as-a-Service (BaaS)

Pass the replay=true parameter when connecting to enable recording:

Puppeteer

import puppeteer from 'puppeteer-core';

const sleep = (ms) => new Promise((res) => setTimeout(res, ms));

const recordSession = async () => {
  const browser = await puppeteer.connect({
    browserWSEndpoint: `wss://production-sfo.browserless.io?token=YOUR_API_TOKEN_HERE&timeout=300000&headless=false&replay=true`,
  });

  const page = await browser.newPage();
  await page.goto("https://www.example.com", { waitUntil: "networkidle0" });

  const cdp = await page.createCDPSession();

  // Example: Random mouse movements for demonstration
  const randomMouseMovements = async (page, moves = 20) => {
    const viewport = page.viewport() || { width: 1280, height: 720 };
    for (let i = 0; i < moves; i++) {
      const x = Math.floor(Math.random() * viewport.width);
      const y = Math.floor(Math.random() * viewport.height);

      await page.mouse.move(x, y, {
        steps: 5 + Math.floor(Math.random() * 10),
      });
      await sleep(100 + Math.random() * 300);
    }
  };

  await randomMouseMovements(page, 2);
  await sleep(6000);

  // Stop the recording
  await cdp.send("Browserless.stopSessionRecording");
  await browser.close();
};

recordSession().catch(console.error);

Playwright

import { chromium } from 'playwright-core';

const sleep = (ms) => new Promise((res) => setTimeout(res, ms));

const recordSession = async () => {
  const browser = await chromium.connectOverCDP(
    'wss://production-sfo.browserless.io?token=YOUR_API_TOKEN_HERE&timeout=300000&headless=false&replay=true'
  );

  const [context] = await browser.contexts();
  const page = await context.newPage();
  await page.goto("https://www.example.com", { waitUntil: "networkidle" });

  const cdpSession = await context.newCDPSession(page);

  // Example: Random mouse movements for demonstration
  const randomMouseMovements = async (page, moves = 20) => {
    const viewport = page.viewportSize() || { width: 1280, height: 720 };
    for (let i = 0; i < moves; i++) {
      const x = Math.floor(Math.random() * viewport.width);
      const y = Math.floor(Math.random() * viewport.height);

      await page.mouse.move(x, y);
      await sleep(100 + Math.random() * 300);
    }
  };

  await randomMouseMovements(page, 2);
  await sleep(6000);

  // Stop the recording
  await cdpSession.send("Browserless.stopSessionRecording");
  await browser.close();
};

recordSession().catch(console.error);

BQL Users

For BrowserQL-specific Session Replay documentation, see Session Replay with BQL.