Playwright y TypeScript | QA Ep. 9 | Tu primer test y async/await

async y await son las dos palabras que más asustan al escribir tu primer test en Playwright. Acá las explicamos con una analogía que no se te va a olvidar: pedir un café. await significa "espera a que esto termine antes de seguir a la línea siguiente". Si pides un café y no esperas en la barra, te vas con las manos vacías. Si tu test no espera a que cargue la página, la línea siguiente corre a medio camino y falla sin motivo aparente. Escribimos el primer test real del proyecto línea por línea sobre practicesoftwaretesting.com, y después lo rompemos a propósito para leer el reporte, el screenshot y el mensaje de error: la habilidad que de verdad usas todos los días. Episodio 9 del Bloque B: construimos un framework REAL con Playwright y TypeScript para tu portafolio. ━━━━━━━━━━━━━━━━━━━━━━ 🧩 UN TEST, PALABRA POR PALABRA test('nombre') declara el caso · page es una pestaña limpia que Playwright te presta · expect(...) es la verificación: sin esto no es un test, es un paseo por la página. ━━━━━━━━━━━━━━━━━━━━━━ ☕ async Y await, CON UNA ANALOGÍA EN LA CAFETERÍA: pides un café. No te lo sirven al instante, hay que prepararlo. await es quedarte en la barra hasta que te lo entreguen. Sin eso te irías con las manos vacías. EN EL NAVEGADOR: page.goto() pide una página y la red tarda. Sin await, la línea siguiente corre con la página a medio cargar y el test falla sin motivo aparente. DÓNDE VA CADA PALABRA: test('mi caso', async ({ page }) = { ← async va acá, UNA sola vez await page.goto('/'); ← await en cada acción await expect(...)...; ← y en cada verificación }); ⚠️ Si olvidas un await, el test puede pasar en VERDE sin verificar nada. Es el bug más peligroso: un falso positivo. ESLint y TypeScript te avisan. ━━━━━━━━━━━━━━━━━━━━━━ 🔁 EL CICLO QUE SE REPITE EN TODOS LOS TESTS 1. LLEGAR → abrir la página donde ocurre lo que quieres probar · page.goto('/') 2. ENCONTRAR → localizar el elemento con el que vas a interactuar · getByRole('button') 3. ACTUAR → hacer lo que haría el usuario · .click() · .fill() 4. VERIFICAR → comprobar que pasó lo que tenía que pasar · expect(...) Los 25 episodios que quedan solo profundizan en estos cuatro pasos. No hay un quinto. ━━━━━━━━━━━━━━━━━━━━━━ 💻 EL TEST COMPLETO QUE ESCRIBIMOS import { test, expect } from '@playwright/test'; test('el buscador filtra los productos', async ({ page }) = { // paso 1 await page.goto('/'); // pasos 2 y 3 await page.getByPlaceholder('Search').fill('hammer'); await page.getByRole('button', { name: 'Search' }).click(); // paso 4 await expect( page.getByRole('link').filter({ hasText: /hammer/i }).first() ).toBeVisible(); }); 💡 .first() se usa porque puede haber varios links que digan "hammer" y Playwright no sabría cuál elegir. ━━━━━━━━━━━━━━━━━━━━━━ 🔴 ROMPEMOS EL TEST A PROPÓSITO Cambiamos 'Search' por 'Buscar', que no existe. El test espera 30 s y revienta: "Test timeout of 30000ms exceeded". El reporte HTML te dice en qué paso se cayó, con screenshot del momento exacto. Leerlo es la habilidad que más vas a usar en tu trabajo. ━━━━━━━━━━━━━━━━━━━━━━ ⏱️ CAPÍTULOS 0:00 Bienvenida 0:49 Repaso del Episodio 8 1:07 Qué te llevas de este video 1:43 Un test palabra por palabra: import, test, page, expect 2:28 async y await: la analogía del café 4:12 Dónde va cada palabra: la regla 4:23 Si olvidas un await: el falso positivo 5:49 El ciclo que se repite en TODOS los tests 6:09 Creamos primer-test.spec.ts 7:19 Paso 1: llegar con page.goto 7:40 Pasos 2 y 3: encontrar y actuar 8:50 Paso 4: verificar con expect 9:35 Por qué .first() y toBeVisible 9:58 Repaso del test completo, paso por paso 11:04 Qué significa expect en realidad 12:03 Rompemos el test a propósito 12:44 El error: 30 segundos esperando 13:22 El reporte HTML y el screenshot del fallo 14:20 Corregir el test y volver a correr 15:12 Lo que casi todos hacen mal 15:49 Tres cosas para quedarte 15:57 Commit del episodio 16:48 Próximo episodio ━━━━━━━━━━━━━━━━━━━━━━ 🔥 LO QUE CASI TODOS HACEN MAL 1. Olvidar el await. El test pasa en verde sin verificar nada: un falso positivo y no te enteras. 2. Un test sin expect. Si no verificas nada, no es un test: es un recorrido por la página. 3. Nombres como test1 o "prueba login". Tienen que ser descriptivos, estilo Gherkin. En tu trabajo te los van a exigir. ━━━━━━━━━━━━━━━━━━━━━━ 📌 TRES COSAS PARA QUEDARTE 1️⃣ await en todo. Cada acción y cada verificación lo lleva. El async va una vez, en la función del test. 2️⃣ Cuatro pasos siempre. Llegar, encontrar, actuar, verificar. Lo demás es profundizar en esos cuatro. 3️⃣ El error te dice qué pasó. Reporte, screenshot y consola. Leerlos vale más que memorizar comandos. ━━━━━━━━━━━━━━━━━━━━━━ ▶️ SIGUIENTE EPISODIO Ep. 10: UI Mode, Codegen y Trace Viewer. Tres de tus mejores amigos. 🔔 SUSCRÍBETE para no perder el orden de la serie. Tus dudas en los comentarios se responden con mucho amor y cariño 💚 #Playwright #AsyncAwait #QAAutomation