🎭 Playwright

Documentación | Referencia de la API

Playwright es un framework para la automatización y las pruebas web. Controla Chromium, Firefox y WebKit con una sola API — en tus pruebas, en tus scripts y como herramienta para agentes de IA.

Comenzar

Elige la opción que se adapte a tu flujo de trabajo:

Playwright Test

Playwright Test es un ejecutor de pruebas completo diseñado para pruebas de extremo a extremo. Ejecuta pruebas en Chromium, Firefox y WebKit con aislamiento total del navegador, espera automática y aserciones web-first.

Instalación

npm init playwright@latest

O añádelo manualmente:

npm i -D @playwright/test
npx playwright install

Escribir una prueba

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

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

Ejecutar pruebas

npx playwright test

Las pruebas se ejecutan en paralelo en todos los navegadores configurados, en modo headless de forma predeterminada. Cada prueba obtiene un contexto de navegador nuevo: aislamiento total con una sobrecarga casi nula.

Capacidades clave

Espera automática y aserciones web-first. Sin tiempos de espera artificiales. Playwright espera a que los elementos sean accionables, y las aserciones se reintentan automáticamente hasta que se cumplen las condiciones.

Localizadores. Encuentra elementos con localizadores resistentes que reflejan cómo ven los usuarios la página:

page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByPlaceholder('Search...')
page.getByTestId('login-form')

Aislamiento de pruebas. Cada prueba se ejecuta en su propio contexto de navegador: equivalente a un perfil de navegador nuevo. Guarda el estado de autenticación una vez y reutilízalo en todas las pruebas:

// Save state after login
await page.context().storageState({ path: 'auth.json' });

// Reuse in other tests
test.use({ storageState: 'auth.json' });

Trazado. Captura trazas de ejecución, capturas de pantalla y vídeos en caso de fallo. Inspecciona cada acción, instantánea del DOM, solicitud de red y mensaje de consola en el Visor de trazas:

// playwright.config.ts
export default defineConfig({
  use: {
    trace: 'on-first-retry',
  },
});

npx playwright show-trace trace.zip

Paralelismo. Las pruebas se ejecutan en paralelo de forma predeterminada en todos los navegadores configurados.

Documentación completa de pruebas

Playwright CLI

Playwright CLI es una interfaz de línea de comandos para la automatización de navegadores diseñada para agentes de codificación. Es más eficiente en tokens que MCP: los comandos evitan cargar grandes esquemas de herramientas y árboles de accesibilidad en el contexto del modelo.

Instalación

npm install -g @playwright/cli@latest

Opcionalmente, instala skills para una integración más rica con agentes:

playwright-cli install --skills

Uso

Apunta tu agente de codificación a una tarea:

Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Take screenshots for all successful and failing scenarios.

O ejecuta comandos directamente:

playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli screenshot

Supervisión de sesiones

Usa playwright-cli show para abrir un panel visual con vistas previas en vivo de pantalla de todas las sesiones de navegador en ejecución. Haz clic en cualquier sesión para ampliarla y tomar el control remoto.

playwright-cli show

Documentación completa de CLI | GitHub

Playwright MCP

El servidor Playwright MCP brinda a los agentes de IA control total del navegador a través del Model Context Protocol. Los agentes interactúan con las páginas mediante instantáneas estructuradas de accesibilidad: sin modelos de visión ni capturas de pantalla.

Configuración

Añádelo a tu cliente MCP (VS Code, Cursor, Claude Desktop, Windsurf, etc.):

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Instalación con un clic para VS Code:

Para Claude Code:

claude mcp add playwright npx @playwright/mcp@latest

Cómo funciona

Pide a tu asistente de IA que interactúe con cualquier página web:

Navigate to https://demo.playwright.dev/todomvc and add a few todo items.

El agente ve la página como un árbol de accesibilidad estructurado:

- heading "todos" [level=1]
- textbox "What needs to be done?" [ref=e5]
- listitem:
  - checkbox "Toggle Todo" [ref=e10]
  - text: "Buy groceries"

Usa referencias de elementos como e5 y e10 para hacer clic, escribir e interactuar, de forma determinista y sin ambigüedad visual. Las herramientas cubren navegación, relleno de formularios, capturas de pantalla, simulación de red, gestión de almacenamiento y más.

Documentación completa de MCP | GitHub

Playwright Library

Usa playwright como librería para scripts de automatización de navegador: web scraping, generación de PDF, captura de pantallas y cualquier flujo de trabajo que necesite control programático del navegador sin un ejecutor de pruebas.

Instalación

npm i playwright

Ejemplos

Tomar una captura de pantalla:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.screenshot({ path: 'screenshot.png' });
await browser.close();

Generar un PDF:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.pdf({ path: 'page.pdf', format: 'A4' });
await browser.close();

Emular un dispositivo móvil:

import { chromium, devices } from 'playwright';

const browser = await chromium.launch();
const context = await browser.newContext(devices['iPhone 15']);
const page = await context.newPage();
await page.goto('https://playwright.dev/');
await page.screenshot({ path: 'mobile.png' });
await browser.close();

Interceptar solicitudes de red:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.route('**/*.{png,jpg,jpeg}', route => route.abort());
await page.goto('https://playwright.dev/');
await browser.close();

Documentación de la librería | Referencia de la API

Extensión de VS Code

La extensión de Playwright para VS Code lleva la ejecución de pruebas, la depuración y la generación de código directamente a tu editor.

Ejecuta y depura pruebas desde el editor con un solo clic. Establece puntos de interrupción, inspecciona variables y recorre la ejecución de las pruebas con una vista de navegador en vivo.

Genera pruebas con CodeGen. Haz clic en "Record new" para abrir un navegador: navega e interactúa con tu aplicación mientras Playwright escribe el código de la prueba por ti.

Selecciona localizadores. Pasa el cursor sobre cualquier elemento del navegador para ver el mejor localizador disponible y haz clic para copiarlo al portapapeles.

Integración con el Visor de trazas. Activa "Show Trace Viewer" en la barra lateral para obtener una traza completa de ejecución después de cada ejecución de pruebas: instantáneas del DOM, solicitudes de red, registros de consola y capturas de pantalla en cada paso.

Instalar la extensión | Guía de VS Code

Compatibilidad entre navegadores

Ejecución headless y con interfaz gráfica en todas las plataformas. ¹ Usa Chrome for Testing de forma predeterminada.

Otros lenguajes

Playwright también está disponible para Python, .NET y Java.

Recursos

• Documentación
• Referencia de la API
• Servidor MCP
• CLI para agentes de codificación
• Extensión de VS Code
• Guía de contribución
• Registro de cambios
• Discord