[Chore] Setup AI Agents, Skills and Copilot Instructions for Playwright Framework

[charlyautomatiza]

"Actúa como un Principal SDET Architect. Tu misión es estandarizar este repositorio de Playwright + TypeScript utilizando el Playwright CLI y capacidades de MCP para el desarrollo asistido por IA.

🔍 PASO 1: Análisis Dinámico con Playwright CLI (Obligatorio)
Antes de redactar, utiliza las herramientas del sistema para realizar una introspección profunda:

• Configuración: Analiza playwright.config.ts. Identifica proyectos, baseURL y el uso de storageState.
• Exploración de UI (CLI): Usa npx playwright codegen --target typescript (o simula su lógica) para identificar los Locators más estables (priorizando getByRole, getByLabel y data-testid).
• Análisis de Fixtures: Busca en tests/ o src/fixtures/ cómo se extiende el objeto test.
• Dependencias: Revisa el package.json para validar versiones de @playwright/test y plugins adicionales.
  📄 PASO 2: Generación de Documentos (En la raíz del proyecto)
  Crea los siguientes archivos basándote estrictamente en el análisis previo:
• AGENTS.md (Raíz): Define roles que aprovechen el MCP:
  • CLI Automator Agent: Experto en usar npx playwright test --debug y codegen para diagnosticar fallos.
  • Locator Optimizer: Especialista en convertir selectores CSS/XPath frágiles en Locators de Playwright resilientes.
  • CI/CD Engineer: Enfocado en la ejecución en paralelo y gestión de sharding.
• SKILL.md (Raíz): Inventario de capacidades técnicas:
  • Tooling: Uso del Playwright CLI para inspección de trazas (npx playwright show-trace).
  • Assertions: Implementación de Web-first assertions asíncronas.
  • Network: Intercepción de red y mocking con page.route.
• .github/copilot-instructions.md: Reglas de oro para Copilot:
  • Uso de Herramientas: Siempre sugerir el uso de npx playwright comandos para tareas de debugging.
  • Locators Modernos: Prohibido el uso de page.$(...). Forzar el uso de la API de Locators.
  • Estructura de Test: Seguir el patrón de Fixtures detectado para evitar el 'New Page Pattern'.
    📝 PASO 3: Actualización del README.md
    Integra una guía de uso del Playwright CLI específica para este proyecto:
• Instrucciones para abrir el UI Mode (npx playwright test --ui).
• Cómo generar tests rápidos con codegen.
• Sección de MCP Integration para que otros desarrolladores sepan cómo la IA asiste en la creación de localizadores.
  Entregable: Proporciona los bloques Markdown para cada archivo, asegurando que reflejen la estructura de carpetas real que has detectado."

[m13v]

this is a great direction. one thing i've found building AI-assisted Playwright tooling: the Locator Optimizer agent role is the highest ROI one. converting fragile CSS selectors to getByRole/getByLabel improved our test stability way more than anything else. the tricky part is making the AI understand when a data-testid is actually better than a semantic locator, some interactive elements just don't have good ARIA roles. for the CI/CD Engineer role i'd also add trace analysis, having the agent parse npx playwright show-trace output automatically saves hours of debugging flaky tests in CI.

[m13v]

fwiw we open-sourced the locator optimization + test generation approach here: https://github.com/assrt-ai/assrt-freestyle/blob/main/src/core/freestyle.ts - it crawls the app and generates Playwright tests with stable selectors automatically. the agent architecture in https://github.com/assrt-ai/assrt-freestyle/blob/main/src/core/agent.ts handles the agentic execution side.