E2E Scenario Generator

# E2E Scenario — User purchases a skill and downloads it

**Framework:** Playwright (TypeScript)
**Base URL:** `http://localhost:3000` (dev) / `https://clearpointnexus.com` (prod smoke)
**Auth pattern:** Clerk with storage-state reuse

<div data-callout="info" data-label="Summary">

Generated five scenarios covering the **happy path**, **two abandonment branches**, and **two failure modes** of the skill-purchase flow. Locators are anchored to `data-testid` attributes (project convention); waits are explicit (`expect().toHaveURL`, `expect().toBeVisible`) — no `page.waitForTimeout`. Auth uses a Clerk storage-state fixture reused across scenarios so tests start logged in.

</div>

<div data-stack data-stack-title="Files produced">
<div data-row data-value="5 scenarios">`e2e/skill-purchase.spec.ts` — happy path + 4 branches</div>
<div data-row data-value="fixture">`e2e/fixtures/authenticated-user.ts` — Clerk storage-state loader</div>
<div data-row data-value="helper">`e2e/helpers/stripe-test-card.ts` — fills the Stripe iframe with 4242…</div>
</div>

---

## Scenarios by priority

| Scenario | Priority | Notes |
|---|---|---|
| Happy path: purchase `research-core` bundle, receive email, download zip | <span data-pill="critical">P0</span> | Drives the highest-value flow end-to-end |
| Stripe declined card (`4000 0000 0000 9995`) → user sees error, can retry | <span data-pill="critical">P0</span> | Most common failure mode |
| Abandoned at checkout (user closes tab before payment) | <span data-pill="caution">P1</span> | Confirms no entitlement is created |
| HMAC download link expired (24h+) | <span data-pill="caution">P1</span> | Confirms 410 + helpful UI message |
| 3DS challenge card (`4000 0027 6000 3184`) → user completes challenge → succeeds | <span data-pill="info">P2</span> | Locale-conditional; runs on prod smoke only |

---

## Happy-path scenario (excerpt)

```typescript
// e2e/skill-purchase.spec.ts
import { test, expect } from '@playwright/test';
import { useAuthenticatedUser } from './fixtures/authenticated-user';
import { fillStripeTestCard } from './helpers/stripe-test-card';

test.describe('Skill purchase', () => {
  useAuthenticatedUser();

  test('P0 — buys research-core bundle and downloads zip', async ({ page, downloadDir }) => {
    await page.goto('/bundles/research-core');

    // Anchor on data-testid, not text — text is copy-edited often
    await page.getByTestId('buy-now-button').click();
    await expect(page).toHaveURL(/checkout\.stripe\.com/);

    await fillStripeTestCard(page, { number: '4242 4242 4242 4242' });
    await page.getByTestId('stripe-pay-button').click();

    // Stripe redirects back to /checkout/success
    await expect(page).toHaveURL(/\/checkout\/success/, { timeout: 30_000 });
    await expect(page.getByTestId('purchase-confirmed-banner')).toBeVisible();

    // Account page should now list the bundle
    await page.getByTestId('nav-account').click();
    await expect(page.getByTestId('purchase-row-research-core')).toBeVisible();

    // Download button triggers a real download
    const downloadPromise = page.waitForEvent('download');
    await page.getByTestId('download-button-research-core').click();
    const download = await downloadPromise;

    expect(download.suggestedFilename()).toMatch(/^research-core.*\.zip$/);
    await download.saveAs(`${downloadDir}/research-core.zip`);
  });
});
```

<div data-callout="caution" data-label="Edge case — Stripe iframe timing">

Playwright's `frameLocator` is reliable, **but the Stripe Checkout iframe takes 600–1200ms to mount fully**. The helper `fillStripeTestCard` waits for the cardnumber input via `await expect(frame.getByLabel('Card number')).toBeVisible({ timeout: 10_000 })` before typing. Skip this and ~20% of CI runs flake on the first run after a cold container start.

</div>

<div data-callout="caution" data-label="Edge case — HMAC token expiry test">

The expired-link scenario can't generate an expired token via the UI without a 24-hour wait. The scenario calls a test-only endpoint `POST /api/test/expire-download-token` that mutates the issued-at timestamp. **This endpoint must be gated behind `NODE_ENV !== 'production'`** — confirm before running e2e against production.

</div>

<div data-callout="info" data-label="What the suite intentionally doesn't cover">

Refunds, plan upgrades from single → bundle, and watermark verification are **not** in this scenario set — they each warrant their own file. The generator can produce those on request; treat this set as the critical-path baseline.

</div>

*Generated by the ClearPoint Nexus E2E Scenario Generator skill. Re-run the generator after material UI changes; locators anchored on `data-testid` survive copy edits but not testid renames.*

This sample illustrates the skill's output format. Names, metrics, and operational details are illustrative unless the artifact explicitly analyzes public information.