+54 911 66509220

Noticias

Noticias
31 Mar 2016

Selenium WebDriver y buscar elementos en la página web

/
Creado por
/
Comentarios0

La esencia de Selenium WebDriver es interactuar con los elementos de una página web.

Selenium WebDriver y find_elementPara eso, primero es necesario indicarle a selenium que busque el elemento en la página en la que esté posicionado (ver post anterior para navegación en Selenium WebDriver) e indicarle cómo buscar dicho elemento.
Nunca se podrá interactuar con un elemento sin identificarlo previamente. 

Selenium WebDriver ofrece dos formas de buscar elementos. Una es singular, es decir encontrar un solo elementos y la otra es buscar varios elementos obteniendo una lista.
Vamos a centrarnos primero en la búsqueda de un solo elemento.

Buscar elementos (find_element)

La forma de indicarle a selenium cómo encontrar un elemento es a través del método (instrucción) find_element.

elemento = browser.find_element(:id, “valor-del-id”)

Vamos a descomponer la instrucción para entender que significa cada parte de la misma:

En una variable llamada elemento vamos a guardar el objeto que devuelve la instrucción find_element. Dicho objeto es de la clase Selenium::WebDriver::Element

:id indica que debe buscar un elemento cuyo atributo id tenga el valor “valor-del-id”

Pero ¿qué significa elemento, atributo, valor?

Para entender un poco de que estamos hablando, vamos a entender un poco lo que es un documento html.

Selenium WebDriverSi en cualquier página web hacemos click derecho ( o accedemos el menú contextual) vamos a ver una opción de dice “ver código fuente” o similar. Haciendo click en dicha opción vamos a ver el documento html. Html es un lenguaje de marcado de hipertexto. En palabras sencillas (muy sencillas pero que nos sirven para el caso) se trata de un archivo donde toda la información de la página está definida con etiquetas. Los navegadores interpretan este documentos y “dibujan” en la pantalla el significado del mismo donde cada elemento se dibuja según los atributos/características definidas en esas etiquetas. Un documento html tiene muchísimos tags o etiquetas que le indican al navegador de que elementos, con que atributos y en que orden está compuesta la página web.

Las etiquetas (tags) está determinadas por < y > con una de apertura y una de cierre (por lo general).
Existen diversas etiquetas para distintos tipos de elementos donde hay una <etiqueta> de apertura y una </etiqueta> de cierre. Observar que la segunda posee una barra antes del nombre de la etiqueta y eso indica que se trata de la etiqueta de cierre. Por decir algunas:

<html></html>

<head></head>

<body><body>

<form></form>

<button></button>

<input/>

<table><tr><td></td></tr></table>


Curso de Selenium WebDriver

El curso online de ​​“Automatización de pruebas con Selenium WebDriver en Ruby” esta diseñado para adquirir de manera gradual e incremental, los fundamentos de la automatización de pruebas funcionales de aplicaciones web bajo la modalidad de scripting, explicando las características principales del lenguaje de programación utilizado (Ruby), permitiendo confeccionar scripts de automatización robustos y altamente mantenibles, dos de los aspectos más importantes en la automatización de pruebas. ¿Quieres conocer más detalles? clic AQUI


Como se puede ver en el último ejemplo, las etiquetas pueden ir anidadas siempre manteniendo un orden correcto de apertura y cierre.

En fin, lo importante aquí es que esas etiquetas, como absolutamente todas las etiquetas que pueden existir en un documento html pueden tener atributos (o no).
Los atributos son datos que pueden existir dentro de una etiqueta como por ejemplo un identificador “id”, el atributo “name”, el atributo “class” y muchos otros mas.

Por ejemplo, el siguiente campo de texto tiene muchos atributos:

<input type=”text” class=”js-site-search-focus js-site-search-field is-clearable chromeless-input” data-hotkey=”s” name=”q” placeholder=”Search” aria-label=”Search this repository” data-global-scope-placeholder=”Search GitHub” data-repo-scope-placeholder=”Search” tabindex=”1″ autocapitalize=”off”>

Aunque Selenium WebDriver no permite buscar a través de todos los atributos explícitos sino sólo a través de algunos de ellos como id, name y class.

Por ejemplo, para este campo de texto (<input type=”text”),dados los atributos que posee, se podría buscar de las siguientes maneras:

Por atributo name:


browser.find_element(:name, “q”)

Por atributo class:

browser.find_element(:class, “js-site-search-focus”)

Si tuviese un atributo id también se podría buscar aunque éste no es el caso.

Además de estos atributos, selenium ofrece otras características a indicar en el criterio de búsqueda (lo que está entre paréntesis del método find_element). El orden que se presenta a continuación va desde lo mas rápido en encontrar un elemento (más eficiente) a lo que mas tarda en encontrar un elemento (menos eficiente)

:id
:class_name o :class
:name
:link_text
:partial_link_text
:css
:xpath

Los tres primeros (id, class, name) son atributos que se ven en el código html. El criterio link_text significa el texto que tiene un link. En el caso de partial_link_text significa que también puede buscar por una porción del texto de un link. El texto de un link es lo que se ve efectivamente como un link en una página web

En el caso de css y xpath, se trata de rutas de acceso a los elementos dentro de la jerarquia de los mismos en el documento. En el caso de css ver ésta referencia y en el caso de xpath ver esta referencia

No veremos css y xpath dado que su sintaxis no es tan intuitiva y es agregar complejidad a los tutoriales. Además, son las formas de buscar elementos menos eficientes y a nuestro criterio más engorrosas a la hora de trabajar. Al tratarse de una jerarquía (posición de los elementos) en el documento, si se modifica (agrega, quita) un elemento dentro de la ruta el resultado posiblemente se verá afectado

¿Cuál es la diferencia entre find_element y find_elements?

La diferencia está en que find_element buscará un solo elemento según el criterio de búsqueda indicado. Si en el documento html existen más de un elemento que coincide con dicha búsqueda, Selenium WebDriver nos devolverá el primero que encuentra en el documento.
En el caso de find_elements, Selenium WebDriver nos dará una lista de todos los elementos que coinciden con el criterio de búsqueda dado, generalmente se utilizan los criterios class y tag_name en el find_elements.

Esa lista que devuelve find_elements se trata de un tipo de dato llamado Array en Ruby (en otros lenguajes se maneja el mismo concepto).

En el próximo post vamos a conocer las operaciones que se pueden realizar con un elemento.

Publicaciones relacionadas

SELENIUM WEBDRIVER – PRIMEROS COMANDOS
SELENIUM WEBDRIVER Y RUBY, PASOS PARA LA INSTALACIÓN
SELENIUM WEBDRIVER, BREVE INTRODUCCIÓN

 

Deja un comentario

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

*

* Copy This Password *

* Type Or Paste Password Here *

12.602 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>