Escribiendo una prueba de camino feliz

En lugar de una competencia por ver quién piensa o escribe más casos de prueba, lo importante es pensar con cuidado e implementar primero el caso de prueba más importante, el esencial, ese que, si no pasa, no satisface las necesidades primarias de las personas que usan el software.

En la aplicación TAT CSC, ese caso de prueba es el camino feliz: la persona usuaria completa todos los campos obligatorios con datos válidos, envía el formulario y ve el mensaje de éxito.

Vamos a implementarlo.

Resumen de comandos 📖

Abajo tienes algunas API de Playwright que pueden serte útiles durante los ejercicios.

import { test, expect } from '@playwright/test'

Todo archivo de pruebas comienza importando la función test de Playwright (usada para declarar casos de prueba y hooks) y expect (usada para escribir aserciones) desde el ejecutor de pruebas.

Sintaxis:

import { test, expect } from '@playwright/test'

test.describe

Agrupa casos de prueba relacionados bajo un título compartido, lo que mantiene la suite organizada y hace más fácil de leer el reporte.

Sintaxis:

test.describe(title, () => { /* tests */ })

Ejemplo:

test.describe('TAT CSC form', () => {
  // aquí van los hooks y las pruebas
})

test.beforeEach

Registra un hook que se ejecuta antes de cada prueba dentro de su alcance. Es ideal para los pasos de preparación que comparten todas las pruebas, como navegar a la página bajo prueba.

Sintaxis:

test.beforeEach(async ({ page }) => { /* ... */ })

Ejemplo:

test.beforeEach(async ({ page }) => {
  await page.goto('/index.html')
})

test

Declara un único caso de prueba. Recibe un título y un callback asíncrono, y Playwright inyecta sus fixtures (como page) como argumento del callback.

Sintaxis:

test(title, async ({ page }) => { /* ... */ })

Ejemplo:

test('successfully submits the form', async ({ page }) => {
  // aquí van el arrange, el act y el assert
})

page.goto

Navega la página a una URL y espera a que cargue.

Sintaxis:

await page.goto(url)

Ejemplo:

// Con baseURL configurada, alcanza con una ruta relativa
await page.goto('/index.html')

page.getByLabel

Localiza un control de formulario por el texto de su <label> asociada. Es una forma accesible y orientada a la persona usuaria de encontrar campos.

Sintaxis:

page.getByLabel(text)

Ejemplo:

await page.getByLabel('First name')

.fill

Limpia un campo de entrada o un área de texto y escribe en él el valor indicado.

Sintaxis:

await locator.fill(value)

Ejemplo:

await page.getByLabel('Email').fill('john.doe@example.com')

page.getByRole

Localiza un elemento por su rol ARIA y su nombre accesible. Excelente para los botones.

Sintaxis:

page.getByRole(role, { name })

Ejemplo:

await page.getByRole('button', { name: 'Send' })

.click

Simula que una persona usuaria hace clic en un elemento.

Sintaxis:

await locator.click()

Ejemplo:

await page.getByRole('button', { name: 'Send' }).click()

expect (aserciones web-first)

Crea una aserción que espera y reintenta automáticamente hasta que pasa o se agota el tiempo.

Sintaxis:

await expect(locator).toBeVisible()
await expect(locator).toHaveText(text)

Ejemplo:

// Afirma que el elemento es visible
await expect(page.locator('.success')).toBeVisible()

// Afirma el texto exacto renderizado dentro del elemento
await expect(page.locator('.success')).toHaveText('Message successfully sent.')

Contenido sugerido 📚 y enlaces a la documentación 🔗

• Writing tests
• Locators
• Actions
• Assertions

Ejercicio 🎯

Crea un archivo de pruebas (por ejemplo, tests/tat-csc.spec.ts). Envuelve tus pruebas en un bloque test.describe (por ejemplo, titulado TAT CSC form) y usa un hook test.beforeEach para navegar a la aplicación antes de cada prueba. Luego, dentro de un test, completa los cuatro campos obligatorios (First name, Last name, Email y "How can we help you?") con datos válidos, haz clic en el botón Send y afirma que el mensaje de éxito con el texto "Message successfully sent." se vuelve visible.

🙊 Recuerda importar test y expect desde @playwright/test, y que el mensaje de éxito se renderiza dentro de un span con la clase success, y que desaparece después de unos segundos, así que haz la aserción sobre su visibilidad justo después de enviar.

Ejecuta la prueba con npx playwright test para asegurarte de que tu implementación funciona.

Muéstrale al mundo lo que aprendiste 🌎

Para mostrarle a tu red profesional lo que aprendiste en esta lección, publica lo siguiente en LinkedIn.

Estoy haciendo el curso "Básico de Testing Web con Playwright" con @Walmyr Lima e Silva Filho en la @Talking About Testing School, y acabo de implementar mi primera prueba de extremo a extremo, que garantiza que la funcionalidad principal de la aplicación funciona: completar un formulario y enviarlo con éxito. Aprendí a usar los localizadores, las acciones y las aserciones web-first de Playwright. #TalkingAboutTesting #TATSchool #BasicsOfWebTestingWithPlaywright #Playwright #TestAutomation

👨‍🏫 No olvides mencionarme en tu publicación. Aquí está mi perfil de LinkedIn.