Playwright y TypeScript | QA Ep. 11 | getByRole, getByLabel y XPath

Localizadores en Playwright: la decisión que separa una suite estable de una que falla todos los días. getByRole, getByLabel, getByText, getByTestId, CSS y XPath, en el orden exacto en que debes usarlos. Un locator NO es un elemento: es una receta para encontrarlo, y se ejecuta cada vez que lo usas. Por eso Playwright no tiene el StaleElementException que sufrías en Selenium: si la página cambia entre una línea y otra, el locator vuelve a buscar. También te cuento por qué el XPath le está costando caro a mi equipo en el trabajo real, y cómo pedirle un data-test a desarrollo sin que suene a favor. Esto me funcionó en las entrevistas técnicas que tuve esta semana. Episodio 11, arranca el Bloque C: un framework REAL con Playwright y TypeScript para tu portafolio. ━━━━━━━━━━━━━━━━━━━━━━ 🧾 UN LOCATOR NO ES UN ELEMENTO const boton = page.getByRole('button', { name: 'Search' }); // Todavía no buscó nada. Solo guardaste la receta. await boton.click(); // ACÁ busca el elemento, y espera si hace falta. ━━━━━━━━━━━━━━━━━━━━━━ 🏆 LA JERARQUÍA: ÚSALOS EN ESTE ORDEN 1. getByRole → por su rol de accesibilidad y su texto. El recomendado para casi todo 2. getByLabel → campos de formulario, por la etiqueta que ve el usuario 3. getByPlaceholder / getByText → cuando no hay label o buscas contenido visible 4. getByTestId → el atributo que puso desarrollo para ti. Estable, pero invisible al usuario 5. CSS o XPath → último recurso. Se rompe con cualquier cambio de diseño Sube en la lista siempre que puedas. Si terminas en el 5, pregúntate si desarrollo puede darte un data-test. ━━━━━━━━━━━━━━━━━━━━━━ ⭐ getByRole: POR QUÉ ES EL RECOMENDADO buttonIniciar sesión/button page.getByRole('button', name: 'Iniciar sesión' ) role = qué es · name = qué dice TRES VENTAJAS: ve la página como un usuario, sobrevive a los cambios de CSS y verifica accesibilidad de paso. Los roles que vas a usar el 90% del tiempo: button · link · textbox · checkbox · heading · listitem · row · cell · combobox · dialog La lista completa está en la guía de locators de Playwright (atributos ARIA de HTML). ━━━━━━━━━━━━━━━━━━━━━━ 💥 POR QUÉ EL XPATH TE VA A COSTAR EL TRABAJO page.locator('//div[@class="row"]/div[2]/div/button[1]') Es una ruta absoluta. Desarrollo agrega un div arriba y el test se rompe, aunque la funcionalidad no cambió: cambió el orden del HTML. ✗ Se rompe sin motivo ✗ Nadie lo entiende a los seis meses ✗ Genera desconfianza en la suite ¿Cuándo sí XPath? Cuando necesitas subir en el árbol del DOM y no hay otra forma. Es raro. ━━━━━━━━━━━━━━━━━━━━━━ 🤝 CÓMO PEDIRLE UN data-test A DESARROLLO No pidas un favor. Presenta un costo. ✗ "¿Me pueden poner IDs a los elementos?" → suena a trabajo extra sin beneficio para ellos ✓ "Esta semana perdí 4 horas arreglando tests que se rompieron por un cambio de diseño. Un atributo data-test en estos 6 elementos lo elimina." Recuerda configurar testIdAttribute en playwright.config.ts si el equipo usa data-test y no data-testid (lo vimos en el Ep. 8). ━━━━━━━━━━━━━━━━━━━━━━ ⏱️ CAPÍTULOS 0:00 Bienvenida 0:34 Arranca el Bloque C 0:54 Repaso del Episodio 10 1:12 Qué te llevas de este video 1:37 Un locator NO es un elemento 2:37 Guardar el locator en una constante 3:33 Adiós al StaleElementException de Selenium 3:55 La jerarquía de localizadores 4:17 El XPath en mi trabajo real 5:06 Por qué getByRole es el mejor 5:33 getByTestId: ¿por qué está en el puesto 4? 6:35 Dónde ver todos los roles (ARIA) 7:22 Rol + nombre accesible 7:59 Los roles que vas a usar el 90% del tiempo 8:20 Por qué el XPath te va a costar el trabajo 9:00 Rutas absolutas: por qué se rompen 10:32 Cómo se lee un XPath 10:55 Cuándo sí usar XPath 11:13 Cómo pedirle un data-test a desarrollo 12:11 Lo que casi todos hacen mal 12:18 Copiar el selector del inspector 13:46 Localizar por clases CSS 14:13 Usar getByTestId para todo 14:28 Tres cosas para quedarte 14:51 Próximo episodio ━━━━━━━━━━━━━━━━━━━━━━ 🔥 LO QUE CASI TODOS HACEN MAL 1. Copiar el selector del inspector del navegador. Chrome te da un CSS con seis niveles de anidación: receta perfecta para un test frágil. 2. Localizar por clases de CSS. Las clases existen para el diseño y cambian cuando cambia el diseño. No son un contrato. 3. Usar getByTestId para todo. Es cómodo, pero deja de probar lo que ve el usuario. Empieza siempre por getByRole. ━━━━━━━━━━━━━━━━━━━━━━ 📌 TRES COSAS PARA QUEDARTE 1️⃣ Un locator es una receta. Se ejecuta cuando lo usas, no cuando lo declaras. Por eso no hay elementos obsoletos. 2️⃣ Sube en la jerarquía. getByRole primero. CSS y XPath solo cuando de verdad no hay otra opción. 3️⃣ El localizador define tu suite. Uno bueno vive años. Uno malo te hace mantenimiento cada sprint. ━━━━━━━━━━━━━━━━━━━━━━ ▶️ SIGUIENTE EPISODIO Ep. 12: Auto-waiting. Por qué Playwright no necesita un solo sleep. 🔔 SUSCRÍBETE para no perder el orden de la serie. Tus dudas en los comentarios se responden con mucho amor y cariño 💚 #Playwright #Localizadores #QAAutomation