Playwright Wizard MCP Server E2E Test Generator

Overview

Playwright Wizard MCP Server is a lightweight Model Context Protocol (MCP) server that guides developers through a step-by-step wizard to generate Playwright end-to-end (E2E) tests. It combines an interactive workflow with best-practice test patterns so you can produce reliable, maintainable Playwright test files without hand-crafting every assertion and selector.

This tool is useful when you need to quickly bootstrap E2E coverage for web applications, convert manual test plans into automated scripts, or standardize test patterns across a team. By integrating an MCP server approach, the wizard keeps the generation process contextual and incremental — you provide high-level goals and the server returns focused test code, suggestions for selectors, and recommended fixtures.

Repository: https://github.com/oguzc/playwright-wizard-mcp

Features

• Step-by-step wizard that converts user intent into Playwright E2E tests
• Generates test files following Playwright best practices (fixtures, page.locator, assertions)
• Configurable server for local or CI usage
• Example templates and sample tests to get started quickly
• Exportable test code that can be saved into your repository or copied to clipboard
• Integrates with typical developer tooling (Prettier, ESLint) through local configuration

Installation / Configuration

Prerequisites:

• Node.js (>= 16)
• npm or yarn
• (Optional) OpenAI or other LLM API key if the project uses a model provider

Quick start:

1. Clone the repository

git clone https://github.com/oguzc/playwright-wizard-mcp.git
cd playwright-wizard-mcp

2. Install dependencies

# with npm
npm install

# or with yarn
yarn install

3. Create environment file

cp .env.example .env
# Edit .env and add any required keys, for example:
# OPENAI_API_KEY=sk-...
# PORT=4000

4. Run the development server

# development mode with hot reload (if configured)
npm run dev

# or production mode
npm start

Docker (example)

# Build and run via Docker (if Dockerfile is provided)
docker build -t playwright-wizard-mcp .
docker run -p 4000:4000 --env-file .env playwright-wizard-mcp

Common npm scripts (check package.json in repo)

Available Resources

• Source code and issues: https://github.com/oguzc/playwright-wizard-mcp
• Example test templates: look in the repo’s examples/ or templates/ directory
• .env.example: template for required environment variables
• Prettier / ESLint configs: used for consistent code generation (check .prettierrc, .eslintrc)

If the project exposes MCP endpoints, you will typically interact with the server via REST or WebSocket to start a wizard session, provide context (URL, authentication, scenario), and receive generated test code. Check the repository README or OpenAPI spec (if present) for exact routes.

How it works (high level)

1. Provide the target URL and a short description of the scenario you want tested (e.g., “user login with 2FA”).
2. The MCP wizard asks clarifying questions (which elements to target, credentials, expected outcomes).
3. After collecting context, the server generates a Playwright test file following recommended patterns:
   • use test.describe and fixtures
   • prefer page.locator over page.$
   • avoid flaky waits (use locator.waitFor / expect with toBeVisible)
4. You review, refine via the wizard, then export the final test into your codebase.

Use Cases

• Add E2E coverage for a new feature quickly

  • Provide the feature URL and acceptance criteria. The wizard creates a test that navigates, interacts with form elements, and asserts expected states.

• Convert manual QA steps to Playwright tests

  • Feed step-by-step manual test cases and let the wizard produce structured Playwright tests with clear assertions.

• Create smoke tests for CI pipelines

  • Generate compact, reliable smoke tests (login + main page load) with minimal flakiness to run in CI on every push.

• Onboard new team members

  • Use generated examples to demonstrate best practices, fixture usage, and patterns for selectors and waits.

Example: generate a login test

POST /wizard/start
{
  "url": "https://example.com/login",
  "scenario": "Successful login and redirect to dashboard",
  "notes": "Use test user; avoid hard-coded timeouts"
}

Response: a Playwright test file (TypeScript) with test.describe, a fixture for authentication, and assertions that dashboard elements are visible.

Best Practices for Generated Tests

• Keep tests deterministic: avoid sleeps and use explicit waiting via expect or locator.waitFor.
• Scope selectors: prefer data-test-id or role selectors when available.
• Use fixtures for common setup (auth, API mocks).
• Keep tests focused: one primary assertion per logical test.

Getting Help / Contributing

• Report issues and request features via the GitHub repository issues page.
• Read example files in the repo to learn how generated tests are structured.
• Contribute templates, model prompts, or integrations by forking the repo and opening a pull request.

This document should help you get started with the Playwright Wizard MCP Server for generating robust Playwright E2E tests. For exact API endpoints, request/response formats, and advanced configuration options, consult the repository files and the project README at https://github.com/oguzc/playwright-wizard-mcp.