Assertions y Validaciones en Tests con Visual Studio Code

¿Qué son las assertions y por qué son importantes en los tests?

Las assertions son fundamentales para verificar el comportamiento esperado de una aplicación. Actúan como el componente que certifica que un test produce los resultados deseados. Son declaraciones en el código que aseguran que el resultado final del test coincida con lo esperado, lo cual es crucial para la confiabilidad y funcionalidad en el desarrollo ágil.

En esencia, si una assertion falla, significa que el comportamiento de la aplicación no está alineado con las expectativas definidas, indicando posibles errores o reconsideraciones en el desarrollo.

¿Cómo configurar un test básico utilizando assertions?

Para empezar con un test básico en Visual Studio Code, sigue estos pasos:

1. Crea un nuevo test file: Denomina el archivo assert.spec.ts y toma como base algún código anterior de UI Testing.
2. Define el objetivo del test: En este caso, probamos la funcionalidad del input en la URL uitestingplayground.com/textinput.
3. Escenario del test:
   • Abre la URL y carga la página.
   • Selecciona el input y asegúrate que esté visible.
   • Llena el input con un texto de tu elección.
   • Haz clic en el botón y verifica que el texto del botón haya cambiado.

El código para iniciar esto se vería de la siguiente manera:

test('playing with sessions', async ({ page }) => {
  await page.goto('https://uitestingplayground.com/textinput');
  const input = await page.locator('#newButtonName');
  await expect(input).toBeVisible();
  await input.fill('yout');
  const button = await page.locator('#updatingButton');
  await button.click();
  await expect(button).toContainText('yout');
});

¿Cómo asegurarte de que un elemento esté visible antes de interactuar con él?

Verificar si un elemento es visible antes de interactuar con él es clave para evitar errores en los tests. Utilizando la función expect junto con .toBeVisible(), corroboras la visibilidad del elemento:

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

Esto determina que el test sólo continúa si el elemento #newButtonName, en este caso un input, es visible en la página.

¿Qué pasos seguir para llenar un input y verificar un cambio en el botón?

El siguiente paso consiste en llenar un input y comprobar si un botón refleja este cambio. Para hacerlo:

1. Rellena el input:

   • Usa el localizador del input y refiérete al ID con fill() usando el texto deseado:

   await page.locator('#newButtonName').fill('yout');
   

2. Haz clic y verifica el botón:

   • Localiza el botón por su ID y ejecuta click(). Luego verifica que el texto del botón haya cambiado usando toContainText():

   await page.locator('#updatingButton').click();
   await expect(page.locator('#updatingButton')).toContainText('yout');
   

¿Qué otras opciones de validación existen?

Las assertions ofrecen múltiples posibilidades. Puedes, por ejemplo:

• Verificar si un elemento es visible o no.
• Confirmar que un elemento contiene un cierto texto.
• Utilizar conditions negativas para asegurarte que un estado no se cumple.
• Comparar con snapshots existentes para comprobar que el estado visual o funcional es consistente con versiones anteriores.

Explora la documentación de Playwright para conocer más funciones y ejemplos específicos. Además, si ya tienes experiencia con Jest, algunas características son transferibles, facilitando aún más el uso de assertions en tus test.