Validate E2E Skill

Use this skill to interactively validate that implemented features work correctly by navigating the UI and verifying expected behavior.

What This Skill Does

Receives the UI endpoint URL from Aspire runtime (typically https://localhost:3000)
Receives feature context/requirements from the user or implementation notes
Uses Playwright MCP browser tools to navigate the UI
Executes feature-specific validation flows tailored to the requirements
Verifies UI state changes, element properties, API responses
Reports validation results (pass/fail per step) with evidence
Exits with failure if any assertions fail or expected behavior is not observed

When to Use

After Aspire runtime is healthy and running
After builds and tests all pass
To validate feature behavior matches requirements (happy-path workflows)
To verify UI state changes and interactions work correctly
To confirm API integration from the user's perspective

How the Agent Should Use This Skill

Step 1: Understand Feature Context

Before starting E2E validation, understand what feature is being validated. Examples:

Feature: "Change survey creation button color to purple"
- Validation Flow: Navigate to survey list page → verify button color is purple
Feature: "Add user registration flow with Auth0"
- Validation Flow: Navigate to login → register new user → verify user is authenticated
Feature: "Create new survey with questions"
- Validation Flow: Login → navigate to create survey → add title and questions → verify survey appears in list

Step 2: Navigate to UI

Use Playwright MCP navigate tool to go to the UI endpoint:

Navigate to: https://localhost:3000

Step 3: Execute Feature-Specific Happy-Path

Based on the feature being validated, execute appropriate steps:

Generic Happy-Path Flows

User Registration Flow (if feature involves user management):

Take page snapshot to see current UI
Click "Register" or "Sign Up" button
Fill in user registration form (email, name, etc.)
Submit form
Verify successful registration (redirect to home or dashboard, welcome message)

Survey Creation Flow (if feature involves survey creation):

Navigate to/login to application
Click "Create Survey" or "New Survey" button
Fill in survey title and description
Verify form validation works (try invalid inputs)
Submit form
Verify survey appears in survey list
Verify survey details load correctly

Survey Completion Flow (if feature involves completing surveys):

Navigate to available surveys
Click "Take Survey" or "Complete" button
Answer survey questions
Submit responses
Verify completion confirmation
Verify survey results/summary displayed

Feature-Specific Validation:

For "purple button" feature: verify specific element has correct CSS color property
For "API integration" feature: use Network tab inspection to verify API calls were made
For "form validation" feature: test invalid inputs and verify error messages appear
For "sorting/filtering" feature: apply sort/filter and verify results are correct order

Step 4: Assert Expected State

For each validation step, use Playwright to verify:

Element Presence: Element exists on page (getByRole('button', { name: 'Create' }))
Element Properties: Check specific attributes (color, text content, disabled state)
Page Navigation: Verify redirect/navigation happened (currentURL contains expected path)
Error Messages: Verify error or success messages appear
List Content: Verify items in lists match expected values

Step 5: Report Results

Document findings:

✅ Pass: Step executed successfully, assertion verified
❌ Fail: Step failed, assertion not met (include details: expected vs. actual)
⚠️ Partial: Feature works but with caveats (e.g., layout issue but functionality OK)

Example E2E Validation Scenarios

Scenario 1: Change Button Color to Purple

Requirement: Make the "Create Survey" button purple
Validation:
1. Navigate to https://localhost:3000
2. Locate "Create Survey" button
3. Inspect button element for CSS color property
4. Verify color matches purple (e.g., rgb(128, 0, 128) or #800080)
Result: ✅ Button is purple OR ❌ Button is still blue

Scenario 2: User Registration

Requirement: Add Auth0-based user registration
Validation:
1. Navigate to https://localhost:3000
2. Click "Sign Up" link
3. Fill registration form (email: test@example.com, name: Test User)
4. Submit form
5. Verify redirect to dashboard or home page
6. Verify user name displayed in UI
Result: ✅ Registration successful, user authenticated OR ❌ Registration failed

Scenario 3: Create and List Surveys

Requirement: Allow users to create surveys and see them in list
Validation:
1. Navigate to https://localhost:3000 and authenticate
2. Click "Create Survey"
3. Fill form (title: "Test Survey", description: "Test Description")
4. Submit
5. Verify redirect to survey details or list page
6. Verify new survey appears in list with correct title
Result: ✅ Survey created and visible in list OR ❌ Survey not created/not visible

Using Playwright MCP Tools

Key Playwright MCP tools available for this skill:

Navigate: Go to URL

mcp_playwright_browser_navigate(url: "https://localhost:3000")

Click: Click an element

mcp_playwright_browser_click(element: "Create Survey button", ref: "button[name='create']")

Fill Form: Fill input fields

mcp_playwright_browser_fill_form(fields: [{name: "Email", type: "textbox", ref: "input[type='email']", value: "test@example.com"}])

Evaluate: Run JavaScript to inspect state

mcp_playwright_browser_evaluate(function: "() => document.querySelector('button').textContent")

Take Snapshot: Capture accessibility snapshot of page

(Use activate_page_capture_tools to access screenshot tools)

Wait For: Wait for text or UI to appear

mcp_playwright_browser_wait_for(text: "Survey created successfully")

Success Criteria

All feature-specific validation steps execute without errors
All assertions pass (elements exist, properties match, navigation works)
No UI errors or broken state observed
User can complete the intended workflow

Failure Indicators

Any assertion fails (element missing, property mismatch, navigation broken)
JavaScript errors in browser console
Unexpected navigation or state
Error messages appearing where success expected
Timeout waiting for expected elements/text

Important Notes

Feature Context: The specifics of what to validate depend on the feature requirements. Tailor the flow to the actual feature being implemented.
Authentication: Some flows may require authentication. If starting from unauthenticated state, include login step if needed.
Timing: Some operations take time (API calls, page loads). Use wait_for to wait for UI updates.
Browser State: Each validation run starts fresh; previous state is not retained between runs.
Developer Certificates: UI uses developer HTTPS certificates; browser will trust them (auto-configured).

Cleanup

After E2E validation completes, manually stop Aspire:

Press Ctrl+C in the terminal running `aspire run`

Next Steps

If validation passes: Feature implementation is complete and validated ✅
If validation fails: Report failures to user for debugging/fixing

validate-e2e