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