microsoft/playwrightFramework de automatización de navegadores con una única API para Chromium, Firefox y WebKit. Admite pruebas web, scraping, capturas de pantalla e interceptación de red.
Playwright es un framework para automatización y pruebas web. Impulsa Chromium, Firefox y WebKit con una única API — en tus pruebas, en tus scripts y como herramienta para agentes de IA.
Elige la ruta que se adapte a tu flujo de trabajo:
| Mejor para | Instalación | |
|---|---|---|
| Playwright Test | Pruebas de extremo a extremo | npm init playwright@latest |
| Playwright CLI | Agentes de codificación (Claude Code, Copilot) | npm i -g @playwright/cli@latest |
| Playwright MCP | Agentes de IA y automatización impulsada por LLM | npx @playwright/mcp@latest |
| Playwright Library | Scripts de automatización de navegador | npm i playwright |
| Extensión de VS Code | Autoría y depuración de pruebas en VS Code | Instalar desde Marketplace |
Playwright Test es un ejecutor de pruebas con todas las funciones, diseñado para pruebas de extremo a extremo. Ejecuta pruebas en Chromium, Firefox y WebKit con aislamiento completo del navegador, espera automática y aserciones centradas en la web.
npm init playwright@latest
O añádelo manualmente:
npm i -D @playwright/test
npx playwright install
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();
});
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 completo con una sobrecarga casi nula.
Espera automática y aserciones centradas en la web. 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 resilientes que reflejan cómo los usuarios ven 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 otras pruebas:
// Guardar estado después del inicio de sesión
await page.context().storageState({ path: 'auth.json' });
// Reutilizar en otras pruebas
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.
Playwright CLI es una interfaz de línea de comandos para automatización de navegador diseñada para agentes de codificación. Es más eficiente en tokens que MCP — los comandos evitan cargar esquemas de herramientas grandes y árboles de accesibilidad en el contexto del modelo.
npm install -g @playwright/cli@latest
Opcionalmente, instala habilidades para una integración más rica con agentes:
playwright-cli install --skills
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
Usa playwright-cli show para abrir un panel visual con vistas previas de screencast en vivo 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
El servidor Playwright MCP brinda a los agentes de IA control total del navegador a través del Protocolo de Contexto de Modelo. Los agentes interactúan con las páginas mediante instantáneas estructuradas de accesibilidad — sin necesidad de modelos de visión ni capturas de pantalla.
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
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.
Usa playwright como biblioteca para scripts de automatización de navegador — scraping web, generación de PDF, captura de pantallas y cualquier flujo de trabajo que necesite control programático del navegador sin un ejecutor de pruebas.
npm i playwright
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();
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 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 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 de ejecución completa 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.
| Linux | macOS | Windows | |
|---|---|---|---|
| Chromium1 154.0.8037.0 | ✅ | ✅ | ✅ |
| WebKit 26.6 | ✅ | ✅ | ✅ |
| Firefox 155.0 | ✅ | ✅ | ✅ |
Ejecución headless y con interfaz en todas las plataformas. 1 Usa Chrome for Testing de forma predeterminada.