Mostrando entradas con la etiqueta Visual Studio. Mostrar todas las entradas
Mostrando entradas con la etiqueta Visual Studio. Mostrar todas las entradas

sábado, 24 de febrero de 2018

Jasonetor - Mi primera extensión para VS Code

¡Saludos! En esta ocasión quería presentarles mi primera extensión para Visual Studio Code, llamada Jasonetor. El nombre suena un poco chistoso, pero se me ocurrió de JSON Editor (JaSONE[ed]itor), pues en efecto la intención es ser un visor y editor de JSON. También viene un poco del nombre Jasonette, que es una herramienta para crear aplicaciones móviles utilizando JSON. Y cabe mencionar que también medio suena a Terminator XD.

¿Qué es Jasonetor?

La idea principal es que Jasonetor llegue a ser un editor amigable de JSON. Sin embargo actualmente se encuentra en pañales (v0.0.2 al momento de escribir esta entrada), por lo que solamente muestra el JSON como una vista de árbol, en la que se puede minimizar o expandir cada nodo, y además resalta nodos al hacer clic izquierdo en ellos. Por otra parte, aún posee dependencias que se descargan desde internet, por lo que no funcionará si no se posee conexión a internet, al menos al iniciar la extensión.

¿Cómo surgió Jasonetor?

Jasonetor surgió de la necesidad de encontrar una mejor forma de editar archivos JSON en mi actual trabajo. Esto se debe a que trabajamos de cuando en cuando con archivos JSON, los cuales se han vuelto bastante extensos. Es por ello que el proceso de edición de estos se ha vuelto sumamente engorroso, lento y propenso a errores. Así que el principal objetivo de Jasonetor es disminuir el tiempo que invertimos y perdemos debido a errores en la edición de estos archivos.

Aunque Jasonetor pretende ser una herramienta para ser utilizada en mi actual trabajo, no está limitado solamente a este, y no forma parte directa de él, ya que es un proyecto que estoy desarrollando en mi tiempo fuera de la oficina. Por eso mismo, Jasonetor ha sido concebido como un proyecto de software libre (open source), cuyo código fuente se encuentra en GitHub, por lo que cualquier apoyo o contribución es bienvenida y muy agradecida.

Inicialmente la idea era hacer una herramienta de edición que mostrara el JSON en una vista de árbol, y lo permitiera editar. Mi elección fue utilizar Electron JS, que es un framework para crear aplicaciones de escritorio nativas utilizando JavaScript, HTML y CSS, y resulta muy natural utilizar estas tecnologías web para graficar JSON de forma fácil y amigable. Cabe mencionar que conocí sobre Electron gracias a Hans Hernández, compañero de trabajo y creador de CatFactory.

Sin embargo, luego pensé que sería mucho mejor si se pudiera editar el JSON no solamente de forma gráfica, sino de forma textual, en dos vistas paralelas, ya que usualmente nos resulta más rápido editar el texto en lugar de mover el ratón para seleccionar los elementos en una vista de árbol. Pero sería demasiado difícil incluir un editor de texto con colorización de sintaxis. Luego recordé que Visual Studio Code ya es un editor que ha sido creado con Electron, y hay una gran cantidad de extensiones de código libre desarrolladas por la comunidad, así que pareció la opción más sensata, en lugar de re-inventar la rueda. Luego de ver los fuentes de ejemplo, más algunas extensiones similares, me animé a intentar crear una extensión por mí mismo.

¿Cómo funciona Jasonetor?

Jasonetor fue creado a partir de la extensión de ejemplo de Hola Mundo, provista en la documentación sobre el desarrollo de extensiones para Visual Studio Code.
Internamente posee un TextDocumentContentProvider, el cuál se utiliza para mostrar el cuerpo de una página HTML en una vista que se abre a la par del editor de texto, al presionar F1 e ingresar el comando JSON editor. Esta parte se basó en:


La página HTML es una pequeña aplicación de Vue JS 2, que utiliza un componente recursivo basado en el ejemplo de Anthony Gore para dibujar el JSON en vista de árbol. Para la selección y de-selección de nodos se utiliza el concepto de bus de eventos, mediante la creación de una instancia adicional de Vue.


Siguientes pasos

De momento no he decidido por completo los pasos a seguir con Jasonetor, pero tratando de ordenar las características cronológicamente según las necesidades que tenemos actualmente, más algunos ítems de la lista de deseos  (porque aún no sé hasta donde se pueda llegar :P), creo que serían los siguientes:
  • Incluir dependencias dentro del proyecto, para no requerir conexión a Internet.
  • Separar los componentes de Vue en archivos propios, y comprimir el código fuente utilizado para dibujar la vista de árbol (creo que lo segundo va a tener que ser realizado como parte de lo primero).
  • No actualizar vista de árbol si el JSON no es válido, y notificar de esto al usuario.
  • Parsear o mapear el JSON, para poder detectar la ubicación de los cambios que realice el usuario (si no encuentro una librería, voy a tener que buscar mis cuadernos de Teoría Matemática de la Computación y Compiladores).
  • Editar el JSON en la vista de árbol, y actualizar el texto en el editor.
  • Desplazar la vista de árbol de forma paralela a la edición de código.
  • Actualizar la vista de árbol de forma parcial, solamente con los cambios detectados.
  • Soporte para búsqueda mediante JSON Path.
  • Soporte para XML, YAML y otros lenguajes de metadatos (se vale soñar).

sábado, 26 de agosto de 2017

Crear un proyecto de pruebas con Visual Studio y Selenium


Saludos. Esta entrada es un tutorial acerca de cómo crear un proyecto de pruebas en Visual Studio utilizando Selenium (por si el título que dice casi lo mismo no es lo suficientemente claro - comentario sarcástico para mí mismo).

¿Qué es Selenium?

Selenium es un conjunto de herramientas de automatización para navegadores, que permite programar y ejecutar pruebas repetitivas para aplicaciones web.

Creación del proyecto y adición de Selenium

El tutorial se ha realizado utilizando Visual Studio Community Edition 2017, y C#. Los pasos para crear el proyecto y ejecutar una prueba de ejemplo se describen a continuación:

El primer paso es abrir Visual Studio, y crear un nuevo proyecto de pruebas unitarias, a través del menú Archivo > Nuevo > Proyecto, y seleccionando la plantilla Proyecto de Prueba Unitaria (.NET Framework), ubicada en las plantillas instaladas bajo la categoría Visual C# > Prueba.


Luego de ello, se procede a agregar los paquetes de Selenium en la solución. Para ello, se abre el panel del Explorador de soluciones, se da clic derecho sobre el proyecto, y se selecciona la opción Administrar paquetes NuGet.


Esto despliega en pantalla el administrador de paquetes NuGet para el proyecto seleccionado. En él se selecciona la opción Examinar, y se procede a realizar la búsqueda de paquetes con la palabra Selenium.


De la lista obtenida, procedemos a instalar los paquetes Selenium.WebDriver (publicado por Selenium Committers) y Selenium.Support (también publicado por Selenium Committers). Estos paquetes incluyen soporte para los navegadores Internet Explorer y Firefox. Para soportar el navegador Google Chrome, es necesario instalar un paquete que lo contenga, como por ejemplo Selenium.Chrome.WebDriver publicado por jbaranda, el cual incluye el ejecutable del driver en la carpeta bin respectiva del proyecto luego de compilarlo.

Una vez descargados e instalados los paquetes ya estamos listos para realizar nuestra primera prueba.

Primera prueba con Selenium

Para nuestra primera prueba, haremos uso de un formulario de inicio de sesión de un sitio de web de demostración llamado PHPTravels, en la URL http://www.phptravels.net/admin

Para ello, abrimos la clase creada al momento de crear el proyecto (por defecto es llamada UnitTest1), y agregamos las referencias para Selenium:

Luego, agregamos el siguiente método de ayuda para poder verificar si un elemento existe en la página web:

Finalmente sustituimos el método de prueba vacío, que fue creado por defecto, y creamos uno nuevo, llamado InicioSesion_ConCredencialesIncorrectas_MuestraAviso que consistirá en probar que si intentamos iniciar sesión ingresando credenciales incorrectas, se nos mostrará en pantalla una notificación indicando el error. El código final de la clase, con el nuevo método, es el siguiente:

Nota: El código fuente completo se encuentra disponible en GitHub: https://github.com/guillegr123/PruebaSelenium

Ejecutando la prueba unitaria

Para ejecutar la prueba unitaria, seleccionamos el nombre del método a probar, damos clic derecho, y seleccionamos la opción Ejecutar pruebas.


Esto abre el panel de Exploador de pruebas, y procede a ejecutar la prueba de forma automatizada, utilizando el navegador Google Chrome, elegido a través del driver utilizado. Se podrá observar como el navegador es abierto, y los pasos descritos en la prueba son ejecutados uno a uno, culminando con la verificación de que el elemento de notificación fue creado.


Una vez culminada la prueba, el resultado de esta es mostrado en el panel del Explorador de pruebas, con un ícono verde en caso de éxito, y uno rojo en caso de fallo.
Con la tecnología de Blogger.