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

# Playwright

> End-to-end browser tests with @varianz/playwright: the page carries the session header automatically while you override and observe backend VPoints.

`@varianz/playwright` drives a real browser against an instrumented backend: the fixture creates a session per test and automatically sets the `x-varianz-id` header on the `page`, so every request the browser makes carries your session — while you override and probe VPoints anywhere in the backend graph.

Install it ([instructions](/installation#typescript)) and import `test` from the package instead of `@playwright/test`:

```typescript theme={null}
// tests/pricing.spec.ts
import { test, expect, cel } from '@varianz/playwright';

test('payment decline shows an error', async ({ page, varianz }) => {
  await varianz.insert(cel('payment/charge',
    'ChargeResult { txnId: "", declined: true }'));
  await varianz.awaitSyncOrFail(5_000);

  // page already carries x-varianz-id = varianz.sessionId
  await page.goto('/cart');
  await page.click('#checkout-button');

  await expect(page.locator('#error-message')).toContainText('declined');
  await expect(varianz).toEventuallyHaveSample('order-placed', { within: 10_000 });
});
```

The `varianz` fixture is test-scoped; a worker-scoped `VarianzClient` handles the registry connection. The session API (`insert`, `awaitSyncOrFail`, `assertSample`, `sessionId`) is the same as [Vitest's](/testing/vitest#session-api).

## Endpoint

Set the registry endpoint explicitly — via `VARIANZ_ENDPOINT` in the test environment:

```bash theme={null}
VARIANZ_ENDPOINT=http://localhost:50051 \
VARIANZ_ENABLED=true \
VARIANZ_INSECURE_ALLOW_PLAINTEXT=true \
npx playwright test
```

## What Playwright tests can and can't reach

The browser only talks to your frontend, but the session header [propagates](/guides/propagate-sessions) from the frontend through the backend graph — so stages on any downstream VPoint (payments, email, fraud) apply to the browser's requests. The backend services can be written in any supported language; the frontend itself only needs to forward the header.