> ## Documentation Index
> Fetch the complete documentation index at: https://tracevell.com/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 Tracevell.

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

> [!NOTE]
>
> Tracevell excels at tracing browser agents by providing unified visibility into both browser session recordings and agent execution steps.

## Playwright integration

Tracevell has a native integration with Playwright for both JavaScript and Python. You simply need to initialize Tracevell 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.

> [tab] JavaScript/Typescript
>
> ```javascript {1, 4-11} theme={null}
> import { Tracevell } 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] Python
>
> ```python theme={null}
> from lmnr import Tracevell
> 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.

## Related integrations

> [card] [Puppeteer](https://tracevell.com/docs/integrations/puppeteer.md)
>
> Record Puppeteer browser sessions alongside your traces.

> [card] [Browser Use](https://tracevell.com/docs/integrations/browser-use.md)
>
> Trace Browser Use agents with synced session recordings.

> [card] [Stagehand](https://tracevell.com/docs/integrations/stagehand.md)
>
> Trace Stagehand runs with synced session recordings.

> [card] [Skyvern](https://tracevell.com/docs/integrations/skyvern.md)
>
> Trace Skyvern workflows with synced session recordings.

> [card] [Kernel](https://tracevell.com/docs/integrations/kernel.md)
>
> Trace computer-using agents running on Kernel browsers.

> [card] [All integrations](https://tracevell.com/docs/integrations.md)
>
> Browse every provider, framework, coding agent, and browser integration Tracevell supports.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.