PPIA: Playwright Page Inspector with AI

El futuro del testing E2E

El problema que resuelve PPIA

El testing End-to-End es crítico para la calidad del software, pero históricamente ha sido costoso y lento:

Product Owners tienen el conocimiento del negocio pero no saben programar tests
Developers están sobrecargados escribiendo y manteniendo tests manualmente
Gap entre negocio y técnico: Los POs definen historias, los devs las interpretan
Testing insuficiente: Sin recursos, la cobertura es baja

Resultado: Frustración, releases lentos, calidad comprometida.

¿Qué es PPIA?

PPIA (Playwright Page Inspector with AI) es una herramienta que traduce especificaciones en lenguaje natural (Gherkin) en tests Playwright ejecutables, usando Claude MCP y GPT-4 para interpretación semántica y generación de código.

Stack tecnológico

Playwright: Framework E2E testing (multi-browser)
TypeScript: Lenguaje type-safe
Claude MCP: Model Context Protocol para comunicación con IA
OpenAI GPT-4: Motor de interpretación semántica
Gherkin: Lenguaje de especificación BDD
Page Object Model: Patrón de diseño para mantenibilidad

Ejemplo: De Gherkin a Playwright

Input: Especificación (Product Owner)

Feature: Login de usuario

  Scenario: Login exitoso con credenciales válidas
    Given navego a la página de login
    When introduzco "usuario@test.com" en el campo email
    And introduzco "password123" en el campo contraseña
    And hago clic en el botón "Iniciar sesión"
    Then debería ver el mensaje "Bienvenido"
    And debería ser redirigido a "/dashboard"

Output: Test Playwright generado por PPIA

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

test('Login exitoso con credenciales válidas', async ({ page }) => {
  const loginPage = new LoginPage(page);

  await loginPage.navigate();
  await loginPage.fillEmail('usuario@test.com');
  await loginPage.fillPassword('password123');
  await loginPage.clickLoginButton();

  await expect(loginPage.welcomeMessage).toHaveText('Bienvenido');
  await expect(page).toHaveURL(/\/dashboard/);
});

Page Object Model generado automáticamente

export class LoginPage {
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly loginButton: Locator;
  readonly welcomeMessage: Locator;

  constructor(page: Page) {
    this.emailInput = page.locator('[data-testid="email-input"]');
    this.passwordInput = page.locator('[data-testid="password-input"]');
    this.loginButton = page.locator('button:has-text("Iniciar sesión")');
    this.welcomeMessage = page.locator('.welcome-message');
  }

  async navigate() { await this.page.goto('/login'); }
  async fillEmail(email: string) { await this.emailInput.fill(email); }
  async fillPassword(pw: string) { await this.passwordInput.fill(pw); }
  async clickLoginButton() { await this.loginButton.click(); }
}

Estado actual y roadmap

Versión actual: v1.5 (TypeScript)

✅ Interpretación Gherkin → Playwright
✅ Generación automática de POMs
✅ Integración Claude MCP + GPT-4
✅ Soporte multi-browser

En progreso

🚧 Migración a Python (Q1 2026): Mejor ecosistema para IA/ML, memoria conversacional nativa con LangChain, análisis iterativo.

🚧 GHERKIN PPIA: Generador inverso — Input: URL de aplicación → Output: Especificaciones Gherkin automáticas.

Cómo empezar con PPIA

Nota: PPIA está actualmente en desarrollo activo. Una versión open-source está planeada para Q2 2026.

Mientras tanto, POM-PPIA (el generador de Page Object Models) ya está disponible:

🔗 POM-PPIA: https://github.com/joseguillermomoreu-gif/pom-ppia

Conclusión

PPIA no es solo una herramienta. Es un cambio de paradigma en cómo pensamos el testing.

El futuro del testing E2E no es más developers escribiendo más tests. Es IA generando tests a partir de especificaciones de negocio, validados por humanos y ejecutados automáticamente.

Ese futuro ya llegó. Se llama PPIA. 🚀

POM PPIA: https://github.com/joseguillermomoreu-gif/pom-ppia
Playwright Docs: https://playwright.dev
Gherkin Reference: https://cucumber.io/docs/gherkin/reference/