Selenium y WebDriver

Un patrón de diseño donde cada página de la aplicación está representada por una clase. La clase contiene elementos (localizadores) y métodos para interactuar con ellos, separando la lógica de prueba de los detalles de la interfaz de usuario.

Implícita: Tiempo de espera predeterminado para todos los elementos. Explícita: Espera una condición específica (por ejemplo, visibilidad). Fluida: Espera explícita con intervalo de sondeo y excepciones ignoradas.

ID, Name, Class Name, Tag Name, Link Text, Partial Link Text, CSS Selector, XPath.

close() cierra la ventana actual enfocada. quit() cierra todas las ventanas y finaliza la sesión de WebDriver.

Por id (#submit-btn), por clase (.btn-primary), por etiqueta (button) y combinados para mayor especificidad (button.btn-primary, form#login-form). Un buen selector de test es estable (sobrevive a cambios de layout), único (coincide con un solo elemento) y legible.

Los atributos data-testid se añaden específicamente para testing, así que no cambian cuando cambia el estilo o el layout — a diferencia de clases CSS o nombres de clase generados. Prioridad recomendada: data-testid, luego aria-label/role, luego un #id estable, luego atributos semánticos como [name], y selectores posicionales solo como último recurso.

Los combinadores expresan relaciones: descendente (form input), hijo directo (ul > li), hermano adyacente (label + input). Las pseudo-clases apuntan a estado y posición: input:checked, button:not(:disabled), li:first-child, tr:nth-child(2). Prefiere selectores de estado/relación sobre posiciones absolutas, que se rompen al cambiar el DOM.

Usa XPath cuando necesitas seleccionar por texto visible (//button[text()='Login']), navegar al padre o ancestro (/.., parent::), o expresar condiciones lógicas complejas (and/or/not). CSS es más simple y algo más rápido pero no puede seleccionar por texto ni subir por el árbol. En Selenium/Playwright su rendimiento es prácticamente equivalente.

Los predicados filtran entre corchetes: //input[@id='email'], //*[@data-testid='login-btn']. Las posiciones empiezan en 1, no en 0: //li[1] es el primero, //li[last()] el último, //tr[position()>1] salta una fila de cabecera. Prefiere predicados de atributo sobre los posicionales por estabilidad.

text() selecciona por texto exacto, contains() hace coincidencia parcial en texto o atributos (//div[contains(@class,'error')]), starts-with() coincide con prefijos de atributo, y normalize-space() ignora espacios alrededor. Combínalas con and/or/not para localizadores precisos y resistentes.

Los ejes navegan el árbol del DOM respecto a un nodo: parent:: (o /..), ancestor::, descendant::, following-sibling::, preceding-sibling::. Son clave para la localización por contexto, p. ej. encontrar una label por texto y luego su input: //label[text()='Email']/following-sibling::input, o un botón en la fila que contiene 'Alice': //tr[td[text()='Alice']]//button.

Cuando los ids y clases son autogenerados (id='input-7f83b', class='btn-a3f2'), ánclate en relaciones estables y contenido: localiza por texto visible o una label cercana y navega al objetivo (//label[text()='Usuario']/following-sibling::input), o acota por el contenido de una fila (//tr[.//td[text()='Alice']]//button). Los atributos aria-label y role también son anclas estables.

Evita rutas absolutas (/html/body/div[2]/form), cadenas frágiles y profundas (div > div > div > span), nombres de clase generados (.sc-bdfxgf, .btn-78sf32), clases internas de frameworks (.MuiButton-root), e índices posicionales rígidos (li:nth-child(4)) que se rompen al añadir un elemento. Prefiere localizadores semánticos que revelen la intención como [data-testid] o [aria-label].