Localizadores en Selenium

¿Qué son los localizadores en Selenium?

Un localizador es un comando que dirige Selenium IDE o Selenium WebDriver al elemento GUI correcto, como un cuadro de texto, botón, enlace o casilla de verificación, en el que se debe realizar una acción. Identificar el elemento GUI correcto es un requisito previo para crear cualquier script de automatización confiable. Sin embargo, la identificación precisa es más difícil de lo que parece. A veces, puede terminar interactuando con el elemento incorrecto o con ningún elemento en absoluto. Para abordar esto, Selenium Ofrece diversas estrategias de localización que permiten apuntar con precisión a los elementos de la interfaz gráfica de usuario.

Si bien algunos comandos, como el comando “abrir”, no requieren un localizador, la mayoría de Selenium Los comandos dependen de los localizadores de elementos. La elección del localizador depende en gran medida de la aplicación que se está probando (AUT). En este tutorial, alternaremos entre Facebook y el Mercury Sitio de demostración de tours (newtours.demoaut), en función de los localizadores que admita cada aplicación. Asimismo, en su propio sitio de demostración de tours (newtours.demoaut), según los localizadores que admita cada aplicación. las pruebas proyecto, seleccionará un localizador de elementos en Selenium WebDriver basado en la estructura de su aplicación.

Localizar por DNI

Este es el método más común para localizar elementos, ya que los ID deben ser únicos para cada elemento de una página. Siempre que exista un atributo ID, debería ser la primera opción para obtener scripts de prueba rápidos, estables y fáciles de leer.

Target Formato: id=id del elemento

Para este ejemplo, utilizaremos una página de demostración de Facebook porque Mercury Tours no utiliza atributos de ID para los campos principales de su formulario.

Paso 1) Utilice esta página de demostración https://demo.guru99.com/test/facebook.html para realizar pruebas. Inspeccione el cuadro de texto "Correo electrónico o teléfono" utilizando las herramientas para desarrolladores integradas de su navegador (presione F12 en Chrome, Edge o Firefox) y anote su ID. En este caso, el ID es “email”.

Paso 2) Lanza Selenium IDE e ingrese “id=email” en el Target cuadro. Haga clic en el botón Buscar y observe que el cuadro de texto "Correo electrónico o teléfono" está resaltado en amarillo con un borde verde, lo que indica que Selenium El IDE ha localizado el elemento correctamente.

Localizar por nombre

Localizar elementos por nombre es similar a localizarlos por ID, excepto que usamos el “nombre=” En su lugar, utilice un prefijo. Este método resulta útil cuando los elementos carecen de un ID pero tienen un atributo de nombre definido.

Target Formato: nombre=nombre del elemento

Para la siguiente demostración, utilizaremos Mercury Tours porque todos los elementos importantes del formulario en el sitio tienen un atributo de nombre.

Paso 1) Navegue a https://demo.guru99.com/test/newtours/ y utilice las herramientas para desarrolladores del navegador para inspeccionar el cuadro de texto "Nombre de usuario". Anote su atributo de nombre.

Aquí, el nombre del elemento es “userName”.

Paso 2) In Selenium IDE, ingrese "nombre = nombre de usuario" en el Target cuadro y haga clic en el botón Buscar. Selenium El IDE debería localizar el cuadro de texto Nombre de usuario resaltándolo.

Cómo localizar elementos por nombre usando filtros

Los filtros son útiles cuando varios elementos comparten el mismo atributo de nombre. Los filtros son atributos adicionales que se utilizan para distinguir elementos que comparten el mismo nombre. Sin filtros, Selenium Por defecto, solo se seleccionará el primer elemento coincidente.

Target Formato: nombre=nombre_del_elemento filtro=valor_del_filtro

Veamos un ejemplo.

Paso 1) Ingrese a Mercury Excursiones.

Registrarse en Mercury Para realizar recorridos, utilice "tutorial" como nombre de usuario y contraseña. Debería aparecer la página del buscador de vuelos, como se muestra a continuación.

Paso 2) Utilice las herramientas para desarrolladores para inspeccionar los atributos VALUE.

Observe que los botones de opción Viaje de ida y vuelta y Solo ida comparten el mismo nombre, "tripType". Sin embargo, tienen atributos VALUE diferentes, por lo que podemos usar cada valor como filtro.

Paso 3) Haz clic en la primera fila del editor.

• Primero accederemos al botón de opción Unidireccional. Haga clic en la primera línea del Selenium Editor IDE.
• En el cuadro de comandos, introduzca el comando “click”.
• En la sección Target En la casilla, introduzca “name=tripType value=oneway”. La parte “value=oneway” funciona como filtro.

Paso 4) Haga clic en el botón Buscar.

Darse cuenta de Selenium El IDE resalta en verde el botón de opción "One Way" (Una dirección), lo que confirma que se ha accedido correctamente al elemento a través de su atributo VALUE.

Paso 5) Seleccione el botón de opción "Unidireccional".

Pulse la tecla "X" del teclado para ejecutar el comando de clic. Ahora está seleccionado el botón de opción "Unidireccional".

Puedes realizar la misma acción en el botón de opción Viaje de ida y vuelta, esta vez usando “name=tripType value=roundtrip” como destino.

Localización por texto de enlace

Esta estrategia de localización se aplica únicamente a los textos de los hipervínculos. Accedemos al enlace anteponiendo el prefijo “link=” al texto visible del hipervínculo. Este método es muy legible y funciona bien para las pruebas de navegación.

Target Formato: enlace=enlace_texto

En el siguiente ejemplo, accederemos al enlace “REGISTRARSE” que se encuentra en el Mercury Página de inicio de excursiones.

Paso 1)

• Primero, asegúrese de haber cerrado sesión en Mercury Excursiones.
• Navegue a la pestaña Mercury Página de inicio de excursiones.

Paso 2)

• Utilice las herramientas para desarrolladores para inspeccionar el enlace "REGISTRARSE". El texto del enlace aparece entre las etiquetas de anclaje de apertura y cierre.
• En este caso, el texto del enlace es “REGISTRARSE”. Copie el texto del enlace.

Paso 3) Copia el texto del enlace y pégalo en el Selenium IDE Target caja. Añádele el prefijo “link=”.

Paso 4) Haga clic en el botón Buscar. Selenium El IDE resaltará correctamente el enlace REGISTRAR.

Paso 5) Para verificar más, ingrese “clickAndWait” en el cuadro de comando y ejecútelo. Selenium IDE hará clic correctamente en el enlace REGISTRARSE y le llevará a la página de registro que se muestra a continuación.

Localización por DOM (modelo de objetos de documento)

El Modelo de objetos de documento (DOM)En términos sencillos, describe cómo se estructuran los elementos HTML como un árbol de nodos. Selenium El IDE puede navegar por este árbol para acceder a los elementos de la página. Al utilizar este método, el Target La caja siempre comienza con “dom=document…”. El prefijo “dom=” normalmente se omite porque Selenium El IDE interpreta automáticamente cualquier valor que comience con "document" como una ruta DOM.

Hay cuatro formas básicas de localizar un elemento a través del DOM en Selenium:

• getElementById
• obtenerElementosPorNombre
• dom:nombre (se aplica sólo a elementos dentro de un formulario con nombre)
• dominio: índice

Localización por DOM – getElementById

Primero exploremos el método getElementById del DOM en SeleniumEste método devuelve un único elemento haciendo coincidir su atributo ID.

Sintaxis

document.getElementById("id of the element")

• El ID del elemento es el valor del atributo ID del elemento al que se desea acceder. Este valor siempre debe ir entre comillas.

Paso 1) Utilice esta página de demostración https://demo.guru99.com/test/facebook.htmlNavegue hasta allí y use las Herramientas para desarrolladores para inspeccionar la casilla de verificación "Mantener la sesión iniciada". Anote su ID.

El ID que debemos usar es “persist_box”.

Paso 2) Abra Selenium IDE y en el Target En el cuadro ingrese document.getElementById(“persist_box”), luego haga clic en Buscar. Selenium El IDE localizará la casilla de verificación "Mantener la sesión iniciada". Aunque no puede resaltar el interior de la casilla, la rodea con un borde verde brillante, como se muestra a continuación.

Localización por DOM – getElementsByName

El método getElementById accede a un solo elemento a la vez, concretamente al elemento con el ID especificado. El método getElementsByName funciona de forma diferente. Devuelve un array de elementos que comparten el nombre especificado. Se accede a cada elemento mediante un índice numérico que comienza en 0.

	getElementById Devuelve un único elemento. Ese elemento lleva el ID especificado entre paréntesis en getElementById().
	obtenerElementosPorNombre Devuelve una colección de elementos con nombres idénticos. Cada elemento está indexado por un número que comienza en 0, como en un array. Para seleccionar un elemento específico, basta con colocar su índice entre corchetes en la sintaxis que se muestra a continuación.

Sintaxis

document.getElementsByName("name")[index]

• nombre = nombre del elemento definido por su atributo 'nombre'
• índice = un número entero que indica qué elemento dentro de la matriz getElementsByName se utilizará.

Paso 1) Navegue a la pestaña Mercury Acceda a la página principal de Tours e inicie sesión con el nombre de usuario y la contraseña "tutorial". El navegador cargará la pantalla del buscador de vuelos.

Paso 2) Utilice las herramientas para desarrolladores para inspeccionar los tres botones de opción en la parte inferior de la página (Clase económica, Clase ejecutiva y Primera clase). Observe que todos comparten el mismo nombre: "servClass".

Paso 3) Primero, accedamos al botón de opción "Clase económica". De los tres botones de opción, este elemento aparece primero, por lo que su índice es 0. En Selenium IDE, escriba document.getElementsByName(“servClass”)[0] y haga clic en el botón Buscar. Selenium El IDE identificará correctamente el botón de opción de clase económica.

Paso 4) Cambia el número de índice a 1, de modo que tu Target se convierte en document.getElementsByName(“servClass”)[1]. Haga clic en el botón Buscar y Selenium El IDE resaltará el botón de opción "Clase empresarial" como se muestra a continuación.

Localización por DOM – dom:nombre

Como se mencionó anteriormente, este método solo se aplica si el elemento al que se accede está contenido dentro de un formulario con nombre. La ruta del localizador comienza en el formulario y luego desciende hasta el elemento de destino por su nombre.

Sintaxis

document.forms["name of the form"].elements["name of the element"]

• nombre del formulario = el valor del atributo nombre de la etiqueta del formulario que contiene el elemento al que desea acceder
• nombre del elemento = el valor del atributo de nombre del elemento al que desea acceder

Paso 1) Navegue a Mercury Página de inicio de excursiones https://demo.guru99.com/test/newtours/ y utilice las Herramientas para desarrolladores para inspeccionar el cuadro de texto Nombre de usuario. Observe que está contenido en un formulario llamado “home”.

Paso 2) In Selenium En el IDE, escriba document.forms[“home”].elements[“userName”] y haga clic en el botón Buscar. Selenium El IDE accederá al elemento correctamente.

Localización por DOM – dom:index

Este método se aplica incluso cuando el elemento no se encuentra dentro de un formulario con nombre, ya que utiliza el índice del formulario en lugar de su nombre. Esto resulta útil para páginas antiguas o formularios generados automáticamente donde no es posible asignar nombres.

Sintaxis

document.forms[index of the form].elements[index of the element]

• Índice del formulario = el número de índice (que comienza en 0) del formulario con respecto a toda la página.
• índice del elemento = el número de índice (que comienza en 0) del elemento con respecto al formulario que lo contiene.

Accederemos al cuadro de texto “Teléfono” en el Mercury Página de registro para tours. El formulario de esta página no tiene ni nombre ni ID, por lo que sirve como buen ejemplo.

Paso 1) Navegue a la pestaña Mercury Acceda a la página de registro de tours e inspeccione el cuadro de texto del teléfono. Observe que el formulario circundante no tiene atributos de ID ni de nombre.

Paso 2) Introduzca document.forms[0].elements[3] en el Selenium IDE Target cuadro y haga clic en el botón Buscar. Selenium El IDE accederá correctamente al cuadro de texto del teléfono.

Paso 3) Alternativamente, puede usar el nombre del elemento en lugar de su índice para obtener el mismo resultado. Ingrese document.forms[0].elements[“phone”] en el Target El cuadro de texto del teléfono seguirá resaltado.

Localización por XPath

XPath es el lenguaje de consulta utilizado para navegar por los nodos XML (Lenguaje de Marcado Extensible). Dado que HTML puede considerarse una implementación de XML, XPath También puede localizar elementos HTML. Es una de las estrategias de localización más potentes en Selenium.

• Ventaja: Puede acceder a casi cualquier elemento, incluidos aquellos que no tienen atributos de clase, nombre o ID.
• Desventaja: Es la estrategia de localización más compleja debido a sus numerosas reglas y variaciones sintácticas.

Las herramientas para desarrolladores de navegadores modernos pueden generar automáticamente expresiones XPath. En Chrome, Edge o FirefoxHaz clic con el botón derecho en un elemento del panel Elementos y selecciona Copiar > Copiar XPath. En el siguiente ejemplo, accederemos a una imagen que no se puede localizar utilizando los métodos descritos anteriormente.

Paso 1) Navegue a la pestaña Mercury Vaya a la página principal de Tours y utilice las Herramientas para desarrolladores para inspeccionar el rectángulo naranja a la derecha del cuadro amarillo "Enlaces", como se muestra a continuación.

Paso 2) Haz clic con el botón derecho en el código HTML del elemento y, a continuación, selecciona la opción "Copiar XPath".

Paso 3) In Selenium IDE, escriba una sola barra inclinada hacia adelante “/” en el Target En el cuadro, pegue la ruta XPath copiada en el paso anterior. La entrada en el Target El cuadro ahora debe comenzar con dos barras diagonales “//”.

Paso 4) Haga clic en el botón Buscar. Selenium El IDE resaltará el cuadro naranja, como se muestra a continuación.

Por qué es importante elegir el localizador adecuado

Seleccionar la estrategia de localización correcta es una de las decisiones más influyentes en Selenium La automatización es fundamental porque impacta directamente en la estabilidad del script, la velocidad de ejecución y el costo de mantenimiento a largo plazo. Un localizador mal elegido puede provocar pruebas inestables, falsos fallos y retrabajos frecuentes cada vez que cambia la interfaz de usuario de la aplicación. El orden de preferencia recomendado por ingenieros de automatización experimentados es: primero el ID, luego el Nombre, seguido del Selector CSS, el Texto del Enlace y, finalmente, la Ruta XPath.

Los localizadores basados ​​en ID son los más rápidos porque la búsqueda del navegador está optimizada para identificadores únicos. Los localizadores basados ​​en nombres son casi igual de eficientes cuando los nombres son únicos. Los selectores CSS y XPath ofrecen flexibilidad, pero tienden a ser más lentos y menos propensos a errores cuando los desarrolladores modifican el DOM. El texto de enlace es excelente para enlaces de navegación, pero su reutilización es limitada.

La automatización estable también depende de la colaboración con los desarrolladores. Cuando los evaluadores solicitan atributos de ID o data-* consistentes y significativos durante las revisiones de código, la durabilidad de los localizadores mejora considerablemente. Evite depender de ID generados automáticamente (como los que producen los frameworks), ya que pueden cambiar entre compilaciones. Al priorizar los localizadores legibles y orientados a la intención, los equipos pueden mantener los conjuntos de pruebas y reducir la deuda técnica a medida que la aplicación evoluciona.

Mejores prácticas para escribir localizadores confiables

Los localizadores fiables son la base de un sistema mantenible. Selenium Conjunto de pruebas. Las siguientes prácticas ayudan a reducir los fallos en los scripts, mejoran la legibilidad y hacen que las pruebas sean resistentes a los cambios en la interfaz de usuario.

1. Preferiblemente identificadores únicos: Comprueba siempre primero el atributo ID. Los ID están diseñados para ser únicos dentro de una página y son la opción que ofrece el mejor rendimiento.
2. Utilice los atributos semánticos Name y data-*: Anime a los desarrolladores a agregar atributos de prueba estables, como data-testid o data-qa. Estos se mantienen consistentes incluso cuando cambian las clases CSS.
3. Evite usar XPath absoluto: Las rutas absolutas como /html/body/div[2]/div[3]/span se rompen fácilmente. Utilice expresiones XPath relativas con atributos como //input[@name='userName'].
4. Combine atributos para mayor precisión: Cuando un solo atributo no es único, combine varios atributos (por ejemplo, //button[@type='submit' y @name='login']) para apuntar al elemento correcto.
5. Utilice el texto con prudencia: Los localizadores que dependen del texto visible pueden presentar fallos en diferentes idiomas. Utilice localizadores basados ​​en texto únicamente cuando el contenido sea estable y monolingüe.
6. Centralizar los localizadores: Almacene los localizadores en una clase Page Object Model (POM) para que las actualizaciones se puedan realizar en un solo lugar en lugar de en varios scripts de prueba.
7. Validar en Herramientas para desarrolladores: Antes de agregar un localizador a un script, pruébelo en la consola del navegador usando $x(“//xpath”) para XPath o document.querySelector para CSS para confirmar que devuelve exactamente un elemento.
8. Evite los localizadores basados ​​en índices siempre que sea posible: Las posiciones de índice como [3] dependen del orden de los elementos. Incluso cambios menores en el diseño pueden desplazar el índice y provocar fallos en el script.

Al aplicar estas prácticas de forma consistente, los ingenieros de automatización crean conjuntos de pruebas que se adaptan a diferentes equipos y sobreviven a las frecuentes actualizaciones de la interfaz de usuario con un mantenimiento mínimo.

Preguntas Frecuentes