¿Cómo realizar pruebas en una tienda online con Playwright?
Las pruebas automatizadas son fundamentales en el desarrollo y mantenimiento de aplicaciones web, y Playwright es una herramienta poderosa para este fin. En esta guía, aprenderás a crear un caso de uso utilizando una tienda online para simular el proceso de añadir un producto al carrito y continuar comprando. Este ejercicio no solo pondrá a prueba tus habilidades en Playwright, sino que también te dará la oportunidad de mejorar tus conocimientos sobre testing automatizado.
¿Cuál es el objetivo del reto propuesto?
El reto consiste en crear un test que imite el flujo de un usuario en una tienda online. La tarea es seleccionar un producto, añadirlo al carrito, y luego continuar comprando, verificando siempre que el flujo se realiza correctamente.
- Navegar por la tienda virtual: Desliza para ver los productos disponibles y selecciona el primero que encuentres.
- Añadir al carrito: En la página de detalles del producto, añade tres unidades al carrito y elige el tamaño del producto deseado.
- Verificación del carrito: Asegúrate de que el producto ha sido añadido exitosamente al carrito mostrando un mensaje de confirmación.
- Continuar comprando: Haz clic en "Continue Shopping" para seguir explorando productos y verifica que el modal emergente desaparezca.
¿Cómo escribir el test con Playwright?
Para este reto, comienza creando un archivo llamado tiendaonline.spec.ts
y sigue los pasos descritos. Aquí tienes una guía paso a paso:
import { test, expect } from '@playwright/test';
test('Añadir producto al carrito', async ({ page }) => {
await page.goto('http://automationpractice.com/index.php');
await page.hover('#homefeatured li:nth-child(1)');
await page.click('#homefeatured li:nth-child(1) a[title="View"]');
await expect(page).toHaveURL(/index.php\?id_product=1/);
await page.click('.product_quantity_up');
await page.click('.product_quantity_up');
await page.selectOption('#group_1', '2');
await page.click('button[name="Submit"]');
await expect(page.locator('#layer_cart')).toBeVisible();
await expect(page.locator('#layer_cart')).toContainText('Product successfully added to your shopping cart');
await page.click('.button-container span span[title="Continue shopping"]');
await expect(page.locator('#layer_cart')).not.toBeVisible();
});
¿Qué hacer si los tests presentan problemas?
Si al ejecutar el test notas errores o tiempos de espera prolongados, considera realizar las siguientes acciones:
- Optimización del tiempo: Si el test falla por tiempos de espera, retira el modo
slow-mo
para que las acciones se ejecuten a velocidad normal.
- Depuración: Revisa cada selector cuidadosamente en el modo de inspección del navegador para asegurarte de que estás apuntando al elemento correcto.
- Corrige identificadores de selectores: Utiliza IDs o clases únicas para evitar ambigüedades y problemas de selectores múltiples.
¿Cuáles son los beneficios de emplear pruebas automatizadas con Playwright?
Las pruebas automatizadas con Playwright no solo aumentan la eficiencia al evitar pruebas manuales repetitivas, sino que también mejoran la calidad de las aplicaciones mediante pruebas más exhaustivas. Con la capacidad de simular interacciones humanas precisas, Playwright permite a los desarrolladores detectar y corregir bugs en etapas tempranas del desarrollo.
¡Continúa mejorando y experimentando con más casos de uso! Cuantas más pruebas automatices, más seguro y libre de errores será tu software.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?