Playwright
Testing

# Install Playwright and browsers
npm init playwright@latest

# When prompted, select:
#  TypeScript
#  tests folder: e2e/
#  GitHub Actions CI: Yes
#  Install browsers: Yes

# This creates:
#  playwright.config.ts
#  e2e/ folder
#  .github/workflows/playwright.yml

boots-proposals/
├── e2e/
│   ├── fixtures/          # Reusable test setup (auth, tenants)
│   │   ├── auth.setup.ts  # Login + save session state
│   │   └── tenant.fixture.ts  # Multi-tenant context factory
│   ├── pages/             # Page Object Models
│   │   ├── login.page.ts
│   │   ├── dashboard.page.ts
│   │   ├── proposal.page.ts
│   │   └── brain.page.ts
│   ├── tests/
│   │   ├── auth.spec.ts
│   │   ├── proposal-crud.spec.ts
│   │   ├── multi-tenant.spec.ts    # P0 regression tests
│   │   ├── brain-generation.spec.ts
│   │   └── sharing.spec.ts
│   └── utils/
│       ├── test-data.ts   # Factory functions for test data
│       └── api-helpers.ts # Direct Supabase API calls
├── playwright.config.ts
└── .env.test              # Test environment variables

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './e2e/tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: [
    ['html', { open: 'never' }],
    ['list'],
    ...(process.env.CI ? [['github']] : []),
  ],
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
  projects: [
    { name: 'setup', testMatch: /.*\.setup\.ts/ },
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
      dependencies: ['setup'],
    },
    {
      name: 'tenant-isolation',
      testMatch: '**/multi-tenant.spec.ts',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

# Run multi-tenant tests with full trace + video
npx playwright test multi-tenant --trace on --video on

# Run a specific test by name
npx playwright test -g 'should not leak proposals between tenants'

# Run with retries for flaky investigation
npx playwright test --retries=3 --reporter=html

# Update screenshots for visual regression
npx playwright test --update-snapshots

# Run on all browsers
npx playwright test --project=chromium --project=firefox --project=webkit

# Run in parallel with 4 workers
npx playwright test --workers=4

{
  "scripts": {
    "test:unit": "vitest run",
    "test:e2e": "npx playwright test",
    "test:e2e:ui": "npx playwright test --ui",
    "test:e2e:p0": "npx playwright test --grep @p0",
    "test:all": "npm run test:unit && npm run test:e2e",
    "test:ci": "npm run test:unit && npx playwright test --project=chromium"
  }
}

import { test, expect } from '@playwright/test';

test.describe('Multi-Tenant Isolation @p0', () => {
  test('Tenant A proposals must NOT appear for Tenant B', async ({ browser }) => {
    // Create two completely separate browser contexts
    const tenantAContext = await browser.newContext();
    const tenantBContext = await browser.newContext();
    const tenantAPage = await tenantAContext.newPage();
    const tenantBPage = await tenantBContext.newPage();

    // Login as Tenant A
    await tenantAPage.goto('/login');
    await tenantAPage.getByLabel('Email').fill('tenantA@test.com');
    await tenantAPage.getByLabel('Password').fill('testpass123');
    await tenantAPage.getByRole('button', { name: 'Sign In' }).click();
    await tenantAPage.waitForURL('/dashboard');

    // Tenant A creates a proposal
    await tenantAPage.getByRole('link', { name: 'New Proposal' }).click();
    await tenantAPage.getByLabel('Meeting Notes').fill(
      'SECRET: Client wants $50K budget for AI chatbot'
    );
    await tenantAPage.getByRole('button', { name: 'Generate' }).click();
    await tenantAPage.waitForSelector('[data-testid="proposal-card"]');

    // Login as Tenant B
    await tenantBPage.goto('/login');
    await tenantBPage.getByLabel('Email').fill('tenantB@test.com');
    await tenantBPage.getByLabel('Password').fill('testpass456');
    await tenantBPage.getByRole('button', { name: 'Sign In' }).click();
    await tenantBPage.waitForURL('/dashboard');

    // CRITICAL ASSERTION: Tenant B must NOT see Tenant A's data
    const allText = await tenantBPage.textContent('body');
    expect(allText).not.toContain('SECRET');
    expect(allText).not.toContain('$50K budget');
    expect(allText).not.toContain('tenantA');

    // Cleanup
    await tenantAContext.close();
    await tenantBContext.close();
  });
});

import { test, expect } from '@playwright/test';

test.describe('API Multi-Tenant Isolation @p0', () => {
  test('Supabase RLS blocks cross-tenant reads', async ({ request }) => {
    // Authenticate as Tenant A via API
    const authA = await request.post('/api/auth/login', {
      data: { email: 'tenantA@test.com', password: 'testpass123' }
    });
    const tokenA = (await authA.json()).access_token;

    // Create proposal as Tenant A
    const createRes = await request.post('/api/proposals', {
      headers: { Authorization: `Bearer ${tokenA}` },
      data: { title: 'Secret Proposal', notes: 'Confidential data' }
    });
    const proposalId = (await createRes.json()).id;

    // Authenticate as Tenant B
    const authB = await request.post('/api/auth/login', {
      data: { email: 'tenantB@test.com', password: 'testpass456' }
    });
    const tokenB = (await authB.json()).access_token;

    // Tenant B tries to read Tenant A's proposal
    const readRes = await request.get(`/api/proposals/${proposalId}`, {
      headers: { Authorization: `Bearer ${tokenB}` }
    });

    // MUST be 403 or 404, NEVER 200
    expect([403, 404]).toContain(readRes.status());

    // Tenant B lists all proposals — must not include Tenant A's
    const listRes = await request.get('/api/proposals', {
      headers: { Authorization: `Bearer ${tokenB}` }
    });
    const proposals = await listRes.json();
    const ids = proposals.map(p => p.id);
    expect(ids).not.toContain(proposalId);
  });
});

# Open codegen pointed at your local dev server
npx playwright codegen http://localhost:3000

# With device emulation
npx playwright codegen --device='iPhone 14' http://localhost:3000

# Save directly to a file
npx playwright codegen --output e2e/tests/recorded.spec.ts http://localhost:3000

# Run tests with traces
npx playwright test --trace on

# Open the trace file
npx playwright show-trace test-results/trace.zip

# Or drag-and-drop the zip to:
# https://trace.playwright.dev

test('API: create and retrieve proposal', async ({ request }) => {
  const response = await request.post('/api/proposals', {
    data: { title: 'Test', notes: 'Meeting notes here' }
  });
  expect(response.ok()).toBeTruthy();
  const body = await response.json();
  expect(body.id).toBeDefined();
});

test('handles AI generation failure gracefully', async ({ page }) => {
  // Mock the AI endpoint to return an error
  await page.route('**/api/generate', route =>
    route.fulfill({ status: 500, body: 'AI service down' })
  );

  await page.goto('/proposals/new');
  await page.getByRole('button', { name: 'Generate' }).click();

  // Assert graceful error handling
  await expect(page.getByText('generation failed')).toBeVisible();
});

import { test as setup, expect } from '@playwright/test';

setup('authenticate', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('test@bootsagentai.com');
  await page.getByLabel('Password').fill('testpassword');
  await page.getByRole('button', { name: 'Sign In' }).click();
  await page.waitForURL('/dashboard');

  // Save the authenticated state — reused by all tests
  await page.context().storageState({ path: '.auth/user.json' });
});

name: Playwright Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    timeout-minutes: 30
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

#!/bin/sh
echo "Running P0 isolation tests..."
npx playwright test --grep @p0 --project=chromium
echo "All P0 tests passed. Safe to push."

# Step 1: Unit tests (fast feedback)
npm run test:unit

# Step 2: P0 isolation tests (must pass — no exceptions)
npx playwright test --grep @p0

# Step 3: Full E2E suite (if time allows)
npx playwright test

# Step 4: Check the report
npx playwright show-report

# Step 5: Deploy with confidence
git push