# Baseline Snapshots for Visual Regression Testing

This directory contains comprehensive baseline screenshots of the Comments Press Zone plugin for visual regression testing.

## Overview

The baseline snapshots capture:
- **47 total screenshots** across all plugin states
- **Frontend**: Comments lists, modals, menus, voting states, styling variations
- **Admin**: Dashboard, Moderation, Design, Settings, Tools pages
- **Responsive**: Desktop (1920x1080), Tablet (768x1024), Mobile (375x667)

## Prerequisites

1. WordPress test environment running at `http://localhost:8080`
2. Admin credentials: `admin` / `admin`
3. Test posts created with sample comments

### Required Test Posts

Create these test posts to ensure all snapshots can be captured:

| Post Slug | Description |
|-----------|-------------|
| `test-post-with-comments` | Post with multiple comments (for general testing) |
| `test-post-no-comments` | Post with comments enabled but empty |
| `test-post-many-comments` | Post with 25+ comments (for pagination) |
| `test-post-nested-replies` | Post with nested reply threads |
| `test-post-inherit` | Post with "Inherit" theme setting |
| `test-post-borders-standard` | Post with standard border width |
| `test-post-borders-thick` | Post with thick borders |
| `test-post-borders-extra-thick` | Post with extra-thick borders |
| `test-post-borders-none` | Post with no borders |
| `test-post-padding-minimal` | Post with minimal padding |
| `test-post-padding-standard` | Post with standard padding |
| `test-post-padding-wide` | Post with wide padding |
| `test-post-styling-square` | Post with square styling |
| `test-post-styling-rounded` | Post with rounded styling |
| `test-post-styling-pill` | Post with pill styling |

## Running the Tests

### Capture Baseline Snapshots

```bash
# First time setup - login and save admin state
npx playwright test tests/baseline-snapshots.spec.js --grep "Login"

# Run all baseline snapshot tests
npx playwright test tests/baseline-snapshots.spec.js

# Run specific test groups
npx playwright test tests/baseline-snapshots.spec.js --grep "Frontend Desktop"
npx playwright test tests/baseline-snapshots.spec.js --grep "Admin Desktop"
npx playwright test tests/baseline-snapshots.spec.js --grep "Mobile"
```

### Test Configuration

The test file uses these credentials and URLs:
- **Base URL**: `http://localhost:8080`
- **Admin Username**: `admin`
- **Admin Password**: `admin`
- **Auth State**: Saved to `playwright/.auth/admin.json`

## Snapshot Organization

All baseline images are saved to `tests/baseline/` with this naming convention:

```
[NN]-[area]-[description]-[viewport].png
```

Examples:
- `01-frontend-comments-light-desktop.png`
- `05-frontend-report-modal-desktop.png`
- `36-admin-dashboard-desktop.png`
- `43-admin-dashboard-mobile.png`

## Snapshot Categories

### Frontend States (1-35)

1. **Theme Variations**: Light, Dark, Inherit
2. **Interactive States**: Share dropdown, Report modal, Emoji picker
3. **Admin Actions**: Menu, Reply editor
4. **Content States**: Empty, Pagination, Nested replies
5. **Voting States**: Upvoted, Downvoted
6. **Design Variations**: Borders, Padding, Styling (Square/Rounded/Pill)

### Admin States (36-47)

1. **Pages**: Dashboard, Moderation, Design, Settings, Tools
2. **Features**: Design preview, Mobile sidebar
3. **Viewports**: Desktop and Mobile

## Visual Regression Workflow

### 1. Capture Baseline (Before Changes)

```bash
# Ensure clean baseline directory
rm -rf tests/baseline/*.png

# Run all tests to capture fresh baseline
npx playwright test tests/baseline-snapshots.spec.js
```

### 2. Make Your Changes

Make your code changes to the plugin.

### 3. Compare Against Baseline

Use the `visual-regression.spec.js` test to compare current state against baseline:

```bash
npx playwright test tests/visual-regression.spec.js
```

## Troubleshooting

### Tests Failing Due to Missing Elements

If selectors don't match your implementation:

1. Check the actual class names in the browser dev tools
2. Update the selectors in `tests/baseline-snapshots.spec.js`

Key selectors used:
- Comments wrapper: `.presszone-comments-wrapper`
- Share button: `.presszone-comments-action--share`
- Report button: `.presszone-comments-action--report`
- Emoji trigger: `.presszone-comments-emoji-trigger`
- Admin menu: `.presszone-comments-admin-actions__trigger`
- Reply button: `.presszone-comments-action--reply`
- Vote buttons: `.presszone-comments-vote--up`, `.presszone-comments-vote--down`

### Environment Not Running

If you see connection errors:

1. Start WordPress environment:
   ```bash
   cd /path/to/wordpress
   npm run wp-env start
   ```

2. Verify it's running:
   ```bash
   curl http://localhost:8080
   ```

3. Create test posts with sample data

### Animation Timing Issues

If screenshots capture mid-animation:

1. Increase wait times in `waitForContent()` helper
2. Disable CSS animations in test environment:
   ```css
   * { animation-duration: 0ms !important; }
   ```

## Maintenance

### Adding New Snapshots

1. Add new test case to appropriate `test.describe` block
2. Use `takeScreenshot(page, 'NN-description-viewport')` format
3. Update the summary test count
4. Run tests to capture new baseline

### Updating Baseline

When intentional visual changes are made:

1. Delete old baseline images: `rm tests/baseline/*.png`
2. Re-run tests: `npx playwright test tests/baseline-snapshots.spec.js`
3. Commit new baseline images to version control

## File Structure

```
tests/
├── baseline-snapshots.spec.js    # This test suite
├── baseline/                      # Baseline images (generated)
│   ├── 01-frontend-comments-light-desktop.png
│   ├── 02-frontend-comments-dark-desktop.png
│   └── ...
├── visual-regression.spec.js     # Comparison tests
└── visual-regression/
    ├── baseline/                  # Original baseline
    ├── current/                   # Current screenshots
    └── diff/                      # Differences
```

## Notes

- All screenshots are captured with `fullPage: true` to capture entire page
- Admin tests require authentication via `playwright/.auth/admin.json`
- Tests are organized by viewport and functional area for clarity
- Each test includes error handling for missing elements (graceful degradation)