Nuestro primer test va a ser simple a propósito. La idea no es impresionar a nadie todavía, sino entender la estructura básica de un test en Playwright y ver todo el ciclo completo: escribir, ejecutar, ver el resultado.

¿Qué vamos a validar?

Vamos a navegar a https://www.freerangetesters.com y verificar que el título de la página sea el correcto. Nada más. Es un test de una sola validación, pero tiene todo lo que necesitamos para entender cómo funciona Playwright en la práctica.

La estructura de un test en Playwright

Antes de escribir el código, miremos la estructura general:

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

test("descripción del test", async ({ page }) => {
  // acá va lo que hace el test
});

Tres partes clave:

import { test, expect }: importamos las dos herramientas principales de Playwright. test es la función que define un test, expect es la que nos permite hacer validaciones.

"descripción del test": un texto que describe qué hace este test. Es lo que vas a ver en el reporte cuando corra. Tiene que ser claro y específico: no "test 1", sino algo que le diga a quien lo lee qué está verificando.

async ({ page }) =>: la función que contiene la lógica del test. El async es obligatorio porque las operaciones de Playwright son asíncronas. El { page } es un fixture: Playwright nos inyecta automáticamente una instancia del browser lista para usar.

El test

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

test("la página principal de Free Range Testers tiene el título correcto", async ({ page }) => {
  await page.goto("https://www.freerangetesters.com");
  await expect(page).toHaveTitle("Free Range Testers");
});

Tres líneas de lógica. Vamos una por una:

await page.goto(...): navegamos a la URL. Playwright abre el browser, va a esa dirección y espera a que la página cargue antes de continuar.

await expect(page).toHaveTitle(...): validamos que el título de la página sea exactamente "Free Range Testers". Si coincide, el test pasa. Si no coincide, falla y Playwright nos muestra qué encontró versus qué esperaba.

Correr el test

Desde la terminal, en la carpeta del proyecto:

npx playwright test

Playwright va a buscar todos los archivos que terminen en .spec.ts dentro de la carpeta tests/, ejecutar los tests y mostrar el resultado en la terminal.

Si querés correr solo este test en particular:

npx playwright test --grep "la página principal"

Y para ver el reporte visual:

npx playwright show-report

¿Qué pasa si el test falla?

Probemos cambiando el título esperado a algo incorrecto a propósito:

await expect(page).toHaveTitle("Este título no existe");

Playwright va a mostrar algo así:

Error: expect(page).toHaveTitle(expected)

Expected: "Este título no existe"
Received: "Free Range Testers"

El error es claro: te dice exactamente qué esperabas y qué encontró. Eso es lo que queremos de un buen mensaje de falla: sin ambigüedad, directo al punto.

Una cosa que vale la pena notar

toHaveTitle() no es una comparación instantánea. Tiene auto-waiting incorporado: si la página todavía está cargando cuando llega a esa línea, Playwright va a reintentar la validación hasta que el título esté disponible o hasta que se agote el timeout. No necesitás agregar ninguna espera manual antes de la validación.

Eso es algo que vas a ver repetido en todo Playwright y que marca una diferencia enorme respecto a otras herramientas: el framework espera por vos, inteligentemente, sin que tengas que decirle cuánto tiempo.

Código que hemos usado en el archivo FreeRangeTesters.spec.ts

test("Validar título de la página Free Range Testers", async ({ page }) => {
    await test.step("Estando yo en la web principal www.freerangetesters.com", async () => {
      await page.goto('https://www.freerangetesters.com');
      await expect(page).toHaveTitle('Free Range Testers');
    });
});