Localizadores para Automatización
Qué es un localizador, por qué importan, buenas prácticas, señales de un mal localizador y los tipos ordenados por prioridad, con foco en accesibilidad.
En una prueba automatizada debes indicarle a la herramienta cómo localizar los elementos para interactuar con ellos. Por ejemplo, para probar el botón “Log in” necesitas indicar su identificador (localizador) para hacerle clic.
¿Qué es un localizador?
Es la manera en que una herramienta de automatización identifica un elemento HTML dentro del DOM para interactuar con él. Para las personas es fácil reconocer un botón o un campo visualmente, pero la herramienta necesita basarse en atributos y en la estructura del código. El DOM (Document Object Model) es la estructura en forma de árbol que representa todos los elementos de una página web.
Un buen localizador permite
- Evitar falsos negativos.
- Reducir el flakiness (inconsistencia/inestabilidad).
- Evitar mantenimiento innecesario y hacer scripts legibles.
- Soportar cambios en la UI.
- Asegurar que apunte a un solo elemento (unicidad), de lo contrario la prueba fallará.
Buenas prácticas
- Prioriza localizadores basados en accesibilidad (atributos ARIA): aportan estabilidad, legibilidad y reflejan interacciones reales.
- Encapsula: no repitas los localizadores en cada test, centralízalos para facilitar el mantenimiento.
- Evita localizadores inestables: textos variables por marketing, IDs autogenerados o clases dinámicas.
- Solicita atributos específicos como data-testid: forma estable e independiente del estilo.
Señales de que tu localizador NO es bueno
| Mala práctica | Recomendación |
|---|---|
| Muy largo: /html/body/div[1]/main/.../input[1] | getByRole('button', { name: 'Comprar' }) |
| Clase CSS de estilo: button.btn-success | getByRole('button', { name: 'Comprar' }) |
| Índice: ul > li:nth-child(3) > a | a[data-nav-item="contacto"] |
| Ilegible: div > input:focus + span | getByLabel('Contraseña') |
| ID autogenerado: button.c-012b-abc-12-a | [data-testid="boton-enviar-datos"] |
No utilices índice para localizar
En lugar de la posición del elemento, identifícalo por su contenido o un atributo estable. Si el dev añade un nuevo ítem, todos los siguientes se desplazan y la prueba falla.
Tipos de localizadores (ordenados por prioridad)
1. Contenido visible
Texto o atributo visible (label, placeholder, alt, title). Muy legibles, pero el texto puede cambiar por refactor o traducción. Ej: getByText, getByLabel, getByPlaceholder.
2. Semánticos / ARIA
Es la forma en que los usuarios interactúan con la interfaz. Los más robustos y valiosos: validan accesibilidad. Solo funcionan si el elemento tiene un rol semántico correcto. Ej: getByRole.
3. getByTestId
Atributo personalizado (data-testid) añadido solo para automatización. Extremadamente estable; requiere coordinación con desarrollo (contrato de estabilidad).
4. CSS Selectors
Basados en id, class u otros selectores. Rápidos y bien soportados, pero frágiles si dependen de clases de estilo. Playwright no los recomienda como primera opción.
5. XPath
Lenguaje de consulta muy flexible y potente, pero el menos legible, el más lento y el de mayor riesgo de fragilidad. Considéralo el “último recurso”.
Beneficios de getByRole
- Imita la interacción del usuario: localiza elementos como los ve la persona (un botón “Iniciar sesión”, no un div con data-testid).
- Robustez inherente: identifica elementos por su función real (button, textbox, checkbox, link, heading, list, table).
- Usa estándares ARIA: además de validar la funcionalidad, confirma que la accesibilidad se mantenga.
page.getByRole('button', { name: 'Iniciar Sesión' })Guarda o comparte este contenido
Descárgalo en PDF o Markdown para guardarlo o compartirlo.