> ## Documentation Index
> Fetch the complete documentation index at: https://laminar.sh/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Playwright observability

> Record Playwright browser sessions in JavaScript and Python and read them synced to the surrounding agent trace in Laminar.

[Playwright](https://playwright.dev/) is a framework for browser automation. It has bindings for both JavaScript and Python.

<Note>
  Laminar excels at tracing browser agents by providing unified visibility into both browser session recordings and agent execution steps.
</Note>

## Playwright integration

Laminar has a native integration with Playwright for both JavaScript and Python. You simply need to initialize Laminar with your project API key and Playwright will be traced automatically.
We will hook into the API to create OpenTelemetry spans, but more importantly, we record browser session recordings.

<Tabs>
  <Tab title="JavaScript/Typescript">
    ```javascript {1, 4-11} theme={null}
    import { Laminar } from '@lmnr-ai/lmnr';
    import { chromium } from 'playwright';

    Laminar.initialize({
      projectApiKey: process.env.LMNR_PROJECT_API_KEY,
      instrumentModules: {
        playwright: {
          chromium
        }
      }
    });

    // The rest of your playwright code
    ```
  </Tab>

  <Tab title="Python">
    ```python theme={null}
    from lmnr import Laminar
    from playwright.sync_api import sync_playwright

    Laminar.initialize(project_api_key=os.environ["LMNR_PROJECT_API_KEY"])

    with sync_playwright() as p:
        browser = p.chromium.launch()
        # The rest of your playwright code
    ```

    <Tip>
      We recommend that you wrap your playwright code in a function call and `@observe` that function,
      so that the session and the trace are properly linked.
    </Tip>
  </Tab>
</Tabs>

## Related integrations

<CardGroup cols={2}>
  <Card title="Puppeteer" href="/docs/integrations/puppeteer">
    Record Puppeteer browser sessions alongside your traces.
  </Card>

  <Card title="Browser Use" href="/docs/integrations/browser-use">
    Trace Browser Use agents with synced session recordings.
  </Card>

  <Card title="Stagehand" href="/docs/integrations/stagehand">
    Trace Stagehand runs with synced session recordings.
  </Card>

  <Card title="Skyvern" href="/docs/integrations/skyvern">
    Trace Skyvern workflows with synced session recordings.
  </Card>

  <Card title="Kernel" href="/docs/integrations/kernel">
    Trace computer-using agents running on Kernel browsers.
  </Card>

  <Card title="All integrations" href="/docs/integrations">
    Browse every provider, framework, coding agent, and browser integration Laminar supports.
  </Card>
</CardGroup>