Debugging de selectores con DevTools en Playwright

Depurar selectores en Playwright se vuelve mucho más simple cuando combinas las DevTools del navegador con el objeto global playwright que se inyecta en la consola. Si ya escribes pruebas end to end y necesitas validar qué selector funciona antes de pegarlo en tu código, esta combinación te ahorra horas de prueba y error.

¿Cómo pausar un test de Playwright para inspeccionarlo?

La pausa es el primer paso para abrir la puerta del modo debug. Dentro de tu archivo assert.spec.ts, agrega la línea await page.pause() en el punto donde quieras detener la ejecución [01:00]. Puedes usarla varias veces y en distintos archivos, según el momento que necesites revisar.

¿Cuándo debo usar page.pause()? Solo en desarrollo local, nunca en producción. Sirve para detener el test y abrir el inspector mientras depuras selectores o flujos.

Después, en la terminal, define la variable de entorno y ejecuta el test:

• PWDEBUG=console activa el modo consola que expone el objeto playwright en el navegador.
• npx playwright test assert.spec.ts corre el archivo y abre el navegador junto al inspector.
• Acomoda las ventanas para ver el navegador, el inspector y las DevTools al mismo tiempo.

Con esto listo, haz clic derecho sobre la página, selecciona inspeccionar y abre la pestaña de consola [02:30].

¿Qué funciones ofrece el objeto playwright en la consola?

El objeto playwright solo está disponible cuando corres el navegador de incógnito que levanta Playwright con PWDEBUG=console activo. Desde la consola tienes acceso a varias funciones útiles para explorar selectores en vivo.

Las opciones que aparecen son $, $$, inspect, locator, resume y selector [03:10]. Cada una resuelve un problema distinto al momento de identificar elementos.

¿Cuál es la diferencia entre $ y $$ en Playwright?

El signo de dólar simple devuelve un único elemento, similar a document.querySelector. El doble dólar devuelve una lista, equivalente a document.querySelectorAll.

• playwright.$('input') te devuelve el primer input con su clase, placeholder e id.
• playwright.$$('a') te devuelve un array con todos los enlaces de la página, por ejemplo siete elementos con etiqueta A.
• Si solo usaras $ sobre a, obtendrías únicamente el primer enlace de esa lista.

¿Qué hace playwright.$$ exactamente? Selecciona todos los elementos que coincidan con el selector y los devuelve como array, igual que querySelectorAll del DOM nativo.

Esta diferencia importa cuando escribes asserts: si esperas varios elementos, necesitas el doble dólar.

¿Cómo encontrar el selector correcto con inspect y selector?

Aquí viene lo interesante. Playwright tiene dos funciones que conectan la consola con la pestaña de elementos para que dejes de adivinar selectores.

¿Cómo usar playwright.inspect para localizar un elemento?

Ejecuta playwright.inspect('input') en la consola y la vista salta automáticamente a la pestaña de elementos con ese nodo seleccionado [05:00]. Desde ahí ves sus estilos, atributos HTML y posición real en el DOM.

Es la forma más rápida de confirmar que un selector apunta al elemento correcto antes de llevarlo a tu test.

¿Cómo generar un selector desde un elemento ya inspeccionado?

Usa el botón con la flecha y el cuadrado en la parte superior izquierda de las DevTools. Al hacer clic se pone azul y puedes seleccionar cualquier elemento de la página, por ejemplo un input o un H4 con el texto Playground.

Luego, en la consola, escribe playwright.selector($0) y Playwright te devuelve el selector recomendado para ese elemento [06:15]. En el ejemplo de la clase, devuelve un selector basado en rol hidden con el nombre escenario.

¿Qué es $0 en las DevTools? Es una referencia al último elemento seleccionado en la pestaña de elementos. Playwright lo lee para sugerirte el selector ideal.

Esta combinación es oro cuando trabajas con componentes complejos donde no sabes si usar getByRole, getByText o un CSS selector tradicional.

¿Por qué conviene apoyarse en las DevTools al escribir tests?

Las DevTools no solo sirven para depurar CSS o JavaScript. En el contexto de Playwright se vuelven tu laboratorio para validar cada selector antes de comprometerte con él en código.

• Reduces el tiempo de prueba y error al escribir asserts.
• Confirmas que un selector apunta a un único elemento o a varios, según lo que necesites.
• Aprendes qué atributos accesibles, roles o textos están disponibles en cada componente.

Si quieres profundizar más en el uso general de DevTools, el curso de Diego de Granda sobre DevTools es la referencia recomendada [00:30].

¿Ya probaste playwright.selector en tu próximo test? Cuéntame en los comentarios qué selector te devolvió y si lo dejaste tal cual o lo ajustaste.