Test Generation with Playwright MCP

Generate a Playwright TypeScript test by first interacting with the real application via the Playwright MCP server, then producing a verified test file.

Workflow

1. Get the scenario — If not provided, ask the user to describe the test scenario (URL, steps, expected outcomes)
2. Navigate to the application — Use browser_navigate to load the target page
3. Execute the scenario step by step — Walk through each interaction using MCP tools:
   • browser_click for clicks
   • browser_type for text input
   • browser_select_option for dropdowns
   • browser_snapshot to observe state between steps
4. Capture locators and assertions — Note the actual locators and expected states observed during execution
5. Generate the test — Write a Playwright TypeScript test using @playwright/test based on the real interactions observed:

import { test, expect } from '@playwright/test';