Cómo usar Localizadores en Selenium IDE

Cómo usar Localizadores en Selenium IDE

¿Qué son los Localizadores?

«Locator» es un comando que le dice a Selenium IDE que elementos GUI (cuadro de texto, botones, casillas de verificación etcetera) necesita para operar. La correcta identificación de elementos GUI es un requisito previo a la creación de una secuencia de comandos de automatización. Pero la identificación precisa de los elementos de la GUI es más difícil de lo que suena. A veces, terminas trabajando con elementos GUI incorrecto o no en todos! Por lo tanto, selenio proporciona a una serie de localizadores para localizar precisamente un elemento de la GUI.

Los diferentes tipos de localizadores en Selenium IDE: 

  •  ID
  •  Name
  •  Link Text
  •  CSS Selector
  •  Tag and ID
  •  Tag and class
  •  Tag and attribute
  •  Tag, class, and attribute
  •  Inner text
  •  DOM (Document Object Model)
  •  getElementById
  •  getElementsByName
  •  dom:name
  •  dom: index
  •  XPath
Hay comandos que no necesitan un localizador (por ejemplo, el comando «open»). Sin embargo, la mayoría de ellos necesita localizadores. 
La elección de la localización depende en gran medida su aplicación bajo prueba. En este tutorial, se alternará entre Facebook, nueva tours.demoaut sobre la base de localizadores compatibles con estas aplicaciones. Así mismo en el proyecto de prueba, seleccionará alguno de los localizadores mencionados anteriormente, basados en el soporte de aplicaciones.

Localizar por ID – Selenium IDE

Esta es la forma más común de localización de los elementos desde ID ‘ s se supone que son únicos para cada elemento.

Target Format: id = id del elemento 

en este ejemplo, vamos a utilizar Facebook como nuestra aplicación de prueba.

Paso 1. Revise el cuadro de texto de «Correo electrónico o teléfono» haciendo clic derecho sobre el cuadro de texto y selecciona la opción «Inspeccionar elemento». tomar nota de su ID, En este caso, el ID es «email».

Como usar localizadores en Selenium IDE
Paso 2. Lanzar Selenium IDE y escriba «id = correo electrónico» en el cuadro «Target». Haga clic en el botón buscar y observe que la casilla de «Correo electrónico o teléfono» llega a ser resaltada con amarillo y bordeada con verde, lo que significa, Selenium IDE fue capaz de localizar ese elemento correctamente.
 Selenium IDE

Localizar por «Name» – Selenium IDE

La localización de elementos por «Name» son muy similares a localizar por identificación, excepto que usamos el prefijo «name =» en su lugar. 

Target Format: name=name del elemento.
 
En la siguiente demostración, ahora usamos «mercurio Tours» porque todos los elementos importantes tienen «Name». 
 
Paso 1. Vaya a http://newtours.demoaut.com/ y presione la tecla «F12» o hacer clic derecho sobre el cuadro de texto «User Name» y seleccionar la opción inspeccionar elemento. Tome nota de su atributo «name».
 
Como usar localizadores en Selenium IDE
Aquí, vemos que el atributo «name» del elemento es «userName».
 
Paso 2. En Selenium IDE, escriba «name= userName» en la caja de texto «Target» y haga clic en el botón Buscar. Selenium IDE debe ser capaz de localizar el cuadro de texto «User Name» destacándolo.
Como usar localizadores en Selenium IDE

Localizar por «Name»usando filtros 

Los filtros pueden utilizarse cuando varios elementos tienen el mismo «name». Los filtros son atributos adicionales utilizados para distinguir los elementos con el mismo nombre.
Target Format: name=name_del_elemento filtro=valor_del_filtro
 
Veamos el siguiente ejemplo.
 
Paso 1. Inicie sesión en «Mercury Tours» usando «tutorial» como nombre de usuario y contraseña. Le llevará a la página de buscador de vuelo que se muestra a continuación.
How to use Locators in Selenium IDE
Paso 2. Usando el inspeccionador de elementos de firefox (tecla F12), observe que los radio buttons «Round Trip» y «One Way» tienen el mismo name «tripType.» Sin embargo, tienen diferentes atributos VALUE, así que podemos utilizar cada uno de ellos como nuestro filtro.
 
Paso 3.
  • Vamos a acceder al radio button de una manera primero. Haga clic en la primera línea en el Editor. 
  • En el cuadro «command» de Selenium IDE, escriba el comando «click». 
  • En el cuadro «Target» , escriba «name = tripType value = oneway». «value = oneway» es nuestro filtro.

 

How to use Locators in Selenium IDE
Paso 4. Haga clic en el botón «Find» y observe que Selenium IDE es capaz de resaltar el radio button con verde – lo que significa que somos capaces de tener acceso al elemento correctamente con su atributo value.
 
Si ejecutamos los pasos anteriormente descritos, Selenium IDE debería ser capaz de seleccionar el radio button que le indiquemos en el «Value».

Localización mediante Link Text 

Este tipo de localizador sólo se aplica a textos de hipervínculo.Podemos acceder al enlace anteponiendo nuestro «Target» con «link =» y luego seguida por el texto del hipervínculo.
 
Target Format: link=Texto_vinculo
 
En este ejemplo, podremos acceder el enlace «Register» en la Página Web de «Mercury Tours».
 
Paso 1
  • Usando la opción «Inspeccionar elemento» de firefox la cual puede hacer uso presionando la tecla (F12), inspeccionar el enlace «Register», el «Link Text» se encuentra dentro de las etiquetas de HTML.
  • En este caso, el texto del vínculo es «REGISTER». Copie el texto del vínculo.
Como usar localizadores en Selenium IDE
Paso 3. Copiar el link text y pegarlo en la caja de texto «Target» de Selenium IDE. Con el prefijo «link =».
How to use Locators in Selenium IDE
Paso 4. Para verificar bien que Selenium IDE si es capaz de reconocer el «link text», introduzca «clickAndWait» en el cuadro «Command» y lo ejecuta. Selenium IDE debe poder hacer clic en ese enlace de registro con éxito y llevará a la página de registro que se muestra a continuación.
 
How to use Locators in Selenium IDE

Localizar por el selector CSS

Los selectores CSS son patrones de cadenas utilizados para identificar un elemento basado en una combinación de etiquetas, ID, clase y atributos HTML. La localización por el selector CSS 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, ya que puede acceder incluso a aquellos elementos que no tienen identificación o nombre.

Los selectores CSS tienen muchos formatos, pero sólo nos centraremos en los más comunes. 

  • Tag y ID 
  • Tag y clase 
  • Tag y atributo 
  • Texto interno
Al utilizar esta estrategia, en el cuadro de texto «Target» siempre usamos el prefijo  «CSS =» como se muestra en los siguientes ejemplos.

Localizar por CSS selector-Tag y ID 

De nuevo, usaremos el cuadro de texto de correo electrónico de Facebook en este ejemplo. Como puede recordar, tiene un identificador de «correo electrónico» y ya hemos accedido a él en la sección «localización por ID». Esta vez, utilizaremos un selector CSS con ID para acceder a ese mismo elemento.
Sintaxis 
Descripción
css=tag#id
  • Tag = la etiqueta HTML del elemento al que se está accediendo
  • # = el signo hash. Esto siempre debe estar presente cuando se utiliza un selector de CSS con ID
  • id = el identificador del elemento al que se está accediendo

Tenga en cuenta que el ID siempre está precedido por un signo hash (#).

Paso 1. Navegue a www.facebook.com. Utilizando el inspeccionador de elementos (F12), examine el cuadro de texto «correo electrónico o teléfono».

Cómo usar los localizadores en Selenium IDE
Paso 2. Ingrese «css=input#email» en la caja de texto «Target» del Selenium IDE y haga clic en el botón «Find». Selenium IDE debería ser capaz de destacar ese elemento. 
 
How to use Locators in Selenium IDE

Localizar por CSS selector-Tag y Class

La localización mediante el selector CSS mediante una etiqueta HTML y un nombre de clase es similar a usar una etiqueta e ID, pero en este caso, se utiliza un punto (.) en lugar de un signo hash (#).
 
Sintaxis
Descripción
css=tag.class
  • la etiqueta HTML del elemento al que se está accediendo
  • . = el signo de punto. Esto siempre debe estar presente cuando se usa un selector CSS con clase
  • class = la clase del elemento al que se tiene acceso
Paso 1. Ir a la página de Facebook y utilizar el inpeccionador de elementos (F12) para inspeccionar el cuadro de texto»Correo electrónico o teléfono» . Observe que la etiqueta HTML es «input» y su clase es «inputtext».
 
Como usar localizadores en Selenium IDE
Paso 2. En Selemium IDE, introduzca «css=input.inputtext» en el cuadro de texto «Target» y haga clic en «Find». El Selenium IDE debe ser capaz de reconocer el  cuadro de texto «Email or Phone».
 
Como usar localizadores en Selenium IDE
Tenga en cuenta que cuando varios elementos tienen la misma etiqueta y nombre HTML, sólo se reconocerá el primer elemento del código fuente. Usando el inspeccionador de elementos, inspeccione el cuadro de texto de la contraseña en Facebook y note que tiene el mismo nombre que el el cuadro de texto correo electrónico o teléfono.

Como usar localizadores en Selenium IDE

La razón por la que sólo el cuadro de texto «Email or Phone» se resaltó en la ilustración anterior es porque viene primero en el código fuente de la página de Facebook .
 
En la siguiente imagen, vemos en el código HTML de la pagina de Facebook, y podemos observar que el cuadro de texto «Email or Phone» esta primero. 
 
Como usar localizadores en Selenium IDE

Localizar por CSS selector-Tag y Attribute

Esta estrategia utiliza la etiqueta HTML y un atributo específico del elemento al que se tiene acceso.
 
Sintaxis
Descripción
css=tag[attribute=value]
  • tag = la etiqueta HTML del elemento al que se está accediendo
  • [and] = corchetes dentro de los cuales se colocará un atributo específico y su valor correspondiente
  • Attribute = el atributo que se usará. Es recomendable utilizar un atributo exclusivo del elemento como un nombre o un identificador.
  • value = el valor correspondiente del atributo elegido.
Paso 1. Navegue a la página de registro de «Mercury Tours» (http://Newtours.demoaut.com/mercuryregister.php) e inspeccione el cuadro de texto «Last Name«. Tome nota de su etiqueta HTML («Input» en este caso) y su name («lastName«).
 
Como usar localizadores en Selenium IDE
Paso 2. En el Selenium IDE, escriba «css = Input [name = lastName]» en el cuadro de texto «Target» y haga clic en «Find». El Selenium IDE debe poder acceder correctamente al cuadro de texto «Last Name».
 
Como usar localizadores en Selenium IDE
Cuando varios elementos tienen la misma etiqueta y atributo HTML, sólo el primero será reconocido. Este comportamiento es similar a la localización de elementos utilizando selectores CSS con la misma etiqueta y clase.

Localizar por el selector CSS-inner text

Como puede haber notado, las etiquetas HTML rara vez se les da id, name o atributos de clase. Entonces, ¿cómo accedemos a ellos? La respuesta es a través del 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=tag:contains(«inner text«)
  • tag = la etiqueta HTML del elemento al que se está accediendo
  • inner text = El texto interior del elemento
Paso 1. Navegue a la Página principal de «Mercury Tours» (http://Newtours.demoaut.com/) y use el inspeccionador de elementos (F12) para inspeccionar la etiqueta «Password». Tome nota de su etiqueta HTML (que es «Font» en este caso) y note que no tiene ningún atributo class, ID o Name.
 
Como usar localizadores en Selenium IDE
 
Paso 2. Escriba css=Font:contains («Password:») en el cuadro «Target» de Selenium IDE y haga clic en «Find». Selenium IDE debe poder acceder a la etiqueta de la «Password» como se muestra en la imagen de abajo.
 
Como usar localizadores en Selenium IDE
Paso 3. Esta vez, reemplace el texto interno por «Boston» para que su objetivo ahora se convierta en «css=font:contains («Boston»)». Haga clic en «Find». Usted debe notar que la etiqueta «Boston to San Francisco» se resalta. Esto muestra que Selenium IDE puede tener acceso a una etiqueta larga incluso si usted acaba de indicar la primera palabra de su texto interno.
 

Como usar localizadores en Selenium IDE

Localizar por DOM (Document Object Model)

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 página. Si utilizamos este método, nuestro cuadro de texto «Target» siempre comenzará con «DOM = document …»; sin embargo, el prefijo «Dom =» normalmente se elimina porque el Selenium IDE es capaz de interpretar automáticamente cualquier cosa que comience con la palabra clave «Document» para ser un camino dentro del DOM de todos modos.
Hay cuatro maneras básicas de localizar un elemento a través de DOM:
  • Document.getElementById 
  • getElementsByName 
  • dom: Name (sólo se aplica a los elementos de un formulario con name) 
  • dom: index

Localizar por DOM-document.getElementById 

vamos a centrarnos en el primer método-utilizando document.getElementById. La sintaxis sería:

Syntax
Description
document.getElementById(«id del elemento«)
id of the element = Este es el valor del atributo ID del elemento al que se tiene acceso. Este valor debe estar siempre incluido en un par de paréntesis («»).

Paso 1. Utilice la página de Facebook para la demostración. Desplácese hasta ella y utilice el inspeccionador de elementos (F12) para inspeccionar la casilla de verificación «Keep me logged in«. Tome nota de su id.

Localizadores en Selenium IDE
Podemos ver que el ID que deberíamos utilizar es «persistir box».
 
Paso 2. Abra el Selenium IDE y en el cuadro «Target», escriba «document.getElementById(«persistir box»)» y haga clic en «Find». El Seelnium IDE debe ser capaz de localizar la casilla de verificación «persistir box«. Aunque no se puede resaltar el interior de la casilla, el Selenium IDE puede todavía rodear el elemento con un borde de color verde, como se muestra a continuación.
 
How to use Locators in Selenium IDE

Localizar por DOM – getElementsByName

El método getElementById sólo pueden acceder a un elemento por vez, y que es el elemento con el ID que ha especificado. La getElementsByName método es diferente. Recopila un conjunto de elementos que tienen el mismo nombre que ha especificado. Puede acceder a los elementos individuales mediante un índice que comienza en 0.
 
 
getElementById 
  • Obtendrá sólo un elemento para usted. 
  • Ese elemento lleva el ID que especificó dentro de los paréntesis de Document.getElementById ().
 
 
 
 
 
 
 
getElementsByName 
  • Obtendrá una colección de elementos cuyos nombres son todos iguales. 
  • Cada elemento se indiza con un número a partir de 0, al igual que un array 
  • Se especifica qué elemento desea acceder poniendo su número de índice en los corchetes cuadrados de la sintaxis de getElementsByName a continuación.
Sintaxis
Descripción
document.getElementsByName(«name«)[index]
  • name = nombre del elemento definido por su atributo ‘name’
  • index = un entero que indica qué elemento de la matriz de getElementsByName se usará.

Paso 1. Navegue a la Página principal de «Mercury Tours» e inicie sesión usando «Tutorial» como nombre de usuario y contraseña. Firefox debería llevarte a la pantalla del buscador de vuelos.

Paso 2. Usando el inpeccionador de elementos, inspeccione los tres radio button en la parte inferior de la página (Economy class, Business class y radio button de first class). Note que todos tienen el mismo nombre que es «servClass».

Como usar localizadores en selenium ide
Paso 3. Vamos a acceder primero al radio button «Economy class«. De todos estos tres radio button, este elemento viene primero, por lo que tiene un índice de 0. En el Selenium IDE, escriba «Document.getElementsByName («servClass») [0]» y haga clic en el botón «Find». Selenium IDE debe ser capaz de identificar correctamente el radio button «Economy class».
 
Como usar localizadores en Selenium IDE
Paso 4. Cambie el número de índice a 1 para que su «Target» ahora se convierta en document.getElementsByName («servClass») [1]. Haga clic en el botón «Find», y el Selenium IDE debería ser capaz de resaltar el botón de la «Business class«, como se muestra a continuación.
 

How to use Locators in Selenium IDE

Localizar por DOM-Dom: name

Como se mencionó anteriormente, este método sólo se aplicará si el elemento al que está accediendo está contenido dentro de un formulario con nombre.
 
Sintaxis
Descripción
document.forms[«nombre del form«].elements[«nombre del elemento«]
  • nombre del formulario = valor del atributo name de la etiqueta de formulario que contiene el elemento al que desea acceder
  • nombre del elemento = valor del atributo name del elemento al que se desea acceder

Paso 1. Navegue a la Página principal de «Mercury Tours» (http://demo.guru99.com/selenium/newtours/) y use el inspeccionador de elementos (F12) para inspeccionar el cuadro de texto «User Name». Observe que está contenida en un formulario llamado «home».

 
Localizadores en Selenium IDE
Paso 2. En Selenium IDE, escriba «document.forms [«home «].elements [«userName «]» y haga clic en el botón «Find». Selenium IDE debe poder acceder al elemento con éxito.
 
Como usar localizadores en Selenium IDE

Localizar por DOM – dom:index

Este método se aplica incluso cuando el elemento no está dentro de un formulario con nombre porque utiliza el índice del formulario y no su nombre.
 
Sintaxis
Descripción
document.forms[index del formulario].elements[index del elemento]
  • index del formulario = el número de índice (comenzando en 0) del formulario con respecto a toda la página
  • index del elemento = el número de índice (comenzando en 0) del elemento con respecto a todo el formulario que lo contiene

Tendremos acceso al cuadro de texto «Phone» dentro de la página de registro de «Mercury Tours». El formulario en esa página no tiene ningún nombre y atributo ID, por lo que esto será un buen ejemplo.

 
Paso 1. Navegue a la página de registro de «Mercury Tours» e inspeccione el cuadro de texto del «Phone». Observe que el formulario que lo contiene no tiene ningún atributo ID y Name.
 
Paso 2. Escriba «document.forms [0].elements [3]» en el cuadro «Target» de Selenium IDE y haga clic en el botón «Find». Selenium IDE debe poder acceder correctamente al cuadro de texto «Phone».
 
Como usar localizadores en Selenium IDE
Paso 3. Alternativamente, puede utilizar el nombre del elemento en lugar de su índice y obtener el mismo resultado. Escriba «document.forms [0].elements [«Phone»]» en el cuadro «Target» de Selenium IDE. El cuadro de texto «Phone» aún debe resaltarse.
 
Como usar localizadores en Selenium IDE

Localizar por XPath 

XPath es el idioma utilizado para localizar nodos XML (Extensible Markup Language). Como se puede pensar en HTML como una implementación de XML, también podemos utilizar XPath en la localización de elementos HTML.
 
Ventaja: puede acceder a casi cualquier elemento, incluso aquellos sin atributos de clase, nombre o ID.
 
Desventaja: es el método más complicado de identificar elementos debido a muchas reglas y consideraciones diferentes.
 
Afortunadamente, el inspeccionador de elementos o el Firebug puede generar automáticamente localizadores de XPath. 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 principal de Mercury Tours y use el inspeccionador de elementos o el «Firebug» para inspeccionar el rectángulo anaranjado a la derecha de la caja amarilla «links». Consulte la imagen de abajo.
 
Como usar localizadores en Selenium IDE
Paso 2. Haga clic con el botón derecho en el código HTML del elemento y, a continuación, seleccione la opción «copiar XPath».
 
Paso 3. En Selenium IDE, escriba una barra diagonal «/» en el cuadro «Target» y pegue el XPath que copiamos en el paso anterior. La entrada en el cuadro de destino debe comenzar ahora con dos barras diagonales de avance «//».
 
Como usar localizadores en Selenium IDE
Paso 4. Haga clic en el botón «Find». Selenium IDE debe ser capaz de resaltar la caja anaranjada como se muestra a continuación.
 
Como usar localizadores en Selenium IDE

Resumen de Localizadores en Selenium IDE

Sintaxis para el uso del localizador
Metodo
Sintaxis «Target»
Ejemplo
 IDid= id del elementoid=email
 Namename=name del elementoname=username
Name Using Filtersname=name del elementofilter=valor del filtroname=tripType value=oneway
 Link Textlink=texto del linklink=REGISTER
Tag and IDcss=tag#idcss=input#email
Tag and Classcss=tag.classcss=input.inputtext
Tag and Attributecss=tag[attribute=value]css=input[name=lastName]
Tag, Class, and Attributecss=tag.class[attribute=value]css=input.inputtext[tabindex=1]
 Puedes continuar con nuestros tutoriales de Selenium IDE o Selenium WebDriver

Compartir artículo

6 Comments

    • julianlujan1

      Responder

      Hola Eva, posiblemente sea la causa a tu problema ya que al lanzar la prueba sale el siguiente mensaje:

      Warning implicit locators are deprecated, please change the locator to id=document.forms[«home «].elements[«userName»]

      Por lo visto, Selenium IDE a cambiado bastante y localizar elementos implícitamente esta en desuso .

  1. Jorge

    Responder

    Hola

    Tengo un problema, quiero hacer que en el search de un picklist se ingrese un valor pero el id es dinamico (siempre cambia) y al poner el comando type con la clase tampoco me permite ingresar el valor.

Leave Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.