APAW/.kilo/commands/e2e-test.md

description

description
Run E2E tests with browser automation using Playwright MCP

E2E Testing Workflow

You are running end-to-end tests with browser automation for a web application.

Parameters

• url: The URL to test (required)
• test: Test scenario or 'all' (optional, default: 'all')
• viewport: Viewport size - 'mobile', 'tablet', 'desktop', or custom (optional, default: 'desktop')
• headless: Run without visible browser (optional, default: true)

Prerequisites

1. Playwright MCP must be configured in Kilo Code settings
2. .test/screenshots/ directories must exist
3. Baseline screenshots must exist for visual regression

Step 1: Verify Setup

# Check Playwright MCP is available
npx @playwright/mcp@latest --version

# Create directories if needed
mkdir -p .test/screenshots/{baseline,current,diff}
mkdir -p .test/reports

# Check for baselines
ls -la .test/screenshots/baseline/

Step 2: Run Tests

Test Scenarios

Test	Description	Command
smoke	Basic connectivity	/e2e-test --url=https://example.com --test=smoke
login	Login flow	/e2e-test --url=https://example.com --test=login
register	Registration flow	/e2e-test --url=https://example.com --test=register
navigation	Navigation tests	/e2e-test --url=https://example.com --test=navigation
visual	Visual regression	/e2e-test --url=https://example.com --test=visual
all	All tests	/e2e-test --url=https://example.com --test=all

Viewport Options

Viewport	Width	Height
mobile	375	667
tablet	768	1024
desktop	1280	720
custom	Custom	Custom

Step 3: Test Execution

Use @browser-automation agent to execute tests:

Use the Task tool with subagent_type: "browser-automation"
prompt: "Execute E2E test for {test} on {url} at {viewport} viewport"

Example: Smoke Test

Test: Smoke Test

1. Navigate to URL
   browser_navigate "{url}"

2. Get page state
   browser_snapshot

3. Check page title
   browser_evaluate "document.title"

4. Take screenshot
   browser_take_screenshot ".test/screenshots/current/smoke_{viewport}.png"

5. Verify basic functionality
   - Page loads without errors
   - Title is not empty
   - Critical elements visible

Expected: All steps pass

Example: Login Test

Test: Login Flow

1. Navigate to login page
   browser_navigate "{url}/login"

2. Enter credentials
   browser_type "input[name=email]" "{test_email}"
   browser_type "input[name=password]" "{test_password}"

3. Submit form
   browser_click "button[type=submit]"

4. Wait for redirect
   browser_wait_for "text=Dashboard"

5. Verify logged in state
   browser_snapshot
   browser_evaluate "localStorage.getItem('token')"

6. Take screenshot
   browser_take_screenshot ".test/screenshots/current/login_success_{viewport}.png"

Expected: Login successful, redirect to dashboard

Example: Visual Regression

Test: Visual Regression

1. Navigate to page
   browser_navigate "{url}"

2. Set viewport
   browser_resize "{width}x{height}"

3. Wait for stable
   browser_wait_for "text=Loaded" || browser_wait_for time:2000

4. Take screenshot
   browser_take_screenshot ".test/screenshots/current/{test}_{viewport}.png"

5. Compare to baseline
   Use .kilo/skills/visual-testing/SKILL.md for comparison

Expected: Diff < threshold (default 10%)

Step 4: Report Results

Post results to Gitea issue:

import urllib.request, json, base64

def post_test_results(issue_number, test_name, results):
    user, pwd = "NW", "eshkink0t"
    cred = base64.b64encode(f"{user}:{pwd}".encode()).decode()
    
    # Get token
    req = urllib.request.Request(
        "https://git.softuniq.eu/api/v1/users/NW/tokens",
        data=json.dumps({"name": "e2e-test", "scopes": ["all"]}).encode(),
        headers={'Content-Type': 'application/json', 'Authorization': f'Basic {cred}'},
        method='POST'
    )
    with urllib.request.urlopen(req) as r: token = json.loads(r.read())['sha1']
    
    # Post comment
    body = f"""## ✅ E2E Test: {test_name}

**URL**: {results['url']}
**Viewport**: {results['viewport']}
**Duration**: {results['duration']}ms

### Steps Executed
{chr(10).join([f"- [{s['status']}] {s['name']}" for s in results['steps']])}

### Screenshots
- Baseline: `{results['baseline_path']}`
- Current: `{results['current_path']}`
- Diff: `{results['diff_path']}`

### Visual Diff
- Difference: {results['difference']}%
- Threshold: {results['threshold']}%
- Status: {'✅ PASS' if results['match'] else '❌ FAIL'}

**Next**: {results['next_agent']}
"""
    req = urllib.request.Request(
        f"https://git.softuniq.eu/api/v1/repos/UniqueSoft/APAW/issues/{issue_number}/comments",
        data=json.dumps({"body": body}).encode(),
        headers={'Content-Type': 'application/json', 'Authorization': f'token {token}'},
        method='POST'
    )
    urllib.request.urlopen(req)

Step 5: Handle Failures

If tests fail:

1. Take screenshot of error state
2. Get page state with browser_snapshot
3. Console logs with browser_console_messages
4. Network requests with browser_network_requests
5. Post to Gitea with error details

Example Workflow

User: /e2e-test --url=https://app.example.com --test=login --viewport=desktop

1. Invoke @browser-automation agent
2. Execute login test steps
3. Capture screenshots
4. Compare to baseline (if visual)
5. Post results to Gitea issue (if specified)
6. Return test summary

Before Starting (MANDATORY)

1. Check git history for similar E2E tests
2. Verify test environment URL is accessible
3. Create baseline screenshots if needed
4. Clear previous test artifacts

Gitea Commenting (MANDATORY)

You MUST post a comment to the Gitea issue after test completion.

Include:

• Test name and URL
• Viewport configuration
• Duration
• Step results
• Screenshot paths
• Visual diff results (if applicable)
• Pass/fail status

Agents Involved

• @browser-automation - Executes Playwright MCP commands
• @visual-tester - Compares screenshots (if visual test)
• @sdet-engineer - Writes test cases
• @code-skeptic - Reviews test quality

Next Steps

After E2E tests:

• @visual-tester - Generate visual report
• @evaluator - Score test coverage
• @release-manager - Commit test results