{"id":2704,"date":"2012-11-28T17:12:32","date_gmt":"2012-11-28T16:12:32","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=2704"},"modified":"2012-11-28T17:12:32","modified_gmt":"2012-11-28T16:12:32","slug":"prueba-o-testing-automatizado-de-sitios-web","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/prueba-o-testing-automatizado-de-sitios-web\/","title":{"rendered":"Prueba o testing automatizado de sitios web"},"content":{"rendered":"

Selenium<\/strong> es una plataforma para hacer \u201ctesting<\/strong>\u201d en el browser o navegador. B\u00e1sicamente puedes automatizar el uso de tu aplicaci\u00f3n web y repetir el proceso cuantas veces sea necesario para verificar que est\u00e1 haciendo lo que se supone. Por otro lado es un set de herramientas<\/strong> que nos permiten desarrollar scripts para pruebas de aplicaciones Web en diversos lenguajes como Java, Ruby, Python, Perl, .Net o PHP.<\/p>\n

Es un producto Open Source que est\u00e1 permanentemente siendo optimizado.<\/p>\n

Nos permite grabar, editar y depurar casos de prueba, que podr\u00e1n ser ejecutados de forma autom\u00e1tica e iterativa posteriormente. \u00a0El potencial de esta herramienta puede ser utilizado para la grabaci\u00f3n de las pruebas funcionales durante la Generaci\u00f3n de pruebas de regresi\u00f3n. Con este servicio se consigue obtener una bater\u00eda de pruebas automatizadas que podr\u00e1n ser utilizadas cuando sea necesario repetir las pruebas.<\/p>\n

Existen 3 tipos de Herramientas: <\/strong>Selenium IDE, <\/strong>Selenium Webdriver, y <\/strong>Selenium Grids.<\/strong><\/p>\n

En este post os mostrar\u00e9 como usarlo. Adem\u00e1s al final veremos herramientas relacionadas y un video en castellano sobre su uso.
\nComencemos …<\/strong><\/p>\n

<\/p>\n

\"\"<\/a><\/p>\n

Selenium IDE<\/strong> es un plugin para Firefox que permite grabar y ejecutar scripts directamente desde tu navegador.<\/p>\n

Selenium Webdriver \u00a0<\/strong>(anteriormente RC) es una biblioteca (library) y servidor escrito en lenguaje Java que permite ejecutar scripts en forma local o remota a trav\u00e9s de comandos. \u00a0Este permite correr pruebas de selenium en los dem\u00e1s navegadores, no solo Firefox<\/strong>. Adem\u00e1s te permite ejecutar en todos los sistemas operativos populares y algunos no tan populares.<\/p>\n

Selenium Grids<\/strong> permite coordinar m\u00faltiples sevidores \u00a0Selenium para \u00a0poder ejecutar scripts en m\u00faltiples plataformas y equipos al mismo tiempo.<\/p>\n

La idea de hacer testing a desarrollos web no es nueva, \u00a0pero la verdad es que, no muchos usuarios las hacen. Casi todas las personas que conozco que hacen testing se limitan al c\u00f3digo en el server y no a la presentaci\u00f3n final en el browser. Es importante entender que nuestra aplicaci\u00f3n principalmente es lo que los usuarios ven en el navegador y es ah\u00ed donde debemos hacer nuestras pruebas. Una herramienta como Selenium hace esto \u00a0de forma m\u00e1s eficiente y sencilla.<\/p>\n

\"\"<\/a><\/p>\n

Veamos el uso de Selenium IDE<\/strong><\/p>\n

La instalaci\u00f3n de Selenium IDE al tratarse de un complemento de Firefox es muy sencilla. Podemos descargar e instalar el complemento desde cualquiera de los siguientes enlaces:<\/p>\n

https:\/\/addons.mozilla.org\/es-ES\/firefox\/addon\/2079\/<\/a><\/p>\n

http:\/\/seleniumhq.org\/download\/<\/a><\/p>\n

Una vez instalado el complemento y tras reiniciar Firefox podremos tener acceso a Selenium IDE tanto desde el men\u00fa de herramientas, el cual nos abrir\u00e1 la aplicaci\u00f3n en una nueva ventana, como desde Ver -> Panel lateral -> Selenium IDE que nos lo mostrar\u00e1 como un Panel (ver la imagen) dentro de la ventana principal de Firefox.<\/p>\n

Descripci\u00f3n del Panel<\/strong><\/p>\n

El Panel consta de los siguientes objetos:<\/p>\n

Un men\u00fa desplegable con las siguientes opciones:<\/p>\n

Men\u00fa ‘Archivo<\/em>‘: Permite crear un nuevo ‘Test Case’, abrir uno existente, guardarlo, exportarlo en varios formatos y lo mismo con los ‘Test Suite’<\/p>\n

Men\u00fa ‘Editar<\/em>‘: contiene las opciones de copiar, pegar, seleccionar, etc…<\/p>\n

Men\u00fa ‘Options<\/em>‘: en este men\u00fa se encuentran las opciones de configuraci\u00f3n de Selenium y las opciones de selecci\u00f3n de formato del visor y del portapapeles. En las opciones de Selenium se puede definir el encoding de los ficheros de test, el tiempo de timeout por defecto, etc…<\/p>\n

Debajo del men\u00fa existe un campo de texto que contiene la url base sobre la que se van a grabar las pruebas.<\/p>\n

A continuaci\u00f3n hay una lista de iconos con los que se puede ejecutar todo el test grabado, ejecutar s\u00f3lo la l\u00ednea seleccionada, pausar la ejecuci\u00f3n, iniciar la grabaci\u00f3n,…<\/p>\n

Tambi\u00e9n se dispone de un selector de velocidad para ajustar la velocidad a la que se ejecutan los test.<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

La Pesta\u00f1a source, muestra el c\u00f3digo fuente generado, en el formato que se haya seleccionado.<\/p>\n

 <\/p>\n

Pasemos a la grabaci\u00f3n de las pruebas.<\/strong><\/p>\n

La grabaci\u00f3n de una prueba puede ser configurada para que se haga de forma autom\u00e1tica o manual:<\/p>\n

Grabaci\u00f3n autom\u00e1tica:<\/strong><\/p>\n

Para grabar una prueba simplemente habr\u00e1 que habilitar el panel de\u00a0Selenium IDE<\/strong>\u00a0en el navegador\u00a0Mozilla Firefox<\/strong>, verificar que el bot\u00f3n grabar est\u00e1 activo (debe quedar de color rojo claro) y empezar a realizar la navegaci\u00f3n. Nuestra navegaci\u00f3n quedar\u00e1 registrada, gener\u00e1ndose los comandos que correspondan en cada caso, que se podr\u00e1n ver en el panel de Selenium IDE.<\/p>\n

En el bot\u00f3n secundario del rat\u00f3n hay una opci\u00f3n con la cual para cualquier elemento de la p\u00e1gina en la que se navega se muestran las funciones de Selenium disponibles. Esta opci\u00f3n es muy \u00fatil para cuando se quiere verificar que existe un texto en la pantalla o si un elemento est\u00e1 presente.<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0Grabaci\u00f3n manual:<\/strong><\/p>\n

Para programar las instrucciones que automatizan la prueba, se deshabilita el bot\u00f3n de grabar, en la pesta\u00f1a \u201cTable\u201d se selecciona una l\u00ednea vac\u00eda y en los desplegables que aparecen en la parte inferior se indica la instrucci\u00f3n.<\/p>\n

El primer desplegable contiene la lista completa de funciones que ofrece Selenium IDE (no incluye el detalle de cada una de ellas ya que, al seleccionarla, en la parte de informaci\u00f3n podemos ver la operativa de la funci\u00f3n seleccionada).<\/p>\n

El segundo combo muestra una lista con todos los indicadores posibles para el elemento sobre el que se quiere realizar la acci\u00f3n (ver Localizaci\u00f3n de elementos), siempre que se hayan grabado autom\u00e1ticamente, en caso de edici\u00f3n manual aparece vac\u00edo.<\/p>\n

En el \u00faltimo campo se introduce el valor que pueda necesitar la funci\u00f3n de Selenium para su ejecuci\u00f3n, por ejemplo, el texto a introducir en un campo de texto.<\/p>\n

En el apartado de referencias podemos encontrar un enlace a la p\u00e1gina oficial de Selenium (Manual de Referencia) donde se nos muestran todos los comandos posibles y su descripci\u00f3n.<\/p>\n

De la misma forma tambi\u00e9n se pueden editar pruebas que ya hayan sido grabadas con anterioridad, editando los campos que aparecen en la parte inferior de la pesta\u00f1a \u201cTable\u201d o directamente en el c\u00f3digo generado en la pesta\u00f1a \u201cSource\u201d.<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

Identificaci\u00f3n de los elementos de la interfaz<\/strong><\/p>\n

Hay comandos de Selenium que necesitan como par\u00e1metro un localizador del elemento sobre el que realizar la acci\u00f3n. Es muy importante que dicho localizador se resuelva de forma \u00fanica, para que la prueba sea correcta, y la acci\u00f3n no se realice sobre un elemento indeseado. Por otra parte, tambi\u00e9n debe tenerse en cuenta que el identificador elegido sea reutilizable en el futuro: por ejemplo debe evitarse la elecci\u00f3n de un identificador que cambie con cada nueva versi\u00f3n de la aplicaci\u00f3n.<\/p>\n

Por ello, es muy importante elegir de manera adecuada los identificadores que vamos a usar en cada caso:<\/p>\n

id<\/em><\/strong>: Es la mejor opci\u00f3n siempre y cuando la p\u00e1gina HTML tenga definidos correctamente los identificadores de sus elementos, es decir, que sean \u00fanicos e invariantes en el tiempo. En estos casos, el mantenimiento de las pruebas generadas usando este m\u00e9todo es pr\u00e1cticamente nulo, y el hecho de a\u00f1adir o quitar elementos a la p\u00e1gina no afecta al ‘id’ del resto de elementos existentes.<\/p>\n

name:<\/strong><\/em> Por definici\u00f3n, el atributo ‘name’ de un elemento HTML no tiene que ser \u00fanico, con lo que el uso de este m\u00e9todo de localizaci\u00f3n no garantiza que la prueba se ejecute de la manera deseada. Adem\u00e1s, en funciones que s\u00f3lo referencian a un elemento (getText, click, type, etc…) la acci\u00f3n se realizar\u00eda siempre sobre el primer elemento encontrado, por ejemplo, esta opci\u00f3n no ser\u00eda v\u00e1lida para hacer click sobre un conjunto de ‘radiobuttons’ con el mismo nombre.<\/p>\n

identificador:<\/strong> <\/em>\u00c9sta es la opci\u00f3n por defecto que Selenium-IDE al grabar las pruebas y consiste en usar el ‘id’ si existe y si no usar el ‘name’.<\/p>\n

dom:<\/strong><\/em> Esta opci\u00f3n utiliza el DOM de la p\u00e1gina para hacer referencia a los elementos. El problema que presenta es que cualquier introducci\u00f3n de un nuevo elemento, o reorganizaci\u00f3n de los existentes, provoca que las referencias cambien, lo que puede invalidar las pruebas grabadas anteriormente.<\/p>\n

xpath:<\/strong><\/em> Este m\u00e9todo de identificaci\u00f3n es similar al anterior, pero en este caso hace uso de la estructura XML que posee todo documento HTML, para as\u00ed hacer referencia a los elementos mediante una ruta, ya sea absoluta (partiendo desde el elemento \/) o relativa (partiendo de un elemento conocido). Posee el mismo problema que el localizador por ‘dom’ ya que tanto el DOM como el XPATH dependen de la estructura del documento. Adem\u00e1s Xpath devolver\u00e1 un elemento \u00fanico siempre que sea una ruta absoluta, en el caso de rutas relativas no se cumple ya que una misma ruta puede ser v\u00e1lida para varios elementos.<\/p>\n

link:<\/strong><\/em> Este m\u00e9todo es el m\u00e1s utilizado al querer localizar un enlace. Su uso requiere conocer el texto que va a mostrar dicho enlace en la p\u00e1gina HTML, por lo tanto no es \u00fatil en caso de existir enlaces con el mismo texto (devolver\u00eda el primero de ellos), enlaces sin texto, o enlaces con texto din\u00e1mico.<\/p>\n

css:<\/strong><\/em> Este localizador consiste en identificar los elementos por sus propiedades de CSS. Este m\u00e9todo tampoco garantiza la unicidad del elemento referenciado.<\/p>\n

Limitaciones<\/h4>\n

Algunas de las limitaciones encontradas para la grabaci\u00f3n de las pruebas usando Selenium son las siguientes:<\/p>\n

Uso de la tecnolog\u00eda AJAX<\/em><\/p>\n

El uso de esta tecnolog\u00eda en los desarrollos permite modificar el HTML cargado de una p\u00e1gina sin realizar una recarga de la misma, por lo que las funciones de Selenuim que esperan a que la p\u00e1gina haya cargado para continuar con la ejecuci\u00f3n de los tests, no sirven.<\/p>\n

En estos casos la estrategia que se recomienda seguir es identificar un elemento que sea modificado mediante la llamada AJAX y realizar una espera hasta que el elemento sea modificado. Lo m\u00e1s habitual es esperar a que un elemento cambie de visibilidad (visible->oculto y viceversa), o que aparezca un nuevo elemento HTML (un nuevo input, un nuevo texto, etc..). De esta manera se podr\u00e1 identificar cu\u00e1ndo una llamada AJAX ha terminado y es posible continuar con la ejecuci\u00f3n de los tests.<\/p>\n

Ventanas emergentes<\/em><\/p>\n

Para la ejecuci\u00f3n de las pruebas, Selenium ‘inyecta’ c\u00f3digo javascript en la p\u00e1gina HTML y as\u00ed consigue la ejecuci\u00f3n autom\u00e1tica del c\u00f3digo grabado. Esto hace que no sea posible acceder a ning\u00fan elemento que se quede fuera del \u00e1mbito del c\u00f3digo HTML, como es el caso en el que se necesite interactuar con ventanas emergentes. Existen varias situaciones, y en algunas de ellas el problema es solventable:<\/p>\n

–\u00a0Ventanas emergentes de javascript<\/strong>\u00a0(alert, confirm y promt): Selenium ofrece funciones para interactuar con ellas. Es necesario conocer el nombre de la ventana emergente para poder hacer uso de las funciones que Selenium dispone a tal efecto.<\/p>\n

– \u00a0Ventanas emergentes generadas por el sistema operativo<\/strong>\u00a0(cargar \/ guardar un fichero \/ selecci\u00f3n de certificado digital): En este caso Selenium no es capaz de interactuar con ellas y es necesario recurrir a herramientas externas.<\/p>\n

– \u00a0Ventanas emergentes del propio navegador<\/strong>\u00a0(enlaces nuevas ventanas): Al igual que en el caso de ventanas emergentes de javascript, Selenium ofrece funciones para interactuar con ellas. Es necesario conocer el nombre de la ventana emergente para poder hacer uso de las funciones que Selenium dispone a tal efecto.<\/p>\n

En cualquier caso, las ventanas emergentes obligan a realizar una actuaci\u00f3n manual.<\/p>\n

Diferencias entre navegadores<\/strong><\/p>\n

Existen diferencias en la interpretaci\u00f3n javacript de cada navegador (incluso puede que entre diferentes versiones del mismo navegador) o los permisos que se pueda tener para realizar diferentes tareas, lo cual implica que las pruebas generadas deben seguir estrategias diferentes seg\u00fan el navegador al que vaya dirigido, aumentando la complejidad del dise\u00f1o.<\/p>\n

Las diferencias entre navegadores (incluso entre diferentes versiones del mismo navegador) mas comunes son:<\/p>\n