Playwright MCP Explorer

WIP # - Em construção atualmente

Playwright_MCP_Explorer

Ferramenta inteligente de geração de testes Playwright usando MCP que explora sites de forma autônoma e gera testes, além de criar cenários específicos com base nas declarações de verificação do usuário.

MCP-Playwright é um framework revolucionário de testes automatizados que combina o poder do Model Context Protocol (MCP) com Playwright para gerar suítes de testes abrangentes usando descrições em linguagem natural e exploração autônoma de sites.

Principais Recursos

-Geração de Testes com IA: Converta declarações em linguagem natural em testes Playwright robustos
-Exploração Autônoma de Sites: Descubra e teste automaticamente a funcionalidade do site Cenários em Linguagem Natural
-Escreva testes usando declarações de verificação simples
-Geração Inteligente de Seletores: Gera automaticamente seletores resilientes e de fácil manutenção
-Testes entre Navegadores: Execute testes em Chromium, Firefox e WebKit

1. Geração de Testes em Linguagem Natural Escreva declarações de verificação simples e deixe a IA gerar testes abrangentes:

2. Exploração Autônoma de Sites Deixe o sistema explorar sites e gerar testes automaticamente:

Pré-requisitos Node.js 18+ npm ou yarn Git

Instalação

1. Clone o repositório
git clone https://github.com/yourusername/mcp-playwright-suite.git
,cd mcp-playwright-suite

2. Install dependencies
npm install

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

4. Build the project
npm run build

Usage Examples

Natural Language Test Generation

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. Gere testes:
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

AI-Powered Features

Smart Natural Language Processing The 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 Generation Automatically 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 Configuration Fully configurable through playwright.config.ts with sensible defaults for:

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

Available Commands

Test Generation

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

Test Execution

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 Test From 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

Contribuindo

Aceitamos contribuições! Consulte nosso Guia de Contribuição para mais detalhes.

1. Faça um fork do repositório
   
2. Crie um branch de funcionalidade (git checkout -b feature/amazing-feature)
   
3. Faça commit das suas alterações (git commit -m 'Add amazing feature')
   
4. Envie para o branch (git push origin feature/amazing-feature)
   
5. Abra um Pull Request
   

Agradecimentos

-Playwright - Pelo excelente framework de automação de navegadores
-Model Context Protocol - Por possibilitar automação com IA
-TypeScript - Pela segurança de tipos e experiência do desenvolvedor