Assertions en Playwright con expect

Las pruebas automatizadas pierden valor si no verifican comportamiento. Aquí aprenderás cómo escribir assertions en Playwright usando expect, la pieza clave para confirmar que tu aplicación responde como esperas, ideal para QA automatizadores que arrancan con testing E2E.

Un assertion es una afirmación dentro de tu test: le pides a Playwright que confirme que cierto resultado ocurrió. Sin esa verificación, tu script solo ejecuta acciones, pero nunca te dice si la app falló o pasó.

¿Qué es un assertion en Playwright y por qué importa?

Un assertion es la línea que convierte un script de automatización en una prueba real. Sin ella, tu test puede llenar formularios, hacer clics y navegar, pero no sabrá si el resultado fue correcto.

¿Qué hace expect en Playwright? Recibe un locator y verifica una condición sobre ese elemento, como visibilidad, texto o estado. Si la condición falla, el test falla.

La palabra clave expect se importa desde @playwright/test y es la base de toda verificación. Mucho de su comportamiento viene heredado de Jest, así que si ya trabajaste con esa librería, el salto es natural.

¿Cómo escribir tu primer assertion paso a paso?

El ejemplo de la clase usa la página uitestingplayground.com/textinput. El escenario es simple: escribir texto en un input, hacer clic en un botón y validar que el botón actualizó su texto.

El flujo lógico que sigue el test es este:

1. Abrir la URL del text input.
2. Verificar que el input es visible.
3. Seleccionar el input y llenarlo con un texto.
4. Hacer clic en el botón.
5. Verificar que el texto del botón cambió al texto ingresado.

Cada paso usa un locator para identificar elementos y un assertion para confirmar el resultado esperado [01:55].

¿Cómo verificar que un elemento es visible con toBeVisible?

El primer assertion del ejercicio confirma que el input está disponible antes de interactuar con él. La sintaxis usa el ID del elemento, precedido por numeral:

ts await expect(page.locator('#newButtonName')).toBeVisible();

Esto le dice a Playwright: antes de seguir, asegúrate de que este elemento existe en pantalla. Si no aparece, el test corta ahí [03:30].

¿Cómo validar texto dentro de un elemento con toContainText?

Después de escribir en el input con .fill('Jud') y hacer clic en el botón con ID updatingButton, viene el assertion más importante del flujo:

ts await expect(page.locator('#updatingButton')).toContainText('Jud');

Aquí confirmas que el botón realmente actualizó su contenido al texto que escribiste. Y aquí viene lo interesante: si quieres verlo correr en el navegador, descomenta la opción de slow motion en la configuración de Playwright y corre el test en modo headed.

¿Cuál es la diferencia entre toBeVisible y toContainText? toBeVisible valida que el elemento se renderice en pantalla. toContainText valida que el contenido textual del elemento incluya cierto string.

¿Qué otros tipos de assertions ofrece Playwright?

La documentación oficial en playwright.dev/docs/test-assertions lista decenas de validaciones adicionales. Las más útiles para empezar son:

• Verificar valores de inputs con toHaveValue.
• Comprobar que un elemento está oculto con toBeHidden.
• Negar condiciones con .not, por ejemplo expect(...).not.toBeVisible().
• Comparar contra snapshots previos del sitio.

Esa última opción es poderosa para visual regression testing: tomas una foto de referencia y verificas que la UI no cambió de forma inesperada.

¿Cómo correr el test desde la terminal?

El comando para ejecutar el archivo creado durante la clase, llamado assert.spec.ts, es directo:

bash npx playwright test assert

Playwright corre el test por defecto en Chromium y reporta si pasó o falló. Para ver el navegador en acción, agrega el modo headed y activa slow motion en el archivo de configuración para que cada paso se ejecute con un retraso visible [07:40].

Un detalle de estilo que vale la pena copiar: mantén consistencia en las comillas. Si arrancas con comillas simples, no mezcles dobles a la mitad. Pequeñas decisiones como esta hacen que tu suite sea más legible cuando crece.

Con expect, toBeVisible y toContainText ya tienes lo necesario para escribir un test E2E completo. ¿Qué assertion piensas usar primero en tu próximo test? Cuéntame en los comentarios.