端到端测试框架

# 1. Clone o repositório
git clone https://github.com/clinicorp/pw-mcp.git
cd pw-mcp

# 2. Instale as dependências
npm install

# 3. Instale os browsers do Playwright
npx playwright install

# 4. Execute os testes
npm test

pw-mcp/
├── tests/                      # Suite de testes
│   ├── login.test.js           # Testes de autenticação
│   ├── add-to-cart.test.js     # Testes de adicionar ao carrinho
│   ├── remove-from-cart.test.js # Testes de remover do carrinho
│   └── checkout.test.js        # Testes de checkout completo
├── utils/                       # Utilitários e helpers
│   ├── page-objects.js         # Page Object Model
│   └── urls.js                 # Gerenciamento de URLs
├── pages/                       # Snapshots HTML de referência
├── playwright.config.js         # Configuração do Playwright
└── package.json                 # Dependências do projeto

const { test, expect } = require('@playwright/test');

test('login test', async ({ page }) => {
  await page.goto('https://example.com');
  await page.fill('[data-test="username"]', 'user');
  await expect(page.locator('[data-test="welcome"]')).toBeVisible();
});

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

test('login test', async ({ page }) => {
  await page.goto('https://example.com');
  await page.fill('[data-test="username"]', 'user');
  await expect(page.locator('[data-test="welcome"]')).toBeVisible();
});

[sigla do elemento]-[nome da tela ou funcionalidade]-[sigla do módulo]

<button data-testid="btn-schedule-ODO">Agendar</button>

<!-- Primeiro item -->
<button data-testid="btn-edit-ODO-1">Editar</button>

<!-- Segundo item -->
<button data-testid="btn-edit-ODO-2">Editar</button>

<button data-testid="btn-save-PAC">Salvar</button>

<input data-testid="inp-search-PAC" type="text" />

<label data-testid="lbl-title-FIN">Financeiro</label>

<button data-testid="btn-editar-ADM-3">Editar</button>

<select data-testid="sel-status-FOU">
  <option value="active">Ativo</option>
  <option value="inactive">Inativo</option>
</select>

// Método recomendado: getByTestId()
await page.getByTestId('btn-save-PAC').click();
await page.getByTestId('inp-search-PAC').fill('João Silva');

// Alternativa: locator com data-testid
await page.locator('[data-testid="btn-save-PAC"]').click();

// Page Object usando padrão Clinicorp
class PacientePage {
  constructor(page) {
    this.page = page;
    // ✅ Seletores seguindo padrão Clinicorp
    this.searchInput = page.getByTestId('inp-search-PAC');
    this.saveButton = page.getByTestId('btn-save-PAC');
    this.titleLabel = page.getByTestId('lbl-title-PAC');
  }

  async buscarPaciente(nome) {
    await this.searchInput.fill(nome);
  }

  async salvar() {
    await this.saveButton.click();
  }
}

// ❌ RUIM: Seletores baseados em CSS podem quebrar facilmente
await page.click('.btn-primary'); // Quebra se mudar a classe CSS
await page.click('#submit-btn');  // Quebra se mudar o ID
await page.click('div > button'); // Muito genérico, pode selecionar elemento errado

// ✅ BOM: Use o padrão Clinicorp com data-testid
await page.getByTestId('btn-save-PAC').click();

# Executar todos os testes em todos os browsers
npm test

# Executar em browser específico
npm run test:chromium   # Chrome/Edge
npm run test:firefox    # Firefox
npm run test:webkit     # Safari

# Modo interativo (UI Mode) - Recomendado para desenvolvimento
npm run test:ui

# Executar com browser visível
npm run test:headed

# Ver relatório HTML
npm run test:report

# Execução rápida (sem delay)
npm run test:fast

# Execução com delay para visualização (padrão)
npm test

launchOptions: {
  slowMo: 2000, // Ajuste conforme necessário (0 para execução rápida)
}