# Frontend E2E Tests with Playwright

## Setup

1. Install dependencies:
```bash
npm install
# or
pnpm install
```

2. Install Playwright browsers:
```bash
npx playwright install
```

3. Ensure frontend dev server is running:
```bash
npm run dev
# Server should be at http://localhost:3001
```

## Running Tests

### Run all tests:
```bash
npm run test:e2e
```

### Run tests in UI mode (interactive):
```bash
npm run test:e2e:ui
```

### Run tests in headed mode (see browser):
```bash
npm run test:e2e:headed
```

### Run tests in debug mode:
```bash
npm run test:e2e:debug
```

### Run specific test file:
```bash
npx playwright test auth.spec.ts
npx playwright test comments.spec.ts
npx playwright test memos.spec.ts
npx playwright test filters.spec.ts
```

### Run tests on specific browser:
```bash
npx playwright test --project=chromium
npx playwright test --project=firefox
npx playwright test --project=webkit
```

## Test Structure

- `e2e/auth.spec.ts` - Authentication flows (sign in, sign up, sign out)
- `e2e/comments.spec.ts` - Comment creation, listing, visibility
- `e2e/memos.spec.ts` - Memo CRUD operations
- `e2e/filters.spec.ts` - Filter functionality (date, tag, creator)
- `playwright.config.ts` - Playwright configuration

## Test Data

Tests use test user credentials:
- Email: `test@example.com`
- Password: `testpassword123`

Make sure this user exists in your backend or tests will create it.

## Viewing Test Results

After running tests, view HTML report:
```bash
npx playwright show-report
```

## Debugging

1. **Run in debug mode**: `npm run test:e2e:debug`
2. **Run in headed mode**: `npm run test:e2e:headed`
3. **Use Playwright Inspector**: Automatically opens in debug mode
4. **Check screenshots**: Saved in `test-results/` on failure
5. **Check videos**: Saved in `test-results/` on failure
6. **Check traces**: Saved in `test-results/` on failure

## Configuration

Edit `playwright.config.ts` to:
- Change base URL
- Add more browsers
- Configure timeouts
- Set up CI/CD settings

## Notes

- Tests wait for API calls to complete automatically
- Tests clean up after themselves (sign out, clear cookies)
- Screenshots and videos are saved on failure
- Tests are designed to be resilient to UI changes (uses multiple selectors)

