playwright-test-generator

Playwright Test Generator — SocialApp Admin Panel

Generate Playwright e2e tests for the admin frontend panel following SocialApp conventions and Playwright best practices.

Phase 0: Load Project Context

Read if exists:

1. CLAUDE.md or AGENTS.md — project conventions
2. docs/architecture/ — relevant architecture docs for the task at hand

Use this context to:

• Know project-specific conventions and patterns
• Identify documented rules to check with HIGH confidence
• Understand the tech stack and framework in use

Project Context

• Stack: React 19 + TypeScript 5.9 + Vite 7 + Tailwind CSS 3.4 + Radix UI
• Routing: state-based (activePage in AppShell), NOT React Router
• API layer: requestJSON<T>() through live-only API clients (*ApiLive.ts + *ApiClient.ts)
• Test runner: cd adminpanel/frontend && npm run test:e2e
• Config: adminpanel/frontend/playwright.config.ts (baseURL http://127.0.0.1:4173, Chromium)
• Existing tests: adminpanel/frontend/tests/admin-smoke.spec.ts
• Admin pages: Overview, Users, Moderation, Engagement, Monetization, Ads, Settings, Roles & Access, System

Test Patterns

Page Object Model

Every page under test gets a Page Object class. Place them in adminpanel/frontend/tests/pages/.

// tests/pages/users-page.ts
import { type Locator, type Page, expect } from '@playwright/test';

export class UsersPage {
  readonly page: Page;
  readonly heading: Locator;
  readonly searchInput: Locator;
  readonly userTable: Locator;

  constructor(page: Page) {
    this.page = page;
    this.heading = page.locator('header').getByRole('heading', { level: 2, name: 'Users' });
    this.searchInput = page.getByPlaceholder('Search users...');
    this.userTable = page.getByRole('table');
  }

  async navigate() {
    await this.page.locator('aside').getByRole('button', { name: 'Users' }).click();
    await expect(this.heading).toBeVisible();
  }

  async searchUser(query: string) {
    await this.searchInput.fill(query);
    await this.searchInput.press('Enter');
  }
}