Volviendo a lo básico: Los mejores complementos para navegador para Web Testing

Del blog original de mi compañía anterior.

Este es un “repost” de mi blog anterior, hice un repaso y modifiqué cosas desactualizadas, pero puede que se me haya pasado algo.

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 buen Tester, Chrome empezó a ser una necesidad para poder realizar mis trabajo diario por su dominante impacto en el mercado y 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 poder mostrar el error al desarrollador. Hay muchas aplicaciones para realizar esta tarea, pero 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 web 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.

Otra característica interesante es que una vez que es instalado en Firefox, automáticamente solicitará instalarlo en Chrome e Internet Explorer. Fireshot está disponible gratuitamente y tiene disponible una versión profesional a $40 dólares por una licencia de por vida.

Firebug

Este 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 nativa 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.

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 al desarrollador 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 Web. Por si fuera poco es expandible, podemos
instalarle complementos como Yslow o Firepath (hablaré de este más adelante).

Todos los Testers web 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.

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

AdBlock Plus

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 pierde tiempo cargando los anuncios, brindando un mejor rendimiento a nuestra aplicación ademas que que nos distrae menos.

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 la respuesta 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 dando clic a cada enlace para ver si hay alguno que no funcione o bien, para poder detectar alguna otra mala experiencia de usuario.

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.

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 y más.
• Pirate Ipsum genera frases de piratas al azar
• Obama Ipsum genera citas aleatorias del Presidente Obama.
• Trollen Ipsum genera frases troll 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.

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 en 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.

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.

Selenium IDE

Recientemente reconstruido luego de un buen tiempo sin ser tocado, Selenium IDE es la herramienta preferida por aquellos que quieren empezar con automatización. Ayuda a automatizar web apps usando técnicas record and play. Es grátis, compatible con todos los navegadores mayores y sistemas operativos (Incluyendo Linux) y una buena lista de lenguajes de programación. ¿Qué más podemos pedir? ¿no?

All the steps are recorded in Selenesse, the Selenium language. This tool has other add-ons that let us
export our scripts to other languages as python, ruby, php, java, etc. It also has its own add-ons created by the community that further expand the capabilities of this 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.

Bonus

In addition of our browsers add-ons there are other desktop tools that we can get help from. These are a couple that I’ve been using and I think they are very useful.

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.

¿Qué opinas? ¿Conoces alguna otra herramienta como estas de tu preferencia? Déjame un comentario en la sección de comentarios acá abajo.