¿Qué son los localizadores?
Locator es un comando que le dice a Selenium IDE en qué elementos GUI (por ejemplo, cuadro de texto, botones, casillas de verificación, etc.) necesita operar. La identificación de los elementos de la GUI correctos es un requisito previo para crear un script de automatización. Pero la identificación precisa de los elementos de la GUI es más difícil de lo que parece. ¡A veces, terminas trabajando con elementos de GUI incorrectos o sin ningún elemento! Por lo tanto, Selenium proporciona varios localizadores para ubicar con precisión un elemento GUILos diferentes tipos de localizador CSS en Selenium IDE
Hay comandos que no necesitan un localizador (como el comando "abrir"). Sin embargo, la mayoría de ellos necesitan localizadores de elementos en Selenium webdriver.
La elección del localizador depende en gran medida de su Aplicación bajo prueba . En este tutorial, alternaremos entre Facebook, nuevos tours.demoaut en función de los localizadores que admiten estas aplicaciones. Del mismo modo, en su proyecto de prueba, seleccionará cualquiera de los localizadores de elementos enumerados anteriormente en Selenium webdriver, según el soporte de su aplicación.
Localización por ID
Esta es la forma más común de localizar elementos, ya que se supone que los ID son únicos para cada elemento.
Formato de destino: id = id del elemento
Para este ejemplo, usaremos Facebook como nuestra aplicación de prueba porque Mercury Tours no usa atributos de identificación.
Paso 1. Desde que se creó este tutorial, Facebook ha cambiado el diseño de su página de inicio de sesión. Utilice esta página de demostración http://demo.guru99.com/test/facebook.html para realizar pruebas. Inspeccione el cuadro de texto "Correo electrónico o teléfono" con Firebug y tome nota de su ID. En este caso, el ID es "correo electrónico".
Paso 2. Inicie Selenium IDE e ingrese "id = email" en el cuadro Destino. Haga clic en el botón Buscar y observe que el cuadro de texto "Correo electrónico o teléfono" se resalta en amarillo y está bordeado de verde, lo que significa que Selenium IDE pudo ubicar ese elemento correctamente.
Localización por nombre
La localización de elementos por nombre es muy similar a la localización por ID, excepto que usamos el prefijo "name =" en su lugar.
Formato de destino: nombre = nombre del elemento
En la siguiente demostración, ahora usaremos Mercury Tours porque todos los elementos significativos tienen nombres.
Paso 1. Navega a http://demo.guru99.com/test/newtours/ y usa Firebug para inspeccionar el cuadro de texto "Nombre de usuario". Tome nota de su atributo de nombre.
Aquí, vemos que el nombre del elemento es "userName".
Paso 2. En Selenium IDE, ingrese "nombre = nombre de usuario" en el cuadro Destino y haga clic en el botón Buscar. Selenium IDE debería poder ubicar el cuadro de texto Nombre de usuario resaltándolo.
Localizar por nombre usando filtros
Los filtros se pueden utilizar cuando varios elementos tienen el mismo nombre. Los filtros son atributos adicionales que se utilizan para distinguir elementos con el mismo nombre.
Formato de destino : nombre = nombre_del_elemento filtro = valor_del_filtro
Veamos un ejemplo:
Paso 1 . Inicie sesión en Mercury Tours utilizando "tutorial" como nombre de usuario y contraseña. Debería llevarlo a la página del buscador de vuelos que se muestra a continuación.
Paso 2. Con Firebug, observe que los botones de radio de ida y vuelta y de ida tienen el mismo nombre "tripType". Sin embargo, tienen diferentes atributos de VALOR, por lo que podemos usar cada uno de ellos como nuestro filtro.
Paso 3.
- Primero vamos a acceder al botón de opción Unidireccional. Haga clic en la primera línea del Editor.
- En el cuadro de comando de Selenium IDE, ingrese el comando "haga clic".
- En el cuadro Destino, ingrese "name = tripType value = oneway". La parte "valor = unidireccional" es nuestro filtro.
Paso 4 . Haga clic en el botón Buscar y observe que Selenium IDE puede resaltar el botón de opción Unidireccional con verde, lo que significa que podemos acceder al elemento con éxito utilizando su atributo VALUE.
Paso 5. Presione la tecla "X" en su teclado para ejecutar este comando de clic. Observe que se seleccionó el botón de opción Unidireccional.
Puede hacer exactamente lo mismo con el botón de opción Viaje de ida y vuelta, esta vez, usando "nombre = tipo de viaje valor = viaje de ida y vuelta" como su objetivo.
Localización por texto de enlace
Este tipo de localizador CSS en Selenium se aplica solo a los textos de hipervínculos. Accedemos al enlace prefijando nuestro objetivo con "link =" y luego seguido del texto del hipervínculo.
Formato de destino : link = link_text
En este ejemplo, accederemos al enlace "REGISTRARSE" que se encuentra en la página de inicio de Mercury Tours.
Paso 1.
- Primero, asegúrese de haber cerrado la sesión de Mercury Tours.
- Vaya a la página de inicio de Mercury Tours.
Paso 2 .
- Usando Firebug, inspeccione el enlace "REGISTRARSE". El texto del enlace se encuentra entre las etiquetas y.
- En este caso, el texto de nuestro enlace es "REGISTRARSE". Copie el texto del enlace.
Paso 3 . Copie el texto del enlace en Firebug y péguelo en el cuadro Destino de Selenium IDE. Ponle el prefijo "link =".
Paso 4. Haga clic en el botón Buscar y observe que Selenium IDE pudo resaltar correctamente el enlace REGISTRARSE.
Paso 5. Para verificar más, ingrese "clickAndWait" en el cuadro de Comando y ejecútelo. Selenium IDE debería poder hacer clic en ese enlace de REGISTRO con éxito y llevarlo a la página de Registro que se muestra a continuación.
Localización por selector de CSS
Los selectores de CSS en Selenium son patrones de cadenas que se utilizan para identificar un elemento en función de una combinación de etiqueta HTML, id, clase y atributos. La localización mediante selectores CSS en Selenium es más complicada que los métodos anteriores, pero es la estrategia de localización más común de los usuarios avanzados de Selenium porque puede acceder incluso a aquellos elementos que no tienen ID o nombre.
Los selectores de CSS en Selenium tienen muchos formatos, pero solo nos centraremos en los más comunes.
- Etiqueta e identificación
- Etiqueta y clase
- Etiqueta y atributo
- Etiqueta, clase y atributo
- Texto interior
Al utilizar esta estrategia, siempre colocamos el prefijo "css =" en el cuadro de destino, como se mostrará en los siguientes ejemplos.
Localización por selector de CSS: etiqueta e ID
Nuevamente, usaremos el cuadro de texto Correo electrónico de Facebook en este ejemplo. Como puede recordar, tiene un ID de "correo electrónico" y ya hemos accedido a él en la sección "Localización por ID". Esta vez, usaremos un Selector de CSS Selenium con ID para acceder a ese mismo elemento.
|
Sintaxis |
Descripción |
|---|---|
|
css = tag # id |
|
Tenga en cuenta que el ID siempre está precedido por un signo de almohadilla (#).
Paso 1. Navegue a www.facebook.com. Con Firebug, examine el cuadro de texto "Correo electrónico o teléfono".
En este punto, tenga en cuenta que la etiqueta HTML es "entrada" y su ID es "correo electrónico". Entonces nuestra sintaxis será "css = input # email".
Paso 2. Ingrese "css = input # email" en el cuadro Destino de Selenium IDE y haga clic en el botón Buscar. Selenium IDE debería poder resaltar ese elemento.
Ubicación por selector de CSS: etiqueta y clase
Localizar mediante CSS Selector en Selenium usando una etiqueta HTML y un nombre de clase es similar a usar una etiqueta e ID, pero en este caso, se usa un punto (.) En lugar de un signo de almohadilla.
|
Sintaxis |
Descripción |
|---|---|
|
css = etiqueta. clase |
|
Paso 1. Vaya a la página de demostración http://demo.guru99.com/test/facebook.html y use Firebug para inspeccionar el cuadro de texto "Correo electrónico o teléfono". Observe que su etiqueta HTML es "input" y su clase es "inputtext".
Paso 2. En Selenium IDE, ingrese "css = input.inputtext" en el cuadro Destino y haga clic en Buscar. Selenium IDE debería poder reconocer el cuadro de texto Correo electrónico o Teléfono.
Tenga en cuenta que cuando varios elementos tienen la misma etiqueta HTML y el mismo nombre, solo se reconocerá el primer elemento del código fuente . Con Firebug, inspeccione el cuadro de texto Contraseña en Facebook y observe que tiene el mismo nombre que el cuadro de texto Correo electrónico o Teléfono.
La razón por la que solo se resaltó el cuadro de texto Correo electrónico o Teléfono en la ilustración anterior es que aparece primero en la fuente de la página de Facebook.
Localización por selector de CSS: etiqueta y atributo
Esta estrategia utiliza la etiqueta HTML y un atributo específico del elemento al que se accede.
|
Sintaxis |
Descripción |
|---|---|
|
css = etiqueta [atributo = valor] |
|
Paso 1. Navegue a la página de registro de Mercury Tours (http://demo.guru99.com/test/newtours/register.php) e inspeccione el cuadro de texto "Apellido". Tome nota de su etiqueta HTML ("entrada" en este caso) y su nombre ("apellido").
Paso 2. En Selenium IDE, ingrese "css = input [name = lastName]" en el cuadro Destino y haga clic en Buscar. Selenium IDE debería poder acceder al cuadro Apellido correctamente.
Cuando varios elementos tienen la misma etiqueta y atributo HTML, solo se reconocerá el primero . Este comportamiento es similar a localizar elementos usando selectores CSS con la misma etiqueta y clase.
Ubicación por selector de CSS: etiqueta, clase y atributo
| Sintaxis | Descripción |
|---|---|
| css = tag.class [atributo = valor] |
|
Paso 1. Vaya a la página de demostración http://demo.guru99.com/test/facebook.html y use Firebug para inspeccionar los cuadros de entrada 'Correo electrónico o teléfono' y 'Contraseña'. Tome nota de su etiqueta HTML, clase y atributos. Para este ejemplo, seleccionaremos sus atributos 'tabindex'.
Paso 2. Primero accederemos al cuadro de texto "Correo electrónico o teléfono". Por lo tanto, usaremos un valor tabindex de 1. Ingrese "css = input.inputtext [tabindex = 1]" en el cuadro Destino de Selenium IDE y haga clic en Buscar. El cuadro de entrada 'Correo electrónico o teléfono' debe estar resaltado.
Paso 3. Para acceder al cuadro de entrada Contraseña, simplemente reemplace el valor del atributo tabindex. Introduzca "css = input.inputtext [tabindex = 2]" en el cuadro Destino y haga clic en el botón Buscar. Selenium IDE debe poder identificar correctamente el cuadro de texto Contraseña.
Localizar por CSS Selector - texto interno
Como habrá notado, las etiquetas HTML rara vez reciben atributos de identificación, nombre o clase. Entonces, ¿cómo accedemos a ellos? La respuesta es mediante el uso de sus textos internos. Los textos internos son los patrones de cadena reales que la etiqueta HTML muestra en la página.
|
Sintaxis |
Descripción |
|---|---|
|
css = etiqueta: contiene ("texto interno") |
|
Paso 1. Navegue a la página de inicio de Mercury Tours (http://demo.guru99.com/test/newtours/) y use Firebug para investigar la etiqueta "Contraseña". Tome nota de su etiqueta HTML (que es "fuente" en este caso) y observe que no tiene atributos de clase, identificación o nombre.
Paso 2. Escriba css = font: contains ("Contraseña:") en el cuadro Destino de Selenium IDE y haga clic en Buscar. Selenium IDE debería poder acceder a la etiqueta de Contraseña como se muestra en la imagen a continuación.
Paso 3. Esta vez, reemplace el texto interno con "Boston" para que su Target ahora se convierta en "css = font: contains (" Boston ")". Haga clic en Buscar. Debería notar que la etiqueta "Boston a San Francisco" se resalta. Esto le muestra que Selenium IDE puede acceder a una etiqueta larga incluso si acaba de indicar la primera palabra de su texto interno.
Localización por DOM (modelo de objetos de documento)
El Modelo de Objetos de Documento (DOM), en términos simples, es la forma en que se estructuran los elementos HTML. Selenium IDE puede utilizar el DOM para acceder a los elementos de la página. Si usamos este método, nuestro cuadro Destino siempre comenzará con "dom = documento…"; sin embargo, el prefijo "dom =" normalmente se elimina porque Selenium IDE es capaz de interpretar automáticamente cualquier cosa que comience con la palabra clave "documento" como una ruta dentro del DOM en Selenium de todos modos.
Hay cuatro formas básicas de ubicar un elemento a través de DOM en Selenium:
- getElementById
- getElementsByName
- dom: name (se aplica solo a los elementos dentro de un formulario con nombre)
- dom: índice
Localización por DOM - getElementById
Centrémonos en el primer método: usar el método getElementById de DOM en Selenium. La sintaxis sería:
|
Sintaxis |
Descripción |
|---|---|
|
document.getElementById ("id del elemento") |
id del elemento = este es el valor del atributo ID del elemento al que se accede. Este valor siempre debe estar entre paréntesis (""). |
Paso 1. Use esta página de demostración http://demo.guru99.com/test/facebook.html Navegue hasta ella y use Firebug para inspeccionar la casilla de verificación "Mantenerme conectado". Toma nota de su identificación.
Podemos ver que el ID que debemos usar es "persist_box".
Paso 2. Abra Selenium IDE y en el cuadro Destino, ingrese "document.getElementById (" persist_box ")" y haga clic en Buscar. Selenium IDE debería poder ubicar la casilla de verificación "Mantenerme conectado". Aunque no puede resaltar el interior de la casilla de verificación, Selenium IDE aún puede rodear el elemento con un borde verde brillante como se muestra a continuación.
Localización por DOM - getElementsByName
El método getElementById solo puede acceder a un elemento a la vez, y ese es el elemento con el ID que especificó. El método getElementsByName es diferente. Recopila una matriz de elementos que tienen el nombre que especificó. Puede acceder a los elementos individuales utilizando un índice que comienza en 0.
|
getElementById
|
||
|
getElementsByName
|
||
|
Sintaxis |
Descripción |
|---|---|
|
document.getElementsByName ("nombre") [índice] |
|
Paso 1. Navegue a la página de inicio de Mercury Tours e inicie sesión usando "tutorial" como nombre de usuario y contraseña. Firefox debería llevarlo a la pantalla del Buscador de vuelos.
Paso 2. Con Firebug, inspeccione los tres botones de opción en la parte inferior de la página (botones de opción de clase económica, clase ejecutiva y primera clase). Observe que todos tienen el mismo nombre que es "servClass".
Paso 3. Primero accedamos al botón de opción "Clase económica". De todos estos tres botones de opción, este elemento es el primero, por lo que tiene un índice de 0. En Selenium IDE, escriba "document.getElementsByName (" servClass ") [0]" y haga clic en el botón Buscar. Selenium IDE debería poder identificar correctamente el botón de opción de clase económica.
Paso 4. Cambie el número de índice a 1 para que su destino ahora se convierta en document.getElementsByName ("servClass") [1]. Haga clic en el botón Buscar y Selenium IDE debería poder resaltar el botón de opción "Clase empresarial", como se muestra a continuación.
Localizando por DOM - dom: name
Como se mencionó anteriormente, este método solo se aplicará si el elemento al que está accediendo está contenido dentro de un formulario con nombre.
|
Sintaxis |
Descripción |
|---|---|
|
document.forms ["nombre del formulario"] .elements ["nombre del elemento"] |
|
Paso 1. Navegue a la página de inicio de Mercury Tours (http://demo.guru99.com/test/newtours/) y use Firebug para inspeccionar el cuadro de texto Nombre de usuario. Observe que está contenido en un formulario llamado "hogar".
Paso 2. En Selenium IDE, escriba "document.forms [" inicio "]. Elementos [" nombre de usuario "]" y haga clic en el botón Buscar. Selenium IDE debe poder acceder al elemento correctamente.
Localización por DOM - dom: index
Este método se aplica incluso cuando el elemento no está dentro de un formulario con nombre porque usa el índice del formulario y no su nombre.
|
Sintaxis |
Descripción |
|---|---|
|
document.forms [índice del formulario] .elements [índice del elemento] |
|
Accederemos al cuadro de texto "Teléfono" dentro de la página de registro de Mercury Tours. El formulario de esa página no tiene nombre ni atributo de ID, por lo que será un buen ejemplo.
Paso 1. Navegue a la página de registro de Mercury Tours e inspeccione el cuadro de texto Teléfono. Observe que el formulario que lo contiene no tiene atributos de ID y nombre.
Paso 2. Introduzca "document.forms [0] .elements [3]" en el cuadro Destino de Selenium IDE y haga clic en el botón Buscar. Selenium IDE debería poder acceder correctamente al cuadro de texto Teléfono.
Paso 3. Alternativamente, puede usar el nombre del elemento en lugar de su índice y obtener el mismo resultado. Ingrese "document.forms [0] .elements [" phone "]" en el cuadro Destino de Selenium IDE. El cuadro de texto Teléfono aún debería estar resaltado.
Localización por XPath
XPath es el lenguaje que se utiliza para localizar nodos XML (Lenguaje de marcado extensible). Dado que HTML se puede considerar como una implementación de XML, también podemos usar XPath para localizar elementos HTML.
Ventaja: puede acceder a casi cualquier elemento, incluso a aquellos sin atributos de clase, nombre o id.
Desventaja: Es el método más complicado de identificar elementos debido a demasiadas reglas y consideraciones diferentes.
Afortunadamente, Firebug puede generar automáticamente localizadores XPath Selenium. En el siguiente ejemplo, accederemos a una imagen a la que no se puede acceder a través de los métodos que discutimos anteriormente.
Paso 1. Navegue a la página de inicio de Mercury Tours y use Firebug para inspeccionar el rectángulo naranja a la derecha del cuadro amarillo de "Enlaces". Consulte la imagen a continuación.
Paso 2 . Haz clic derecho en el código HTML del elemento y luego selecciona la opción "Copiar XPath".
Paso 3. En Selenium IDE, escriba una barra diagonal "/" en el cuadro Destino y luego pegue el XPath que copiamos en el paso anterior. La entrada en el cuadro de destino debería comenzar ahora con dos barras diagonales "//".
Paso 4 . Haga clic en el botón Buscar. Selenium IDE debería poder resaltar el cuadro naranja como se muestra a continuación.
Resumen
Sintaxis para el uso del localizador|
Método |
Sintaxis de destino |
Ejemplo |
|---|---|---|
| Por ID | id = id_of_the_element | id = correo electrónico |
| Por nombre | nombre = nombre_del_elemento | nombre = nombre de usuario |
| Por nombre usando filtros | nombre = nombre_del_elemento filtro = valor_del_filtro | name = tripType value = oneway |
| Por texto de enlace | link = link_text | link = REGISTRARSE |
| Etiqueta e identificación | css = tag # id | css = input # email |
| Etiqueta y clase | css = etiqueta. clase | css = input.inputtext |
| Etiqueta y atributo | css = etiqueta [atributo = valor] | css = entrada [nombre = apellido] |
| Etiqueta, clase y atributo | css = etiqueta. clase [atributo = valor] | css = input.inputtext [tabindex = 1] |