Playwright MCP Explorer

Intelligent Playwright test generation tool using MCP that both autonomously explores websites and generates tests, as well as generates specific scenarios based on the user's verify statements.

MCP-Playwright is a revolutionary automated testing framework that combines the power of Model Context Protocol (MCP) with Playwright to generate comprehensive test suites using natural language descriptions and autonomous website exploration.

-AI-Powered Test Generation: Convert natural language statements into robust Playwright tests
-Autonomous Website Exploration-Automatically discover and test website functionality Natural Language Scenarios
-Write tests using simple verify statements
-Smart Selector Generation-Automatically generates resilient, maintainable selectors
-Cross-Browser Testing-Run tests across Chromium, Firefox, and WebKit

1. Natural Language Test GenerationWrite simple verify statements and let AI generate comprehensive tests:

2. Autonomous Website ExplorationLet the system explore websites and generate tests automatically:

PrerequisitesNode.js 18+ npm or yarn Git

1. Clone the repository
git clone https://github.com/yourusername/mcp-playwright-suite.git
,cd mcp-playwright-suite

3. Install Playwright browsers
npx playwright install --with-deps

1. Edit scenarios in test-data/scenarios.json:

"scenarios": [ { "id": "login-flow", "name": "User Login Flow", "url": "https://myapp.com/login", "verifyStatements": [ "Verify email field exists", "Verify password field exists", "Verify login button is present", "Verify form validation shows error for invalid email" ] } ] }

2. Generate tests:
npm run mcp:generate scenarios

3. Run tests:
npm test tests/generated/login-flow.spec.ts

4. Website Exploration
npm run mcp:generate explore https://github.com "GitHub Homepage Test"

5. Interactive mode for multiple operations
npm run mcp:generate interactive

Smart Natural Language ProcessingThe system understands various types of verify statements:

Presence checks: "is present", "exists", "is visible"
Text content: "contains", "displays", "shows"
State checks: "disabled", "enabled", "checked"
Validation: "shows error", "validation"

Intelligent Selector GenerationAutomatically maps natural language to robust selectors:

"header" → header, h1, h2, h3, h4, h5, h6
"navigation menu" → nav, .nav, .navigation, .menu
"submit button" → button[type="submit"], input[type="submit"]
"email field" → input[type="email"], input[name*="email"]

Test Quality Features
-Resilient Selectors - Prioritizes data-testid, aria-label, and semantic selectors
-Wait Conditions - Automatic handling of dynamic content loading
-Error Handling - Screenshot capture on test failures
-Cross-Browser - Tests run on Chromium, Firefox, and WebKit
-Parallel Execution - Fast test execution with worker processes

MCP Server Configuration ( mcp-config.json)

{ "mcpServers": { "filesystem": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-filesystem", "./tests", "./test-data"] } }, "testGeneration": { "outputDir": "./tests/generated", "defaultTimeout": 30000, "browsers": ["chromium", "firefox", "webkit"] } }

Playwright ConfigurationFully configurable through playwright.config.ts with sensible defaults for:

-Multi-browser testing
-Parallel execution
-HTML reporting
-Screenshot and video capture

npm run mcp:generate scenarios# Generate from scenarios file
npm run mcp:generate explore <url> <name># Explore website and generate
npm run mcp:generate interactive# Interactive mode

npm test# Run all tests
npm run test:headed# Run with visible browser
npm run test:debug# Debug mode
npm run test:ui# Playwright UI mode

Example Generated TestFrom the verify statement "Verify header is present and contains 'Welcome'":

test.describe('Homepage Verification', () => { test.beforeEach(async ({ page }) => { await page.goto('https://example.com'); await page.waitForLoadState('networkidle'); }); test('Verify header is present and contains \'Welcome\'', async ({ page }) => { // Navigate to the target URL

I welcome contributions! Please see our Contributing Guide for details.

- Fork the repository

- Create a feature branch (git checkout -b feature/amazing-feature)

- Commit your changes (git commit -m 'Add amazing feature')

- Push to the branch (git push origin feature/amazing-feature)

- Open a Pull Request

-Playwright- For the excellent browser automation framework
-Model Context Protocol- For enabling AI-powered automation
-TypeScript- For type safety and developer experience

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

An AI agent for the Playwright MCP server, enabling automated web testing and interaction.

Generate Playwright BDD tests, GitHub Actions and Azure Pipelines with business-rule traceability, focused CodeGraph context and persistent Engram memory.

Autonomous QA MCP that tests web and macOS apps like a real engineer and verifies every bug.

A Playwright-based MCP server that exposes a live browser as a traceable, inspectable, debuggable and controllable execution environment for AI agents.

Browser automation via Chrome DevTools Protocol

Drive, inspect, and assert on real Electron desktop apps from an AI agent — agent-native, Playwright-style automation with accessibility refs, stable error codes, and retrying assertions

Playwright MCP for Godot, screenshots, SceneTree manipulation, and arbitrary GDScript execution at runtime through a local UDP bridge.

A lightweight, AI-powered end-to-end testing framework for CI workflows. Requires an OpenAI API key.

Automate web testing and tasks by connecting Claude Desktop with Playwright.

Create and manage end-to-end tests using the Octomind platform.