Escribir tests contra un sitio de producción real parece el enfoque obvio para practicar hasta que aparece un CAPTCHA, una clase CSS se renombra en un deploy que no sabías que estaba pasando, y terminas dos horas depurando un selector roto en vez de aprender la técnica. Los sitios de práctica construidos para automatización tienen atributos data-testid estables, estado predecible y escenarios diseñados para cubrir lo que los entrevistadores realmente preguntan. Este artículo describe qué hay en lab.becomeqa.com, cómo los escenarios se corresponden con técnicas específicas de automatización, y qué otros sitios de práctica cubren lo que el lab no incluye.
Por qué no podés practicar en sitios aleatorios
El enfoque obvio es abrir algún sitio web y escribir tests contra él. Funciona hasta que deja de funcionar.
Los sitios reales cambian sin avisar. El formulario de login recibe un nuevo CAPTCHA. Los IDs de los elementos cambian. Una clase CSS en la que confiabas se renombra en un deploy que nunca supiste que pasó. La suite de tests se rompe de forma aleatoria, y la depuración lleva más tiempo que escribir los tests.
Los sitios de práctica construidos para testing son diferentes. Tienen selectores estables, estado predecible y funcionalidades diseñadas específicamente para cubrir escenarios de automatización. Puedes resetear datos, crear usuarios, romper cosas y experimentar sin consecuencias.
Qué hace bueno a un sitio de práctica
Un entorno de práctica útil tiene:
- Autenticación: flujos de login/logout, rutas protegidas, manejo de credenciales inválidas
- Tablas de datos: ordenamiento, filtrado, paginación, selección de filas
- Formularios: errores de validación, campos requeridos, dropdowns, selectores de fecha
- Modales: comportamiento de apertura/cierre, diálogos de confirmación, envío de formulario dentro de un modal
- Carga de archivos: drag and drop, validación de tipo de archivo, progreso de carga
- API: el mismo backend accesible directamente para testing de API en paralelo con los tests de UI
- Selectores estables: atributos
data-testido IDs confiables que no van a cambiar
La cobertura de escenarios importa más que la apariencia visual. Un sitio construido para práctica tendrá todo esto; un sitio de producción aleatorio tendrá quizás dos.
El entorno de práctica lab.becomeqa.com
Construimos un lab de práctica dedicado para los ejercicios de este curso. Está en lab.becomeqa.com y es gratuito.
Login / Autenticación
- Flujo de login válido (email + contraseña)
- Credenciales inválidas → mensaje de error
- Rutas protegidas que redirigen al login si no estás autenticado
- Logout
Tabla de Travel Items (el área de trabajo principal)
- Agregar, editar, eliminar ítems
- Columna de estado: Planned, In Progress, Completed
- Filtro por estado
- Ordenamiento por columnas
- Paginación
Modales
- Agregar ítem abre un modal con un formulario
- Editar ítem: el mismo modal, pre-completado
- Modal de confirmación de eliminación
- Cerrar haciendo clic en X, cerrar haciendo clic afuera, cerrar presionando Escape
Sección de carga de archivos
Carga archivos por clic o drag-and-drop, con validación de tipo y tamaño de archivo y un indicador de progreso de carga.
Formulario de pago (para practicar validación de formularios)
Número de tarjeta, vencimiento y CVV; errores de validación con input inválido; flujo de pago simulado.
API (mismo backend)
Endpoints REST para todas las operaciones de datos, autenticación mediante Bearer token (mismas credenciales que el login de UI) y documentación OpenAPI disponible en /api-docs.
Credenciales de prueba por defecto
URL: https://lab.becomeqa.com
Email: admin@becomeqa.com
Contraseña: admin123Son credenciales compartidas para práctica. No guardes datos reales. El lab se resetea periódicamente.
Un test simple para confirmar la configuración
Antes de continuar, verifica que tu entorno se conecta correctamente al lab:
import { test, expect } from '@playwright/test';
test('el lab es accesible y el login funciona', async ({ page }) => {
await page.goto('https://lab.becomeqa.com');
await page.getByLabel('Email').fill('admin@becomeqa.com');
await page.getByLabel('Password').fill('admin123');
await page.getByRole('button', { name: 'Sign in' }).click();
await expect(page.getByText('Travel Items')).toBeVisible();
});Si pasa, estás listo para comenzar.
Otros sitios de práctica que vale conocer
El lab cubre los escenarios principales de este curso. Para tener variedad, estos también vale la pena conocer:
The Internet (the-internet.herokuapp.com)
Un clásico. Cubre: dropdowns, checkboxes, alertas de JavaScript, iframes, drag and drop, carga de archivos, scroll infinito. Bueno para practicar técnicas específicas, pero no tiene una estructura de app realista.
SauceDemo (saucedemo.com)
Un sitio falso de e-commerce de Sauce Labs. Login, listado de productos, carrito de compras, checkout. Útil para practicar un flujo completo de compra. Tiene versiones rotas de la app para practicar depuración (locked_out_user, error_user).
Reqres.in
Una API REST pública que devuelve datos de usuarios falsos. Sin UI, solo API. Útil para practicar testing de APIs sin configurar tu propio backend.
DemoQA (demoqa.com)
Cubre formularios, widgets, interacciones y alertas. Más enfocado en componentes de UI que en flujos de trabajo. Bueno para practicar tipos específicos de elementos.
Qué practicar y en qué orden
Sigue el orden de este curso. Cada módulo introduce una nueva técnica; los ejercicios del lab la aplican contra una funcionalidad real.
1. Escribir un test de login (navegación básica, completar formulario, aserción)
2. Agregar aserciones en filas de tabla (encontrar elementos en una lista)
3. Abrir y completar un formulario modal
4. Probar validación de formularios (mensajes de error con input inválido)
5. Carga de archivos
6. Interceptación de peticiones de API (verificar llamadas de red desde acciones de UI)
7. Flujo completo (login → agregar ítem → verificar en la tabla)
Al finalizar el módulo 5 (POM empresarial), tendrás una suite de tests completa que cubre todo el lab. Esa suite está lista para el portafolio. Demuestra la misma estructura que se usa en proyectos de automatización en producción.
→ See also: API Testing con Playwright: Más Allá de la UI | SQL para QA: Las Consultas que Realmente Necesitas