Overview

This skill guides you through producing a Playwright test from a provided scenario using the Playwright MCP workflow. It enforces completing all prescribed steps before emitting a TypeScript test, saves the file in the tests directory, and runs it with iteration until it passes.

How This Skill Works

Provide a scenario, then execute the MCP steps one by one. Only after all steps are completed does the system emit a Playwright TypeScript test that uses @playwright/test. The test file is saved in the tests directory and run; you iterate until the test passes.

When to Use It

• Need a reproducible regression test for a specific user journey described in natural language.
• When you want a test that mirrors a scenario from a product spec or user story.
• When you must follow the prescribed MCP steps in order before coding.
• When you want the generated test to be stored in the standard Playwright tests directory.
• When you require iterative execution until the test passes and matches the scenario.

Quick Start

1. Step 1: Provide a scenario to the skill.
2. Step 2: Execute the MCP-guided steps to generate the test file in the tests directory.
3. Step 3: Run npx playwright test and iterate until all steps pass.

Best Practices

• Provide a clear, testable scenario with concrete steps.
• Follow the MCP steps exactly and in order.
• Save the generated TypeScript test in the tests directory.
• Run the test locally and iterate until it passes, updating the scenario if needed.
• Name the test descriptively to reflect scenario coverage.

Example Use Cases

• End-to-end login with correct credentials and session persistence
• Product search, add to cart, then complete checkout
• Multi-step onboarding wizard with input validations
• Form submission with client-side and server-side validations
• Responsive layout checks across desktop and mobile

Frequently Asked Questions