Blog
Aprender las diferentes funciones para localizar elementos en una página web usando Selenium
Aprender a localizar elementos por ID, por nombre, por XPATH, por texto en su enlace, etc.
Hay varias estrategias para localizar elementos en una página web. Puedes utilizar el más apropiado para su caso. Selenium proporciona los siguientes métodos para localizar elementos en una página:
- find_element_by_id
- find_element_by_name
- find_element_by_xpath
- find_element_by_link_text
- find_element_by_partial_link_text
- find_element_by_tag_name
- find_element_by_class_name
- find_element_by_css_selector
Para encontrar múltiples elementos (estos métodos devolverán una lista):
- find_elements_by_name
- find_elements_by_xpath
- find_elements_by_link_text
- find_elements_by_partial_link_text
- find_elements_by_tag_name
- find_elements_by_class_name
- find_elements_by_css_selector
Aparte de los métodos públicos mencionados anteriormente, existen dos métodos privados que pueden ser útiles con localizadores en objetos de página. Estos son los dos métodos privados: find_element y find_elements.
Localización por Id con Selenium
Utilícelo cuando conozca el atributo id de un elemento. Con esta estrategia, se devolverá el primer elemento con el valor del atributo id correspondiente a la ubicación. Si ningún elemento tiene un atributo id que coincida, se mostrará NoSuchElementException.
Por ejemplo si vamos a la web de login de facebook : https://www.facebook.com podemos ver un código muy parecido a este:
<html> <body> <form id="loginForm"> <input name="username" type="text" /> <input name="password" type="password" /> <input name="continue" type="submit" value="Login" /> </form> </body> <html>
El elemento de formulario puede ubicarse con esta línea de comando:
login_form = driver.find_element_by_id('loginForm')
Localización por nombre con Selenium
Utilícelo cuando conozca el atributo name de un elemento. Con esta estrategia, se devolverá el primer elemento con el valor del atributo name correspondiente a la ubicación. Si ningún elemento tiene un atributo de nombre que coincida, se mostrará NoSuchElementException.
Por ejemplo, considere esta página como fuente:
<html> <body> <form id="loginForm"> <input name="username" type="text" /> <input name="password" type="password" /> <input name="continue" type="submit" value="Login" /> <input name="continue" type="button" value="Clear" /> </form> </body> <html>
Los elementos de nombre de usuario y contraseña pueden ser localizados así:
username = driver.find_element_by_name('username')
password = driver.find_element_by_name('password')
Esto le dará al botón “Iniciar sesión” tal y como ocurre antes del botón “Borrar”:
continue = driver.find_element_by_name('continue')
Localización por XPath con Selenium
XPath es el lenguaje utilizado para localizar nodos en un documento XML. Como HTML puede ser una implementación de XML (XHTML), los usuarios de Selenium pueden aprovechar este potente lenguaje para dirigir elementos en sus aplicaciones web. XPath se extiende más allá (así como el apoyo) de los métodos simples de localización por los atributos id o nombre, y abre todo tipo de nuevas posibilidades como la localización de la tercera casilla de verificación en la página.
Una de las principales razones para usar XPath es cuando no tiene un identificador o atributo de nombre adecuado para el elemento que desea localizar. Puede utilizar XPath para localizar el elemento en términos absolutos (no se recomienda) o relativos a un elemento que tenga un atributo id o name. Los localizadores XPath también se pueden utilizar para especificar elementos a través de atributos que no sean id y nombre.
Los XPath absolutos contienen la ubicación de todos los elementos desde la raíz (html) y como resultado es probable que fallen con sólo el menor ajuste a la aplicación. Al buscar un elemento cercano con un atributo id o nombre (idealmente un elemento padre) se puede localizar el elemento destino en función de la relación. Esto es mucho menos probable que cambie y puede hacer que sus pruebas sean más robustas.
Por ejemplo, considere esta página como fuente:
<html> <body> <form id="loginForm"> <input name="username" type="text" /> <input name="password" type="password" /> <input name="continue" type="submit" value="Login" /> <input name="continue" type="button" value="Clear" /> </form> </body> <html>
Los elementos pueden ser encontrados con éstas líneas de código:
login_form = driver.find_element_by_xpath("/html/body/form[1]")
login_form = driver.find_element_by_xpath("//form[1]")
login_form = driver.find_element_by_xpath("//form[@id='loginForm']")
- Ruta absoluta (se rompería si el HTML se modificara sólo ligeramente)
- Primer elemento de formulario en el HTML
- El elemento del formulario con un atributo llamado id y el valor loginForm
El elemento de nombre de usuario puede ser localizado así:
username = driver.find_element_by_xpath("//form[input/@name='username']")
username = driver.find_element_by_xpath("//form[@id='loginForm']/input[1]")
username = driver.find_element_by_xpath("//input[@name='username']")
- Primer elemento de formulario con un elemento hijo de entrada con nombre de atributo y nombre de usuario del valor
- Primer elemento hijo de entrada del elemento formulario con el atributo identificador y el valor loginForm
- Primer elemento de entrada con un atributo llamado’ name’ y el valor nombre de usuario
El elemento de botón “Borrar” se encuentra así:
clear_button = driver.find_element_by_xpath("//input[@name='continue'][@type='button']")
clear_button = driver.find_element_by_xpath("//form[@id='loginForm']/input[4]")
- Entrada con nombre de atributo nombre y el valor continuar y atributo tipo nombre y el botón de valor
- Elemento hijo de la cuarta entrada del elemento de formulario con nombre de atributo id y valor loginForm
Estos ejemplos cubren algunos aspectos básicos, pero para aprender más, se recomiendan las siguientes referencias:
- http://geneura.ugr.es/~victor/cursillos/xml/XPath/
- https://www.adictosaltrabajo.com/tutoriales/teoria-xpath/
Localizando Hipervínculos por Texto de Enlace con Selenium
Utilícelo cuando sepa el texto del enlace utilizado en una etiqueta de anclaje. Con esta estrategia, se devolverá el primer elemento con el valor de texto del enlace correspondiente a la ubicación. Si ningún elemento tiene un atributo de texto de enlace que coincida, se mostrará NoSuchElementException.
Por ejemplo, considere esta página como fuente:
<html> <body> <p>¿Seguro que quiere hacer esto?</p> <a href="continue.html">Continuar</a> <a href="cancel.html">Cancelar</a> </body> <html>
El enlace continue.html puede ser localizado así:
continue_link = driver.find_element_by_link_text('Continuar')
continue_link = driver.find_element_by_partial_link_text('Conti')
Elementos de localización por nombre de etiqueta con Selenium
Utilícelo cuando desee localizar un elemento por nombre de etiqueta. Con esta estrategia se devolverá el primer elemento con el nombre de la etiqueta. Si ningún elemento tiene un nombre de etiqueta que coincida, se mostrará una excepción NoSuchElementException.
Por ejemplo, considere esta página como fuente:
<html> <body> <h1>Bienvenido</h1> <p>El contenido va aqui.</p> </body> <html>
El elemento de encabezamiento (h1) se puede situar así:
heading1 = driver.find_element_by_tag_name('h1')
Elementos de localización por nombre de clase con Selenium
Utilícelo cuando desee localizar un elemento por nombre de atributo de clase. Con esta estrategia, se devolverá el primer elemento con el nombre del atributo de clase correspondiente. Si ningún elemento tiene un nombre de atributo de clase que coincida, se mostrará NoSuchElementException.
Por ejemplo, considere esta página como fuente:
<html> <body> <p class="content">El contenido va aqui.</p> </body> <html>
El elemento “p” se puede situar así:
content = driver. find_element_by_class_name (' content')
Elementos de localización por selectores CSS con Selenium
Utilícelo cuando desee localizar un elemento mediante la sintaxis del selector CSS. Con esta estrategia se devuelve el primer elemento con el selector CSS correspondiente. Si ningún elemento tiene un selector CSS que coincida, se aumentará una excepción NoSuchElementException.
Por ejemplo, considere esta página como fuente:
<html> <body> <p class="content">El contenido va aqui</p> </body> <html>
El elemento “p” se puede situar así:
content = driver. find_element_by_css_selector (' p. content')
➡ Con conocimientos en navegación y localización de elementos con Selenium tenemos un amplio set de herramientas para aplicar en nuestros programas de automatización. Aprende mucho mas con nuestro curso de Selenium con Python:
[…] Localizando elementos […]
[…] la siguiente lección -> Localizando elementos Te decimos como ir localizando elementos, existen muchas formas de hacerlo y las conocerás todas, […]