Primeros pasos con Playwright CLI: instalación, Skills, sesiones y comandos esenciales

Sun, 12 Apr 2026 14:36:58 +0800

Si has usado Claude Code, GitHub Copilot u otros agentes de programación para automatización de navegador, microsoft/playwright-cli es una herramienta que vale la pena observar. No es el ayudante de navegador tradicional pensado principalmente para humanos escribiendo comandos a mano. Es una CLI de Playwright diseñada para agentes de programación, con énfasis en menor sobrecarga de tokens, una interfaz de comandos más ligera e integración con flujos basados en Skills.

Según el README oficial, la idea central de Playwright CLI es clara: frente a MCP, que puede empujar grandes esquemas de herramientas y estructura de página al contexto del modelo, el enfoque CLI es más compacto y encaja mejor con flujos de agentes que alternan constantemente entre codebases grandes, pruebas y automatización de navegador.

01 Qué es Playwright CLI

playwright-cli es una herramienta open source de línea de comandos para Playwright creada por Microsoft. La descripción oficial es “CLI for common Playwright actions”. Se usa principalmente para tareas como:

Abrir páginas y controlar el navegador
Grabar y generar código Playwright
Capturar snapshots de página para obtener referencias de elementos
Tomar capturas de pantalla y exportar PDFs
Trabajar con agentes de programación para automatización de pruebas e interacción web

El README actual de GitHub es muy explícito sobre su posicionamiento: si usas agentes de programación, la CLI suele encajar mejor que Playwright MCP; si necesitas estado persistente, introspección más rica y bucles agentic de larga duración, MCP sigue teniendo su lugar.

En otras palabras, Playwright CLI se siente más como una interfaz de automatización de navegador construida para asistentes AI de programación, no solo como una herramienta para que ingenieros hagan clic manualmente.

02 Dónde destaca

1. Encaja mejor con flujos de agentes

El README oficial enumera Token-efficient como una característica clave. No obliga a meter todos los datos de la página en el contexto del LLM. En su lugar, permite que el agente opere el navegador mediante comandos más cortos y enfocados.

Esto importa mucho para agentes de programación. En proyectos reales, un agente no solo controla el navegador. También tiene que leer código, editar archivos, ejecutar pruebas e inspeccionar logs. Si la interfaz del navegador consume demasiado contexto, todo el flujo se vuelve menos eficiente.

2. Funciona bien con Skills

El README destaca específicamente playwright-cli install --skills. Eso muestra que Microsoft no lo trata solo como otra utilidad de shell, sino como algo que Claude Code, GitHub Copilot y agentes similares pueden consumir directamente mediante un flujo basado en Skills.

Si tu configuración ya depende de Skills, Playwright CLI debería encajar de forma natural.

3. La gestión de sesiones es bastante completa

Playwright CLI soporta sesiones. De forma predeterminada, el perfil del navegador permanece en memoria, así que cookies y storage state se conservan entre varias llamadas CLI dentro de la misma sesión. Si añades --persistent, el perfil puede guardarse en disco y reutilizarse tras reiniciar el navegador.

Esto lo vuelve mucho más práctico que herramientas que abren un navegador para un solo comando y luego descartan todo. También encaja mejor con ciclos largos de depuración y flujos de agentes más extensos.

4. Incluye un panel visual de monitoreo

El README ofrece playwright-cli show, que abre un panel para observar y controlar todas las sesiones de navegador en ejecución. Esto es especialmente útil cuando un agente ejecuta automatización en segundo plano, porque puedes intervenir, inspeccionar el progreso y ayudar a depurar en lugar de trabajar a ciegas.

03 Instalación y requisitos

Según el README actual de GitHub, los requisitos básicos de Playwright CLI son:

Node.js 18 o más reciente
Claude Code, GitHub Copilot u otro agente de programación

Los comandos de instalación son:

1
2

npm install -g @playwright/cli@latest
playwright-cli --help

Hay un error fácil que conviene destacar:

El paquete recomendado oficialmente ahora es @playwright/cli
No lo confundas con el antiguo paquete npm deprecado playwright-cli

Así que el paquete correcto es el scoped package, no el paquete histórico antiguo.

04 Cómo empezar a usarlo

1. Instalar skills

Si quieres que un agente de programación use Playwright CLI directamente, la recomendación oficial es instalar primero las skills:

`1`	`playwright-cli install --skills`

El README dice explícitamente que Claude Code, GitHub Copilot y herramientas similares usarán las skills instaladas localmente.

2. Dejar que el agente llame directamente a la CLI

Si no quieres manejar Skills primero, también puedes pedir al agente que lea la ayuda de la CLI directamente:

1
2

Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Check playwright-cli --help for available commands.

El README llama a esto “Skills-less operation”. La idea es que incluso sin skills preinstaladas, la CLI puede describirse lo bastante bien para que un agente la use.

3. Probar manualmente un flujo mínimo

El README incluye un ejemplo con TodoMVC que funciona muy bien como primera demostración práctica:

playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli type "Water flowers"
playwright-cli press Enter
playwright-cli check e21
playwright-cli check e35
playwright-cli screenshot

Esta secuencia es útil porque muestra rápidamente cómo trabaja Playwright CLI:

open abre la página
type y press gestionan entrada de texto
check usa una referencia de elemento para alternar checkboxes
screenshot guarda el resultado

05 `--headed`, sesiones y panel de monitoreo

`--headed`

Playwright CLI es headless por defecto. Si quieres ver directamente la ventana del navegador, debes pasar --headed al usar open:

`1`	`playwright-cli open https://playwright.dev --headed`

Esto es especialmente útil al depurar selectores, flujos de login o cualquier interacción que sea más fácil inspeccionar visualmente.

sesiones

El README oficial da mucha importancia a las sesiones. Puedes usar distintas sesiones para aislar diferentes proyectos o sitios:

1
2
3

playwright-cli open https://playwright.dev
playwright-cli -s=example open https://example.com --persistent
playwright-cli list

Si dejas que un agente trabaje durante más tiempo, también puedes pasar la sesión mediante una variable de entorno:

`1`	`PLAYWRIGHT_CLI_SESSION=todo-app claude .`

Comandos útiles de gestión de sesiones:

1
2
3

playwright-cli list
playwright-cli close-all
playwright-cli kill-all

En la práctica:

list muestra todas las sesiones
close-all cierra todos los navegadores de forma ordenada
kill-all termina forzosamente todos los procesos de navegador

Panel de monitoreo

Si quieres ver qué está haciendo realmente el agente en el navegador, puedes ejecutar:

`1`	`playwright-cli show`

Según el README, este panel tiene dos vistas principales:

Session grid: muestra sesiones activas por workspace, con vista previa en vivo, URL y título de página
Session detail: muestra una vista en vivo de una sesión seleccionada y permite tomar control del ratón y teclado

Eso significa que Playwright CLI no solo es usable desde la línea de comandos. También tiene una capa de observabilidad bastante madura.

06 Qué comandos conviene memorizar primero

Si es tu primera vez con Playwright CLI, no necesitas memorizar todos los comandos. Estos son los principales:

Páginas e interacción

playwright-cli open [url]
playwright-cli goto <url>
playwright-cli click <ref>
playwright-cli fill <ref> <text>
playwright-cli type <text>
playwright-cli hover <ref>
playwright-cli press <key>

Obtener estructura de página

playwright-cli snapshot
playwright-cli snapshot <ref>
playwright-cli snapshot --depth=N
playwright-cli eval <func> [ref]

snapshot es especialmente importante porque muchas operaciones posteriores dependen de referencias de elementos almacenadas como ref. En la práctica, normalmente capturas un snapshot primero y luego usas los identificadores devueltos para hacer clic, rellenar, marcar o tomar capturas.

Guardar salida

1
2

playwright-cli screenshot
playwright-cli pdf

Pestañas

playwright-cli tab-list
playwright-cli tab-new [url]
playwright-cli tab-close [index]
playwright-cli tab-select <index>

07 Quién debería probarlo

Playwright CLI merece probarse especialmente en estos escenarios:

Usas Claude Code, Copilot u otro agente de programación para pruebas E2E
Quieres una interfaz de automatización de navegador más ligera sin empujar grandes estructuras de página al contexto del modelo
Quieres que una sesión de navegador persista entre múltiples comandos
Quieres monitorear tareas web impulsadas por agentes mediante un panel mientras se ejecutan

Si tu pregunta principal es cómo hacer que la automatización de navegador funcione de forma eficiente con agentes de programación, Playwright CLI probablemente se sentirá más natural que los flujos tradicionales de depuración manual.

Testing on KnightLi Blog

Primeros pasos con Playwright CLI: instalación, Skills, sesiones y comandos esenciales

01 Qué es Playwright CLI

02 Dónde destaca

1. Encaja mejor con flujos de agentes

2. Funciona bien con Skills

3. La gestión de sesiones es bastante completa

4. Incluye un panel visual de monitoreo

03 Instalación y requisitos

04 Cómo empezar a usarlo

1. Instalar skills

2. Dejar que el agente llame directamente a la CLI

3. Probar manualmente un flujo mínimo

05 `--headed`, sesiones y panel de monitoreo

`--headed`

sesiones

Panel de monitoreo

06 Qué comandos conviene memorizar primero

Páginas e interacción

Obtener estructura de página

Guardar salida

Pestañas

07 Quién debería probarlo

Referencias

Testing on KnightLi Blog

Primeros pasos con Playwright CLI: instalación, Skills, sesiones y comandos esenciales

01 Qué es Playwright CLI

02 Dónde destaca

1. Encaja mejor con flujos de agentes

2. Funciona bien con Skills

3. La gestión de sesiones es bastante completa

4. Incluye un panel visual de monitoreo

03 Instalación y requisitos

04 Cómo empezar a usarlo

1. Instalar skills

2. Dejar que el agente llame directamente a la CLI

3. Probar manualmente un flujo mínimo

05 --headed, sesiones y panel de monitoreo

--headed

sesiones

Panel de monitoreo

06 Qué comandos conviene memorizar primero

Páginas e interacción

Obtener estructura de página

Guardar salida

Pestañas

07 Quién debería probarlo

Referencias

05 `--headed`, sesiones y panel de monitoreo

`--headed`