e2e-page-test

# E2E Page Testing Skill

## Overview

This skill systematically tests every page in an application using Playwright MCP. It verifies page loading, element rendering, interaction functionality, and error detection.

## Standard Test Plan Location

**Plan file**: `tests/e2e-test-plan.md`

This skill reads the page inventory from the test plan at `tests/e2e-test-plan.md`. If the plan file doesn't exist, the calling command should invoke the `e2e-test-plan` skill first to generate it.

## Purpose

Ensure that:
- All pages load without errors
- All expected elements are present
- All interactions work correctly
- No console or network errors occur
- Pages are accessible and functional

## Workflow

### Step -1: Test Plan Verification (REQUIRED FIRST)

**CRITICAL**: Before testing pages, verify the test plan exists.

1. **Check for Test Plan**
   - Look for `tests/e2e-test-plan.md`
   - If the file exists, read the "Pages to Test" section
   - If the file does NOT exist, STOP and report that the plan must be generated first

2. **Read Page List from Plan**
   - Extract public pages
   - Extract authenticated pages
   - Extract admin pages
   - Use this list for testing

### Step 0: Build Assets & Verify URL (CRITICAL - DO THIS FIRST)

**Before testing any pages, build assets and verify the application is accessible.**

#### 0a. Build Application Assets

Missing assets are a common cause of E2E test failures. Before testing:

1. **Check for package.json**
   ```
   Look for package.json in project root
   If found, assets likely need building
   ```

2. **Run Build Commands**
   ```
   npm install      # If node_modules missing
   npm run build    # Compile production assets
   # or for dev server:
   npm run dev      # Start Vite/webpack dev server
   ```

3. **Detect Build Issues**
   After loading a page, check for:
   - Unstyled content (missing CSS)
   - Blank pages (missing JS)
   - Console errors: "Failed to load resource"
   - Network 404s for .js, .css, .png file