Generate E2E Test

This Skill converts workflow descriptions into working automated end-to-end tests by first performing the workflow step-by-step using Playwright MCP browser tools, then generating and refining test code based on the actual interaction.

Overview

Convert the following workflow description into working automated tests:

$ARGUMENTS

Process

1. Initial Setup

• •Start Playwright MCP browser session using browser_navigate to target URL
• •Ask the user to authenticate and perform any initialization steps if needed (there are likely already helper methods in the project test platform files for this)
• •Take initial snapshot using browser_snapshot to understand page structure and confirm readiness to begin with the user

2. Manual Workflow Execution

For each step in the described workflow:

Capture state: Use browser_snapshot before each interaction to understand the current page structure

Perform action: Execute using appropriate MCP tools:

• •browser_click - Click buttons, links, or elements
• •browser_type - Type text into fields
• •browser_fill_form - Fill multiple form fields at once
• •browser_select_option - Select from dropdowns
• •browser_press_key - Press keyboard keys
• •Other browser tools as needed

Collect selectors:

• •Primary: Note ref values from accessibility snapshots (most stable)
• •Fallback: Use browser_evaluate with queries like document.querySelector('[data-testid="..."]') if needed

Verify outcomes: Use browser_wait_for or snapshot to confirm expected results after each action

Document: Track successful selector patterns and interaction sequences for test generation

3. Generate Test Code

Read project conventions: Review TESTING.md for:

• •Test runner setup and syntax
• •Available helper methods and fixtures
• •Assertion patterns
• •File naming and location conventions

Write test spec: Transform recorded workflow into test code using:

• •Collected selectors (prefer stable attributes: data-testid, aria-label, role+name)
• •Project's testing patterns from TESTING.md
• •Appropriate waits and assertions
• •Helper methods from tests/e2e/utils/test-helpers.ts

File location: Place test in appropriate directory under tests/e2e/ based on feature area:

• •tests/e2e/admin/ - Super admin features
• •tests/e2e/auth/ - Authentication flows
• •tests/e2e/client/ - Client-specific features
• •tests/e2e/dashboard/ - Dashboard pages
• •tests/e2e/marketing/ - Public pages
• •tests/e2e/workouts/ - Workout features

4. Validate & Refine

Run test: Execute using project's test command from TESTING.md:

pnpm test:e2e:ai tests/e2e/your-test.spec.ts

Debug failures:

• •If selector issues: Return to MCP browser, use browser_snapshot and browser_evaluate to find better selectors
• •If timing issues: Add appropriate waits using waitForElementWithRetry or similar helpers
• •If assertion failures: Verify expected values using MCP tools

Iterate: Repeat debugging until test passes consistently

Key MCP Tools Usage

Discovery:

• •browser_snapshot (primary) - Get page structure and element information
• •browser_evaluate (for complex queries) - Execute JavaScript to query DOM

Actions:

• •browser_click - Click elements
• •browser_type - Type text
• •browser_fill_form - Fill multiple form fields
• •browser_select_option - Select dropdown options
• •browser_press_key - Press keyboard keys

Validation:

• •browser_wait_for - Wait for elements or conditions
• •browser_verify_* tools - Verify element visibility, text, and values

Debugging:

• •browser_console_messages - Check console errors
• •browser_network_requests - Inspect network activity
• •browser_take_screenshot - Capture visual state

Best Practices

Selector Strategy

• •Prefer accessibility-based selectors (role, aria-label) over fragile CSS
• •Use test utilities like getByRole(), getByText(), getByLabel() from Playwright
• •Always verify selectors return only a single element to avoid strict mode violations
• •Check if actions are in dropdown menus (look for "More actions" buttons)

Waiting and Timing

• •Always wait for elements/text after navigation or async operations
• •Use helper methods like waitForElementWithRetry() for robust waiting
• •For table data: Use waitForTableLoaded(page) before interacting with table elements

Test Structure

• •Use fixtures from tests/e2e/fixtures.ts for pre-configured test data
• •Test both happy path and error conditions when specified
• •Scope selectors to specific containers to avoid matching toast notifications
• •Clean up test data using protected email patterns (e2e-*@example.com)

Navigation

• •Use navigateToPage() helper instead of page.goto() for reliable client-side routing
• •Wait for content-based conditions, not just domcontentloaded

Examples

Simple Form Test

import { test, expect } from './fixtures'
import { navigateToPage, expectToast } from './utils/test-helpers'

test('user can create exercise', async ({ page, superAdminUser }) => {
  await navigateToPage(page, '/super-admin/exercises')

  await page.getByRole('button', { name: 'Add Exercise' }).click()
  await page.getByLabel('Name').fill('Bench Press')
  await page.getByLabel('Muscle Group').selectOption('Chest')

  await page.getByRole('button', { name: 'Save' }).click()
  await expectToast(page, 'Exercise created successfully')
})

Workflow with Dropdown Menu

test('user can delete exercise', async ({ page, superAdminUser }) => {
  await navigateToPage(page, '/super-admin/exercises')

  // Open dropdown menu first
  const row = page.locator('tr').filter({ hasText: 'Bench Press' })
  await row.locator('[aria-label*="More actions"]').click()

  // Then select delete action
  await page.getByRole('menuitem', { name: 'Delete' }).click()
  await page.getByRole('button', { name: 'Confirm' }).click()

  await expectToast(page, 'Exercise deleted successfully')
})

Requirements

• •Playwright MCP server must be running and connected
• •Development server should be running at http://localhost:3000
• •Project must have TESTING.md and test utilities configured

Troubleshooting

If tests fail:

1. •Read the AI Coding Agent Reporter output in test-report-for-coding-agents/all-failures.md
2. •Check console logs using browser_console_messages
3. •Inspect DOM structure with browser_snapshot
4. •Verify network requests with browser_network_requests
5. •Take screenshots at failure points with browser_take_screenshot

If stuck debugging, ask a human to inspect the Playwright trace in playwright-report/ which contains detailed execution information.