SELENIUM

Medellín, Antioquía
DANIEL CORREA – ORLANDO RUEDA
Colombia

1
 GUÍA SELENIUM
A continuación, se ahondará nuestra investigación en el mundo de Selenium, pero como
primer contacto. Nos surgen ciertas preguntas que serán resueltas en el desarrollo de
este documento.
¿Qué es Selenium?
Selenium es un framework1 para la prueba de software que en resumidas cuentas nos
permite automatizar los navegadores. Selenium cuenta con el apoyo de algunos de los
proveedores de navegadores más grandes que han tomado (o están tomando) medidas
para hacer que Selenium sea una parte nativa de su navegador. También es la tecnología
principal en innumerables otras herramientas de automatización del navegador, API y
marcos.
Fuente: https://es.wikipedia.org/wiki/Selenium
¿Qué opciones tiene Selenium a la hora de automatizar?
Selenium nos provee de tres opciones a la hora de automatizar:
• Selenium IDE: Es un entorno de desarrollo
integrado para scripts de Selenium. Está
implementado como una extensión de Firefox, y le
permite grabar, editar y depurar pruebas. Selenium
IDE no es solo una herramienta de grabación: es un
IDE completo.

• Selenium RC: Es una herramienta de prueba que le

permite escribir pruebas de interfaz de usuario de la aplicación web
automatizada en cualquier lenguaje de programación contra cualquier sitio web
HTTP utilizando cualquier navegador compatible con JavaScript. viene en dos
partes. Un servidor que inicia y elimina automáticamente los navegadores, y
actúa como un proxy HTTP para las solicitudes web de ellos. Y por último una
biblioteca de clientes para su idioma de computadora favorito.
• Selenium Web Driver: El mayor cambio en Selenium recientemente ha sido la
inclusión de la API de Web Driver. Conducir un navegador de forma nativa como
1
Framework, https://es.wikipedia.org/wiki/Framework

2
 usuario, ya sea localmente o en una máquina remota que utiliza el Servidor de
Selenium, significa un avance en cuanto a la automatización del navegador.

Selenium Web Driver encaja en la misma función que RC, y ha incorporado los
enlaces 1.x originales. Se refiere tanto a los enlaces de idioma como a las
implementaciones del código de control del navegador individual. Esto se conoce
comúnmente como solo "Web Driver" o algunas veces como Selenium 2.
Web Driver es el nombre de la interfaz clave contra la cual las pruebas deben
escribirse en Java, las clases de implementación que uno debe usar se enumeran
a continuación:
ChromeDriver, EventFiringWebDriver, FirefoxDriver, HtmlUnitDriver, InternetExpl
orerDriver, PhantomJSDriver, RemoteWebDriver, SafariDriver.

Por comodidad, se utilizará el Driver de Google Chrome para un ejemplo práctico

que se desarrollará de forma posterior, por tanto, se procede a realizar la
descarga e instalación de este Driver. (Tener en cuenta, que debe descargar
la última versión del Driver, en este momento, es la 2.41)

En el siguiente link podrá descargar el Chrome Driver:

https://chromedriver.storage.googleapis.com/index.html?path=2.41/
Luego de hacer clic, en el link, deberá aparecer una página como la siguiente:

3
Paso 1. Para usuarios de Windows, seleccionar la opción Chromedriver win32.zip, para
usuarios Linux, seleccionar Chromedriver linux4.zip, así mismo, para Usuarios Mac,
deben seleccionar Chromedriver mac64.zip

Paso 2. Abrir el .zip descargado.

Paso 3. Extraer en la ubicación que desee el contenido del .zip

4
Luego de obtener el driver de Chrome, procedemos a adentrarnos en el mundo de la
automatización de la mano de Selenium, y para eso es muy importante tener en cuenta
conceptos claves que nos ayudarán a comprender mejor el funcionamiento de una
automatización.
Hemos estado hablando de Driver’s, pero no hemos hecho referencia a qué significan, ni
qué hacen, por tanto,
¿Qué es un Driver?
Cuando se refieran a driver (Representado por la interfaz WebDriver) se está haciendo
referencia al soporte nativo para un navegador (Chrome, Firefox, Safari, etc.) el cual nos
permite realizar llamadas directas a él para la automatización.

Teniendo en cuenta esto, ahora, cómo interactuar con la página web, podrá ser una de
inquietudes, por tanto,
¿Qué es un WebElement?
Representa un elemento HTML. En general, todas las operaciones interesantes
relacionadas con la interacción con una página se realizarán a través de esta interfaz.
Cabe mencionar que hay otros tipos de interfaces según lo requerido.
¿Cómo localizar un elemento HTML de la página web?
Además de etiquetas y atributos, HTML define el término elemento para referirse a las
partes que componen los documentos HTML.
Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en
realidad un elemento HTML es mucho más que una etiqueta, ya que está formado por:

5
 • Una etiqueta de apertura.
• Cero o más atributos.
• Texto encerrado por la etiqueta.
• Una etiqueta de cierre.
Si bien es cierto que las páginas web tienen un sin número de etiquetas, es nuestra tarea
saber identificar cual atributo puede ser útil para seleccionar un elemento en específico.
Algunos atributos son los siguientes:
• Id
• Name
• Class
• TagName
• Placeholder
• Value
En muchas ocasiones se nos hace realmente complicado seleccionar un elemento en
particular de una página debido a ciertos factores, como, por ejemplo, que en muchos
casos los elementos HTML, no tienen id único, no tienen name, hasta incluso, más de un
elemento tiene la misma clase.
A partir de esta problemática, surgen un par de soluciones que pueden ayudarnos de
gran manera a la hora encontrar un elemento dentro de la página web, Como lo son:

• XPATH
• CSS SELECTOR

¿Qué es el XPATH?
XPath se define como ruta XML. Es una sintaxis o lenguaje para encontrar cualquier
elemento en la página web utilizando la expresión de ruta XML. XPath se usa para buscar

6
la ubicación de cualquier elemento en una página web utilizando la estructura HTML DOM.
El formato básico de XPath se explica a continuación con una captura de pantalla.

Idealmente, esta es la estructura de un XPath, donde:

• //: selecciona el nodo actual.
• Tagname: Tagname del nodo particular.
• @: Seleccionar atributo.
• Atributo: nombre de atributo del nodo.
• Valor: valor del atributo.
Sin embargo, en ocasiones podremos encontrar combinaciones de atributos con el
objetivo principal de enfocar un elemento en particular.
¿Cuántos tipos de XPath existen?
Existen dos tipos de XPath,
XPath absoluto: Es la forma directa de encontrar el elemento, pero la desventaja del
XPath absoluto es que, si se realizan cambios en la ruta del elemento, ese XPath falla.

7
• XPath relativo: Para XPath relativo, la ruta comienza desde el medio de la
estructura HTML DOM. Comienza con la barra diagonal doble (//), lo que significa
que puede buscar el elemento en cualquier lugar de la página web.

8
 Para más información visite:
https://www.guru99.com/xpath-selenium.html

¿Qué es el Css Selector?

Un selector de CSS es una combinación de un elemento
selector y un valor que identifica el elemento web dentro
de una página web. Son representaciones de cadenas de
etiquetas HTML, atributos, Id y Clase. Como tales, son
patrones que coinciden con los elementos en un árbol y son
una de las varias tecnologías que se pueden usar para
seleccionar nodos en un documento XML.
Para más información visitar:
https://saucelabs.com/resources/articles/selenium-tips-css-selectors

¿Cómo encontrar un elemento HTML en la página web?

Teniendo claro cómo encontrar un elemento HTML, en la página web, solo nos resta como
utilizarlo, es decir, que acciones nos provee Selenium localizar un elemento.
Uno de nuestros objetivos principales como automatizadores es saber localizar
elementos HTML, para ello existe un método que es muy útil,
• El método findElement, se encargar de buscar un elemento en la página.

Este método recibe el indicador por el cual se va a buscar el elemento en la página y

retorna un elemento de tipo WebElement – WebDriver para su posterior uso. En pocas

9
palabras, debemos pasarle el localizador que previamente se explicó, puede ser por
class, por id, por XPath, etc. Se implementa de la siguiente forma.

¿Cuáles son las Acciones que provee Selenium para interactuar con la página
web?
Dentro del mundo de Selenium, existen métodos para interactuar con la página web los
cuales son muy importantes a la hora de automatizar. Como se mencionó con
anterioridad, los elementos HTML se definen como WebElement, el cual posee métodos
que se engloban dentro del tema de las acciones como, por ejemplo:
• El método clic, que hace referencia a hacer clic en un elemento de la página.

• El método clear, que hace referencia a limpiar una caja de texto.

• El método SendKeys(), que sirve para enviar texto a cajas de texto como inputs
y textarea.

• El método getText(), este método obtendrá el texto interno visible (es decir, no
oculto por CSS) del elemento. Esto no acepta nada como un parámetro, pero
devuelve un valor de cadena.

10
 • El método getAttribute(), este método obtiene el valor del atributo dado del
elemento. Esto acepta la cadena como parámetro y devuelve un valor de cadena.

Estos son algunos métodos que son realmente útiles a la hora de realizar una
automatización con página web, existen muchos otros métodos que engloban otro tipo
de funcionalidades.
• ¿Qué tiempos de espera ofrece Selenium?
Las esperas en Selenium WebDriver son muy útiles para solucionar o evitar los
frecuentes errores presentados por Selenium (no such element exception, Element not
visible Exception, Element is not clickable at point) entre otras frecuentes excepciones.
Supongamos que estamos tratando de encontrar un elemento que tiene algún
“ExpectedConditions” (espera explícita), si el elemento no está situado dentro del marco
de tiempo definido por la espera explícita (10 segundos), se utilizará el marco de tiempo
definido por la espera implícita (20 segundos) antes de lanzar un
“ElementNotVisibleException”.
Existen dos tipos de esperas,
• Implicit Wait – se utiliza para establecer el tiempo de espera predeterminado en
todo el programa.
• Explicit Wait – se utiliza para establecer el tiempo de espera para solo una
instancia en particular.
En resumidas cuentas… Implicit Wait ejecutará un tiempo de espera sin que se cumpla
alguna condición. Sí o sí ejecuta el tiempo de espera. Explicit Wait ejecutara un tiempo
de espera dependiendo de la condición que se establezca.

11
¿Qué son las esperas implícitas?
• Es más sencillo de codificar que las esperas explícitas (Explicit Wait).
• Normalmente se declara en la parte de instanciación del código.
• Sólo necesitará un paquete adicional para importar.
Implicit Wait le dirá al WebDriver que espere cierta cantidad de tiempo antes de que
lance una excepción de “No Such Element Exception”. La configuración predeterminada
es 0. Una vez que configuremos el tiempo, el WebDriver esperará ese tiempo antes de
lanzar una excepción.
En el ejemplo siguiente hemos declarado una Implicit Wait con el marco de tiempo de 10
segundos. Esto significa que, si el elemento no está situado en la página web dentro de
ese marco de tiempo, se producirá una excepción.
Para declarar la espera implícita:

¿Qué son las esperas explicitas?

• Explicit Wait se utiliza para decirle al WebDriver que espere ciertas condiciones
(Expected Conditions) o el tiempo máximo excedido antes de lanzar una
excepción “ElementNotVisibleException”.
• Explicit Wait es un tipo inteligente de espera, pero sólo se puede aplicar para los
elementos especificados. La espera explícita ofrece mejores opciones que la de
una espera implícita, ya que esperará los elementos Ajax cargados
dinámicamente.
• Una vez declarada la espera explícita tenemos que utilizar “ExpectedCondtions”
o podemos configurar con qué frecuencia queremos comprobar la condición
con Fluent Wait.

12
Ahora ya estamos listo para comenzar a realizar nuestra primera automatización. Pero
primero creemos un nuevo proyecto.

Paso 1. Teniendo el Selenium IDE abierto, procedemos a crear un nuevo proyecto.

Paso 2. Escribimos Maven, y presionamos Next.

13
Paso 3. Verificamos que el apartado de Location se encuentre en la carpeta en la que
queremos crear nuestro nuevo proyecto, y presionamos Next.

Paso 4. Debemos seleccionar este tipo de archetype, en Group id validamos que esté
‘org.maven.archetypes’, y en Artifact Id debe estar ‘maven-archetype-quickstart’ y la
versión es la ‘1.1’ y presionamos Next.

14
Paso 5. Debemos llenar los campos Group Id que se refiere al dominio, en este caso,
‘com.accenture’, y el Artifact Id se refiere al nombre que le pondremos a la carpeta
del proyecto. Así mismo Versión, hace referencia a la versión del proyecto que vamos a
desarrollar, luego de llenar estos campos damos clic en Finish.

Paso 6. A continuación debemos ver lo siguiente,

15
Sí por alguna razón tenemos errores, podemos probar con lo siguiente.
Clic derecho, en la raíz del proyecto, y deberían ver lo siguiente,

Procedemos a acceder a Update Proyect… deberían ver lo siguiente,

16
Debemos seleccionar el proyecto actual, En este caso ‘SeleniumCap’, de darle clic en
‘Force Update of Snapshot/Realeases’ y proceder a darle clic en OK.

En la parte inferior derecha aparecerá un loading, el cual estará importando cada

una de las dependencias que quizá nos hacen falta.

17
Paso 7. Luego procederemos a acceder al proyecto, e iremos al POM.xml, en donde
encontrarán configuraciones que necesita el proyecto para poder realizar la
automatización, se deberá ver lo siguiente:

Por defecto, tendremos ciertas configuraciones por defecto. En estos momentos

podemos decir que la única dependencia que se encuentra importada ‘JUnit’, es el
Marco de pruebas unitarias de Java.

18
Luego, para comenzar a automatizar con Selenium, que es de nuestro interés en estos
momentos, necesitamos importar un par de dependencias, y un plugin. Que se verán a
continuación:

En primera instancia, vemos la dependencia de Surefire, que ayuda a Maven a

identificar las pruebas que van a ejecutarse.
Así mismo, tenemos la dependencia de Selenium, que automatiza los navegadores, y
por último, se tiene un plugin que es la versión del JDK que compilará el proyecto.
Anexar estas configuraciones al POM.xml, que tenemos por defecto, esperar
hasta que se descarguen las dependencias.
Nota. Sí por alguna razón sale un error, aplicar nuevamente el Paso 6, de la
sección anterior.
Por consiguiente, nos dirigimos a carpeta src/main/java y al paquete
com.accenture.SeleniumCap, y procedemos a abrir la clase App.java.

19
Debe aparecernos lo siguiente:

Qué es un código que nos entrega por defecto el IDE cuando creamos un nuevo
proyecto. Que lo que hace es imprimir en consola “¡Hello World!”.

Automatización 1. Para comenzar a realizar nuestra primera automatización, que

consistirá en abrir la página de Google, buscar “Medellín”, entramos a la página de
Wikipedia y capturamos el título, lo imprimimos en consola. Luego, debemos realizar un
condicional para evaluar que el Texto capturado sí sea Igual a Medellín, de forma
posterior se debe escribir en un input dentro de la página de Wikipedia, el input se
encuentra en la parte superior derecha y luego, limpiar esta caja de texto.

20
 AUTOMATIZACIÓN I – UTILIZANDO MAVEN
Paso 1. Declaramos el driver de tipo WebDriver y definimos las propiedades que tendrá
el driver.

Con System.setProperty, estamos indicando qué vamos a trabajar con el driver de

Chrome, y le estamos indicando la ruta donde se encuentra el Chrome driver, pero, como
nuestro chromedriver.exe se encuentra en la raíz de nuestro proyecto, es por ello que
solo se coloca “chromedriver.exe”.

Luego, definimos que trabajaremos con el driver de Chrome, realizando las instancia de
ChromeDriver(). Así mismo, maximizamos el navegador de Google Chrome, con las
propiedades driver.manage().windows().maximize().
Luego debemos decirle al driver en qué url debe abrir por defecto, esto se realiza con
driver.get(“www.google.com.co”), con esto le decimos que debe abrir en la página de

21
inicio de Google. Y, por último, no menos importante, debemos ponerle un tiempo de
espera implícito
driver.manage().timeouts().implicitlyWait(50, TimeUnit.SECONDS); // Tiempo de espera implicito.

, antes de comenzar la automatización, esto con el objetivo de que espere antes de

ejecutar cualquier acción en la página web o hasta que la página este completamente
cargada.
Estando en la página de Google, y según lo que nos dicta la automatización debemos
buscar la Palabra Medellín.

Para ello debemos definir lo siguiente,

Como podemos observar, se declara una variable de tipo WebElement llamada search,
que nos servirá para localizar con el método de findElement mencionado con
anterioridad, el primer elemento HTML de nuestra página, que en este caso es la caja de
texto para escribir “Medellín”.

22
Luego de mapearlo, debemos implementar el método SendKeys, qué nos servirá para
enviar texto hacia el input de la página de Google, así mismo, se puede observar que al
final de “Medellín”, está un símbolo no muy particular “\n”, que la función que cumple es
indicarle al driver que debe darle Enter, y realizar la búsqueda.

Una vez en esta página debemos ingresar al Link que proporciona Wikipedia, para ello
debemos mapear ese elemento HTML de la página web, esto lo hacemos en la siguiente
línea,

En este caso utilizamos el método clic, que se mencionó con anterioridad.

Nuestra automatización ya debería estar en la página de Wikipedia,

23
Por consiguiente, debemos capturar el título, en este caso “Medellín”. Para ello
debemos localizar este elemento en la página, con su respectivo XPath, u otro atributo
con el cual podemos seleccionar el elemento en específico.

Como podemos observar también definimos una variable de tipo WebElement, y

localizamos el elemento HTML, con el método findElement. Existe un método que
proporciona Selenium para capturar el texto encontrado en página web, y no es más que
el getText(), que se mencionó con anterioridad. Este método debería traernos el nombre
que capture del elemento que le hicimos, por ellos realizamos un System.out.println();
que nos imprimirá en la consola que texto capturó de la página web.
Como una validación podremos realizar un condicional para verificar que este texto sea
en realidad “Medellín”, es decir, para simular un resultado esperado o una validación de
nuestro caso de prueba. Esta comparación la realizamos con el método
equalsIgnoreCase(), que nos compara dos String’s y nos ignora las mayúsculas, esto

24
se cumple debería entrar al IF, e imprimir en consola “Es igual a Medellín”, si no se
cumple esta condición, debería imprimir “No es igual a Medellín”.
Lo último que nos queda de nuestra automatización, es escribir en el input, que se
encuentra dentro de la página de Wikipedia.

Para ello definimos, hacemos uso de lo siguiente,

Como prueba, realizamos una instancia de WebDriverWait, que nos sirve para realizar
tiempos de espera explícitos, a este, debemos pasarle el driver, y un tiempo de espera
predefinido que será de 20 segundos.
Definimos nuestra variable de tipo WebElement, y envés de realizar la búsqueda como
estamos acostumbrados, es decir con el método findElement(), ahora utilizaremos algo
diferente que lo que hará es esperar hasta que el elemento que nosotros deseemos sea
clickable, el tiempo que previamente le predefinimos. Y de forma posterior, utilizamos el
método SendKeys() para escribir en el input.

25
Hay algo importante, sin embargo, no es buena práctica utilizarlo. El Thread.Sleep(3000),
lo que hace es parar el hilo de ejecución actual, hasta que pase el tiempo definido que en
este caso es de 3 segundos.
Por último, con el método clear(), limpiamos la caja de texto. En este punto nuestra
automatización debe haber terminado.
Existen algunas herramientas que nos facilitan la vida en muchas ocasiones,
➢ CHROPATH: Chropath es una herramienta poderosa para encontrar los XPath
(relativo o absoluto) de cualquier página web, además del Css Selector.
https://chrome.google.com/webstore/detail/chropath/ljngjbnaijcbncmcnjfhigebomdlk
cjo?hl=en
➢ XPATH HELPER: XPath Helper facilita la extracción, edición y evaluación de
consultas XPath en cualquier página web. Es decir, le ingresas el XPath que estás
buscando, y él te lo selecciona en la página web.
https://chrome.google.com/webstore/detail/xpath-
helper/hgimnogjllphhhkhlmebbmlgjoejdpjl/related?hl=en

En el siguiente enlace tienen el ejemplo guía utilizado en el

desarrollo de este documento.
https://github.com/danielcorrea96/GuiaSelenium

26
 AUTOMATIZACIÓN I – UTILIZANDO GRADLE
Paso 1. Procedemos a la creación del proyecto

Buscamos Gradle, seleccionamos Next…

27
 Una vez creado el proyecto, se debería tener lo
siguiente, a excepción del chromdriver.exe, que
de igual manera debemos pegar en la raíz del
proyecto debido a que será el navegador que
utilizaremos.
Una vez hecho esto, vamos al archivo
Build.gradle, que es lo análogo al pom.xml de
Maven, este archivo debería tener la siguiente configuración por defecto…
Tiene en su interior una configuración
básica para Java. Por lo tanto, y como
vamos a utilizar Selenium debemos ir a la
pagina de Maven Repository, y buscar la
dependencia de Selenium para Gradle,
así…

28
Copiamos la dependencia, y debemos pegarla en el Build Gradle, así….

Guardamos, ahora debemos

refrescar el proyecto Gradle
para que se descargue lo
que acabamos de pegar en
el Build Gradle. Entonces, le
dame clic derecho en la raíz
de nuestro proyecto, vamos
a el apartado de Gradle y
seleccionamos Refresh
Gradle Proyect

29
Una vez hecho esto, en la parte inferior derecha
debería estar cargando algo, esperemos hasta
que esto termine.
Luego, creamos una clase en el paquete
src/main/java, llamada “App.java” al igual
que en Maven, esta clase no va a cambiar en
nada, por tanto, copiamos y pegamos el código.
Y debería quedar de la siguiente forma.

30
Por último, debemos ejecutar el proyecto, por tanto, clic derecho a la clase App.java,
luego Run As, y lo ejecutamos como Java Application.

En el siguiente Link podrá descarga el proyecto:

https://github.com/danielcorrea96/SeleniumGradle

31