First Story (Playwright)

Write a story

Create a spec file (e.g. src/login.story.spec.ts):

import { expect, test } from '@playwright/test';
import { story } from 'executable-stories-playwright';

test.describe('Login', () => {
  test('user logs in successfully', async ({ page }, testInfo) => {
    story.init(testInfo);

    story.given('the user is on the login page');
    await page.goto('/login');

    story.when('the user submits valid credentials');
    await page.fill('[name=email]', '[email protected]');
    await page.fill('[name=password]', 'secret');
    await page.click('button[type=submit]');

    story.then('the user sees the dashboard');
    await expect(page).toHaveURL(/dashboard/);
  });
});

Use story.init(testInfo) at the start of the test (pass testInfo from the test callback), then story.given, story.when, story.then to mark steps. If you want step callbacks to receive fixtures, initialize with story.init({ page }, testInfo) instead.

Run tests

pnpm playwright test

Generated output

The reporter writes to your configured formats and paths. For Markdown output (for example docs/user-stories.md), the story above looks like:

### User logs in successfully

- **Given** the user is on the login page
- **When** the user submits valid credentials
- **Then** the user sees the dashboard

Next

Playwright story & doc API — steps, doc methods, and options.

Converting existing Playwright tests — adopt executable-stories without rewriting existing tests.

Recipes (Playwright) — more examples.