# Playwright Verification Skill

## Purpose
Run end-to-end Playwright tests against the Press.Zone admin panel and API to verify features work correctly in production.

## Production Environment

- **Admin Panel URL**: `https://100.116.176.87/`
- **API Base URL**: `https://100.116.176.87/v1/`
- **Login Page**: `https://100.116.176.87/login`
- **Login Credentials**: admin@press.zone / Admin2026pz
- **SSL**: Self-signed certificate - use `ignoreHTTPSErrors: true`

## Authentication Flow

1. Navigate to login page
2. Fill email and password fields
3. Submit the login form
4. Wait for redirect to dashboard
5. JWT is stored in localStorage as `access_token`

## Playwright Config Template

Create `admin-panel/playwright.config.ts`:

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

export default defineConfig({
  testDir: './tests/e2e',
  fullyParallel: false,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: 1,
  reporter: 'html',
  use: {
    baseURL: process.env.BASE_URL || 'https://100.116.176.87',
    ignoreHTTPSErrors: true,
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    {
      name: 'setup',
      testMatch: /auth\.setup\.ts/,
    },
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        storageState: './tests/e2e/.auth/admin.json',
      },
      dependencies: ['setup'],
    },
  ],
});
```

## Auth Setup File

Create `admin-panel/tests/e2e/auth.setup.ts`:

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

const AUTH_FILE = './tests/e2e/.auth/admin.json';

setup('authenticate', async ({ page }) => {
  await page.goto('/login');
  await page.fill('input[type="email"]', 'admin@press.zone');
  await page.fill('input[type="password"]', 'Admin2026pz');
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL(/dashboard/, { timeout: 10000 });
  await page.context().storageState({ path: AUTH_FILE });
});
```

## Common Verification Patterns

### Page Load Verification
```typescript
test('page loads correctly', async ({ page }) => {
  await page.goto('/tiers');
  await expect(page.locator('h1')).toContainText('Subscription Tiers');
});
```

### CRUD Operation Verification
```typescript
test('create tier', async ({ page }) => {
  await page.goto('/tiers');
  await page.click('text=Add Tier');
  await page.fill('input[name="name"]', 'Test Tier');
  // ... fill other fields
  await page.click('text=Create');
  await expect(page.locator('text=Test Tier')).toBeVisible();
});
```

### API Response Verification
```typescript
test('API returns tiers', async ({ request }) => {
  const token = process.env.ADMIN_TOKEN;
  const response = await request.get('/v1/admin/tiers', {
    headers: { Authorization: `Bearer ${token}` },
  });
  expect(response.ok()).toBeTruthy();
  const data = await response.json();
  expect(Array.isArray(data)).toBeTruthy();
});
```

### Screenshot Capture
```typescript
test('visual check', async ({ page }) => {
  await page.goto('/tiers');
  await page.waitForLoadState('networkidle');
  await page.screenshot({ path: 'screenshots/tiers-page.png', fullPage: true });
});
```

## How to Run

```bash
cd admin-panel
npx playwright install chromium
npx playwright test
```

## Environment Variables

- `BASE_URL` - Override the default admin panel URL
- `ADMIN_TOKEN` - Pre-authenticated admin JWT for API-only tests
- `CI` - Set to `true` in CI environments for retries