Logo-Spanish

GR

 

 

 

QA AUTOMATION ENGINEER

 

Regresando a lo básico: Los mejores complementos para navegador en la Aseguranza de la Calidad

Del post original en el blog de mi Compañía.

Recientemente Firefox 29 lanzó un nuevo diseño, mientras lo descargaba e instalaba me di cuenta de todo el tiempo que llevo usando Firefox. Creo que la primer versión que instalé fue la 2.7, desde entonces hemos sido los mejores amigos.

He visto como algunos navegadores crecen, se desarrollan y mueren, como en el caso de Flock (basado en Firefox) y Rockmelt (basado en Chrome). También he visto que otros siguen ahí, como Opera e Internet Explorer, pero estos nunca han sido lo suficientemente buenos.

Como Ingeniero de Calidad de Software, Chrome empezó a ser una necesidad para poder realizar mis trabajo diario por su dominante impacto en el mercado, mientras me acostumbro a él, sigo prefiriendo Firefox. Los Testers necesitamos herramientas que nos ayuden a reproducir los errores que los usuarios encuentran en los sitios web en los que trabajamos, pero los navegadores, por sí solos no son suficientes para cumplir a completamente con nuestras necesidades. Es aquí cuando podemos utilizar la ayuda de complementos que nos permitan ampliar las capacidades de nuestros navegadores.

A continuación presentaré algunos complementos que utilizo a menudo y que, en mi opinión, todo Tester debería utilizar. Esta lista, en su mayoría, está enfocada a Firefox, pero la mayoría de estos complementos  (o similares) están disponibles también para Chrome y otros navegadores.

Fireshot

Una de las tareas más comunes de un Tester es tomar screenshots. Necesitamos estas imágenes para respaldar nuestros hallazgos y en algunas ocasiones para poder mostrar el error al desarrollador. Hay muchas aplicaciones para realizar esta tarea, mi favorita es Fireshot. Tiene dos características esenciales.

 

Primero que nada, es capaz de tomar las imágenes de una página completa, aún y cuando la página no sea mostrada por completo en nuestro navegador. La segunda característica, es su habilidad para agregar anotaciones dentro de la misma aplicación, y otras herramientas interesantes. Esto es muy importante para quienes nos encontramos realizando pruebas de software ya que nos permite mostrar más claramente los puntos que deseamos mostrar al equipo de desarrollo/diseño, tal sea el caso de que algo se encuentre mal colocado, si se encuentra más grande o más pequeño de lo que debería estar, o bien, nos permite indicar los pasos a seguir en la página en la que nos encontramos, argumentar algún detalle, etc. Esta herramienta ayuda a que el equipo de desarrollo pueda visualizar, con mayor claridad, cuales son los errores, ayudándoles de esta forma a que puedan arreglar el código con mayor rapidez.

 

fireshot screenshot

 

 

Otra característica interesante es que una vez que es instalado en Firefox, automáticamente solicitará instalarlo en Chrome e Internet Explorer. Desafortunadamente, este complemento no está disponible para Mac OSX en ningún navegador, pero existen otras buenas opciones para este Sistema Operativo. En lo personal, he estado utilizando uploadscreenshot.com para Firefox en Mac  y a pesar de que no es tan completo como Fireshot,me ha funcionado bastante bien. Este complemento también puede tomar screenshots de una página completa, aún y cuando la página no sea mostrada por completo en nuestro navegador. Fireshot está disponible gratuitamente y tiene disponible una versión profesional a $40 dólares por una licencia de por vida.

Firebug

Esta es un complemento que ha estado en la escena por un buen tiempo en Firefox. A pesar de que ahora todos los navegadores tienen su propias herramientas depuradoras, sigo creyendo que esta es una que no debe faltarnos. Sigue siendo la que más uso porque estoy familiarizado con ella y su interfase, en mi opinión, es más amigable. Por ejemplo, si la comparamos con la herramienta de Chrome, Firebug es más fácil de usar porque todas sus funciones están a uno o dos clics. En la herramienta predeterminada de Chrome, en algunos casos, tenemos que navegar entre varios niveles de menús para hacer alguna tarea o acceder alguna información como las cookies por ejemplo.

 

Firebug Screenshot

 

Utilizándola podemos editar las cookies, eliminar una en específico para replicar cierto funcionamiento, podemos navegar a través del código HTML de la página actual y su CSS. También podemos modificar y ver los cambios al vuelo, por ejemplo para arreglar algunos problemas de CSS. En este caso, podríamos hacer una sugerencia de cómo arreglarlo, o bien indicar cuál es la parte del código que está causando el problema, lo cual ayuda a que el desarrollador se ahorre algo de tiempo al momento de solucionar el problema. Además podemos ver los errores en la consola, podemos copiar y pegar la respuesta de una llamadas y reportar a nuestro programador esa información, quien se verá beneficiado de ella. Esta es una de las herramientas más importantes, si no es que la más importante,  para todo Tester. Por si fuera poco es expandible, podemos instalarle complementos como Yslow o Firepath (hablaré de ellos más adelante).

Todos los Testers debemos saber cómo usar Firebug o cualquier otra alternativa nativa de cada navegador. Firebug está disponible para Firefox en Mac y Windows, también está disponible en una versión sencilla de Safari en Mac.

Measure It

Supongamos que queremos asegurarnos que las medidas de un cuadro de texto, o de algún botón, cumplen con los requerimientos descritos en las especificaciones. Podríamos usar Firebug para buscar a través del CSS de la aplicación. De cualquier forma, algunas veces el código no está completamente claro o quizá podemos tener problemas para encontrar un objeto en específico. Measure It es una buena herramienta para este caso. Este complemento agrega un botón en nuestro navegador, el cual al darle clic nos permite dibujar un rectángulo y nos dice cuales son sus medidas en pixeles. Fácil y rápido.

MeasureIt Screenshot

 

Actualmente está disponible gratis en Firefox y Chrome, tanto en Mac como en Windows.

ABP

AdBlock Plus es una herramienta que puede ser muy útil si no estamos probando anuncios o si nuestra aplicación no necesita trabajar con ellos. Este complemento bloquea los anuncios de la página web basado en filtros específicos que podemos elegir. Con este complemento, nuestra aplicación puede trabajar más rápido porque no necesita que lo carguemos, brindando un mejor rendimiento a nuestra aplicación ademas que que nos distrae menos. 

ABP Screenshot

 

Sin embargo, debemos ser cuidadosos con este complemento porque puede ocultar  ciertos errores  que  nuestros usuarios pueden estar teniendo.

Por ejemplo, cuando falla un anuncio puede causar algún error en nuestra aplicación y no nos daremos cuenta si tenemos este complemento activado, o peor, puede causarnos un momento de pánico si de repente nos aparece un error que no pasa cuando los anuncios están presentes en nuestra aplicación. Por ejemplo, cuando el diseño de la aplicación depende de que el anuncio exista. Yo siempre he encontrado útil el tenerlo con mi Aplicación Bajo Pruebas (AUT por sus siglas en inglés) para tener el mejor resultado en mis pruebas. Este complemento está disponible gratis en Firefox y Chrome, tanto para Mac como para Windows.

Link Evaluator

Como su nombre lo dice, este complemento evalúa todos los enlaces de la página y los resalta con color verde, amarillo o rojo, dependiendo de su respuesta. El color verde es para cuando el response es 200 o 400, el rojo si el response es 404, 500 o algún otro error. Es muy útil para localizarlos fácil y rápido, evitando que se nos pase alguno de ellos. De esta forma, el Tester no necesita estar entrando a cada enlace para ver si hay alguno que no funcione o bien, para poder detectar alguna otra mala experiencia de usuario.

 

Link Evaluator Meetme

 

 

Está disponible gratis en Firefox para Mac o Windows, pero no está disponible para Chrome, hay otras opciones para este. El más parecido es Link Checker que está disponible gratuitamente para Mac y Windows.

Dummy Lipsum

Este complemento nos ayuda generando texto de relleno. Supongamos que queremos llenar una forma o ver como se ve un texto en una página. Después de instalar este complemento, tendremos un botón en la barra de herramientas de nuestro navegador que al darle clic, nos traerá una ventana de diálogo donde podemos elegir entre varias opciones, como cuantos párrafos o palabras, si queremos incluir puntuación o tags HTML, etc.

Dummy Lipsum Screenshot

Después de seleccionar entre todas las opciones, necesitaremos darle clic al botón Generate, después Copy to Clipboard y por último podremos pegarlo donde sea.

Este complemento está disponible gratis para Firefox en Mac y Windows. Hay otras herramientas similares que están disponibles para Chrome o para cualquier otro buscador, como YALIG (Yet Another Lorem Ipsum Generator) que está disponible gratis para  Chrome tanto en Mac como para Windows. Hay otros generadores de texto Lorem Ipsum que no son complementos, pero que son útiles y que darán un toque de creatividad a nuestras pruebas. Los podemos agregar a favoritos para tener una acceso rápido a ellos.

 

  • Fillerama genera diálogos de programas como Futurama, Dexter, Arrested Development and more.

  • Pirate Ipsum  genera frases de piratas al azar.

  • Obama Ipsum genera aleatoriamente citas del Presidente Obama.

  • Trollen Ipsum genera frases un poco bully entre usuarios, por ejemplo, de Android Fans a iOs Fans y viceversa.

  • Quote Ipsum genera al azar citas famosas.

  • Picksum Ipsum genera frases de diálogos de películas de personajes de  Michael Caine, Jim Carrey, Clint Eastwood o Morgan Freeman.

Web Developer

Esta herramienta agrega un menú a nuestro navegador con un mundo de opciones que nos pueden ayudar a facilitar el trabajo diario. Lo he usado más por el menú de cookies, el cual las elimina por completo. Tal vez parezca que no es nada extraordinario, ¿no? Lo que es realmente útil y diferente, es que nos permite borrar las cookies de la sesión en la que estamos actualmente o sólo las del dominio actual. Esto es de mucha ayuda cuando tenemos datos de inicio de sesión para varios sitios y que queremos limpiar las cookies solo para uno de ellos. Esta herramienta también la podemos usar para desactivar, modificar el CSS o agregar hojas de estilo completas a la página actual.

 

Web Developer Screenshot

 

También podemos desactivar el caché, las cookies o javascript. Todo eso nos puede ayudar a generar las condiciones necesarias para poder replicar algún bug en cierta aplicación. Nos puede ayudar a trabajar con formas, limpiando todos los campos con un solo clic, auto-rellenándolas, etc. También puede trabajar con imágenes, mostrando sus tamaños, deshabilitarlas, mostrar textos alternativos, y miles de opciones más. Definitivamente uno de los que hay que tener.

Este complemente esta disponible gratis en Firefox, Internet Explorer, Chrome y Opera para Windows; y en Firefox y Chrome para Mac OSX.

URL to QR code

No hablaré acerca de un complemento especifico aquí, hay muchos de estos para todas las combinaciones de navegadores y sistemas operativos. ¿Qué hacen? Muy simple, generan un código QR usando el URL de la pagina que estamos viendo actualmente.

Cuando usamos un dispositivo móvil como un teléfono o una tableta y escaneamos este código QR éste abrirá el navegador y nos llevará a este URL. De esta manera, podemos escribir fácilmente el URL de cierta página en nuestra computadora de escritorio, generar el código QR, escanearlo en nuestro dispositivo móvil, y así no tenemos que escribir en esos pequeñísimos teclados touch de estos dispositivos y nos hacemos la vida más fácil.

URLToQRCode Screenshot

Yo he usado URLtoQRcode en mi Firefox + Mac. Y en mi Chrome, tanto en Mac como en Windows tengo QR Image from URL. Pero en mi Firefox + Windows uso Etao QR Code, todos ellos me funcionan muy bien y son gratis.

iMacros

Esta es la primera herramienta de automatización en este post. iMacros nos permite grabar pasos que hacemos manualmente, los guarda en su propio código, muy fácil de aprender. Una vez grabado, podemos editar, agregar o remover pasos en su propio IDE y finalmente podemos reproducirlos una y otra vez. Siendo que esta no es la herramienta mas popular, en mi opinión, me parece que es igual o mas buena que otras disponibles en el mercado, como Selenium.

 

iMacros Screenshot

 

iMacros tiene sus versiones gratis para Firefox, Chrome e Internet Explorer tanto en Mac como en Windows. De esta forma podemos crear nuestro script en Firefox y correrlo en Internet Explorer o en Chrome.

Hay algunos puntos en contra que lo previenen de ser perfecto. Las versiones para Internet Explorer y Chrome carecen de cierta funcionalidad, comparadas con la versión para Firefox, y éste a su vez carece de ciertas características que la versión PRO. La versión más completa es la PRO que nos permite usar su propio navegador, ademas de que podemos crear scripts en los lenguajes de programación más conocidos, pero ésta versión es muy cara. La versión para Firefox es bastante competente y podemos crear scripts bastante complejos.

Selenium IDE

¿Quien no ha usado o al menos escuchado hablar de esta herramienta? es gratis, compatible con todos los navegadores y sistemas operativos más conocidos (incluyendo Linux), y con todos los lenguajes de programación. Que más podemos pedir, ¿no? 

Selenium IDE Screenshot

 

Este IDE es casi lo mismo que  iMacros, nos permite grabar pasos realizados manualmente y reproducirlos después. Todos los pasos son grabados en Selenesse, el lenguaje de Selenium. Esta herramienta tienen otros complementos que nos permiten exportar nuestros scripts a otros lenguajes como python, ruby, php, java, etc. También hay complementos para este complemento, creados y mantenidos por la comunidad para extender las capacidades de este IDE.

Firepath

Por último pero no por ello menos importante, ahora que estamos hablando de automatización, me gustaría hablar acerca de Firepath. ¿Quién no ha tenido problemas con la manera de elegir elementos cuando usamos Selenium? Firepath es un complemento para Firebug. Nos permite seleccionar un elemento de la página web en la que estamos y nos dice su Xpath o CSS locator. También trabaja al revés, podemos especificarle un Xpath o CSS locator y nos señala en la página que elemento cumple con ese locator. De esta manera podemos localizar elementos mas facilmente y usarlos en nuestros scripts.

 

FirePath Screenshot

 

 Bono

Ademas de complementos para nuestros navegadores también hay otras herramientas que nos pueden ser de mucha utilidad. Aquí les agrego 2 más que me parecen muy utiles.

Jing

Esta es una herramienta desarrollada por TechSmith, los creadores de Screencast.com, Camtasia y otros. una de sus características es que nos permite tomar screenshots y me preguntarán ¿Que tiene esta herramienta que no tiene Fireshot o alguna otra para navegador? La diferencia está en que Jing, al ser externo al navegador puede tomar screenshots de nuestro escritorio, otro programa o ventana que no sea nuestro navegador, o simplemente tomar screenshots de nuestro navegador incluyendo la barra de direcciones, herramientas, etc. Las cuales los complementos para nuestro navegador no toman en cuenta. Además Jing, tiene la capacidad de tomar videos de 5 min., que es lo suficiente como para grabar algunos pasos para reproducir un bug por ejemplo. Además, estos screenshots o videos, pueden ser subidos directo desde la aplicación hasta su servicio de hosting de imágenes y video gratis, de los cuales puedes obtener el link y compartir después. También podemos pegarlos al clipboard o guardar en nuestro disco duro y tiene herramientas de anotación un poco rudimentarias pero funcionales.

Jing

Charles Proxy

Es un proxy HTTP / monitor HTTP / Reverse Proxy que permite al programador ver todo el tráfico HTTP SSL/HTTPS entre su computadora y el internet. Esto incluye peticiones, respuestas y las cabeceras HTTP (que contienen información de cookies y caché).

CharlesProxy 

Digamos que es como Firebug pero independiente al navegador y con mayores capacidades como filtrado de respuestas y lo que más me ha llamado la atención la capacidad de bajar la velocidad de tu conexión a internet para replicar conexiones de 56 kbps u otras, que puede ser muy útil para replicar de mejor manera la experiencia de nuestros usuarios.

Ahora que conoces todas estas herramientas ¿Qué piensas acerca de ellas? ¿Te gustan? ¿Usas actualmente alguna de ellas? ¿Conoces alguna que yo no haya mencionado aquí? Escríbeme y dejamelo saber.