Souvenirs de IT: Web

Mostrando entradas con la etiqueta Web. Mostrar todas las entradas

sábado, 30 de mayo de 2020

It's been a long time since my last post 😅 Currently I'm starting to get my feet wet with Elixir (again, second attempt), because it is a functional language (I kinda love functional programming, although I'm no expert), and it is optimized for distributed and scalable applications. Also, they have a Web Framework called Phoenix, and I just found out that creating applications with socket connections seems to be a breeze with Phoenix Channels. So I've decided to build a small application, and also I'm taking the chance to give Preact (a ReactJS lightweight alternative) a try for the front-end.

TL;DR

Here is how I created my Elixir and Phoenix application, and set up Preact:

Prerequisites

For this project I already have installed, at the time of writing:

Erlang/OTP 22.2.7
Elixir 1.10.1
Phoenix 1.5.3
NodeJS 12.16.2
NPM 6.14.4

Create Phoenix web app

First, we are going to create a new Phoenix application. For the sake of simplicity, we are going to skip the creation of the Ecto repo for database access, as this will not affect the Preact set-up.

When asked, install all the required Elixir dependencies, so you don't have to do it later.

Set-up Preact

The Phoenix web application already includes Webpack, so we can proceed to install and setup Preact right away. To install Preact, we run the next command, inside the assets folder:

All the NPM commands should be run inside the assets folder, which contains the NPM package files.

Then, we need to alias React to Preact, so we can make use of any component from the vast React ecosystem, through Preact's compatibility layer. In order to do this, we need to point react
and react-dom imports to Preact, by adding the respective aliases to be resolved in our already present Webpack config file, which is assets/webpack.config.js, like so:

Set up JSX support

The next step is to be able to transpile JSX into plain Javascript. For this we need to add a babel plugin that will do this work, so we first proceed to install @babel/plugin-transform-react-jsx.

Then, we proceed to modify the assets/.babelrc file, to specify the function for JSX that should be used from the plugin:

We also need to modify the Webpack configuration to transpile the JSX files, by modifying the JS rule to also include and resolve JSX extensions:

Update routing

The last bit to finish the set-up is to update the route configuration provided by Phoenix, so the front-end routes can be managed by the Javascript router of our choice, to have a fully fledged single page app. The first step is to open the file lib/phoenix_preact_web/router.ex and move the scope block for "/" to the end, so all of the other routes can take precedence and be handled by Phoenix. Then, we modify the get section to always direct to the index action regardless of the path (lines 37-42):

This way, all routes that do not belong to the API, nor Phoenix dashboard, will load the index page.

Clean Phoenix page templates

Before start adding our UI components, we should get rid of all the static content that Phoenix added by default in our index page. So let's open the template file lib/phoenix_preact_web/templates/page/index.html.eex, and remove all its contents. Let's also open the layout template lib/phoenix_preact_web/templates/layout/app.html.eex and remove all of the body contents. The reason for all this cleanup is because we will use the index page's body to render our components, so we won't need all of that content to be rendered on the server side. The layout file will look something like this:

Render a component

Now that we have the skeleton set-up, we can proceed to add our first component. Let's create a components folder inside assets/js, and inside it add a folder named App, where we will place our initial component. We will end up with a folder structure like this:

Then create a file named index.jsx under our App folder, and add the following code to create a basic counter:

Finally, let's render the component in our main Javascript app file (assets/js/app.js):

Now we are ready to go! Let's run the web application in the command line with mix phx.server, and we will have something like this:

Notice that this is a very basic setup, so other ES6 features like class properties are not available and will require additional configurations.

The full project for this example is available at GitHub: https://github.com/guillegr123/phoenix_preact

Happy coding!

domingo, 19 de agosto de 2018

Bueno, por azares del destino, finalmente fue inevitable tener que adquirir el gusto de React. Es la tendencia, culpa de Facebook. Habiéndome desahogado, empecemos.

Intro a React.js

React.js es una herramienta de JavaScript para construir interfaces de usuario. La forma más fácil de crear el esqueleto de una aplicación de React, es utilizar la herramienta de Node JS llamada create-react-app (😒), la cual podemos instalar de forma global a través de la terminal mediante el siguiente comando (nótese que debe ejecutarse como administrador -en Windows- o root -en Linux-):

# npm install -g create-react-app

Luego, procedemos a crear la aplicación base, con el nombre "peliculas-app" (pronto verán el porqué del nombre):

$ create-react-app peliculas-app

Luego, nos trasladamos al nuevo directorio creado para la app, y la probamos ejecutar:

$ cd peliculas-app/
$ npm start

Esto compila la aplicación con Webpack y la ejecuta con un servidor interno de desarrollo, publicándola localmente en el puerto 3000, por defecto. Al abrir la aplicación web, se muestra lo siguiente:

Al observar la estructura de la aplicación, tenemos algo similar a esto:

La página principal se encuentra en el archivo public/index.html. Por otra parte, el componente principal de React, el cual renderiza todo el contenido mostrado en la página inicial, se encuentra en el archivo src/App.js. En este último archivo, por ejemplo, podemos reemplazar el contenido del párrafo que usa la clase App-intro, con el texto "Hola mundo", así:

Una vez que se guarda el archivo, se recompila la aplicación de forma automática, por lo que podemos ver el cambio reflejado en el navegador de forma casi inmediata:

Creación de la aplicación: lista de películas

Luego de esta rápida introducción práctica a React, procederé a crear mi primera aplicación web con React. La aplicación consistirá en mostrar en pantalla un listado de nombres de películas, obtenidos desde un arreglo de datos. La película incluirá el título, una breve sinopsis y una imagen. El listado, así como cada ítem de este, será un componente distinto. Comencemos:

1. Primero agregaremos el listado de películas en el estado de la aplicación. Pondremos 3 para este ejemplo:

2. Luego crearemos un nuevo componente para mostrar cada ítem de la lista, en el cual mostraremos la imagen, el nombre y la sinopsis de esta. Cada ítem sera un elemento de tipo <li>. Dicho componente se creará en un nuevo archivo de JavaScript, al que llamaremos Item.js, dentro de la carpeta src.

En este componente se recibe como parámetro la variable props, la cual nos sirve para recibir datos de quien invoque este componente. En este caso, dentro de props recibiremos el campo pelicula, el cual contendrá la información de un elemento de la lista de películas: id, nombre, sinopsis y urlImagen. El componente renderiza la vista HTML que definimos en el cuerpo de la función, y en la cual podemos hacer uso de los props al incluirlos entre llaves.

3. Seguidamente procedemos a crear un tercer componente, en un nuevo archivo que nombraremos Lista.js. Este componente será el encargado de renderizar la lista, haciendo uso del componente Item para renderizar cada elemento, de la siguiente forma:

Nótese que este componente recibe el parámetro listaPeliculas dentro de los props, el cual contendrá el arreglo de películas. Este arreglo se itera mediante la función map(), dentro del cuerpo de la lista (<ul></ul>), para convertir cada elemento del arreglo en una vista, haciendo uso del componente Item. Puede observarse que el elemento es pasado a cada Item mediante el atributo pelicula, que es el nombre con el que se le hace referencia en dicho componente. Cabe mencionar que para hacer uso del componente Item, debemos importarlo al inicio del archivo de javascript.

4. Para armar la aplicación final, sustituimos en el componente principal (App.js) el párrafo que contenía la frase "Hola Mundo", por un div, y dentro de este colocamos el elemento Lista, al cual le proporcionaremos el arreglo de películas a través del atributo listaPeliculas, que es el nombre con el cual le hacemos referencia en dicho componente. Cabe recordar que para poder utilizar el componente Lista, debemos importarlo antes.

El resultado final del componente principal contenido en App.js es el siguiente:

5. Finalmente, para mostrar las películas de forma ordenada, agregamos algunos estilos CSS al final del archivo App.css, para aplicarlos globalmente a través del componente principal:

El resultado es el siguiente:

El código fuente de este ejemplo lo pueden encontrar acá: https://github.com/guillegr123/react-primera-app

Intenté que los commits fueran quedando conforme a cada paso descrito en esta entrada del blog. Pueden consultarlos acá: https://github.com/guillegr123/react-primera-app/commits/master

Conclusiones

Después de haber hecho esta primera prueba con React, resulta que se parece a Vue 2, jajaja. Al menos hasta donde pude ver, el concepto de componente es similar. Seguiré viendo qué tan parecido es a medida vaya progresando con esta herramienta.

Saludos. Happy coding!

martes, 15 de mayo de 2018

Índice:

Parte 1: Qué es Vue.js y preparación del entorno

Parte 2: Creación de proyecto desde plantilla

Hola nuevamente, en esta ocasión continuaré con la segunda entrega del tutorial de Vue.js 2. En esta ocasión trataremos los siguientes puntos:

Definición general del ejemplo
Descarga de plantilla WebPack.
Ejecución de proyecto de ejemplo.
Introducción a la estructura del proyecto

Definición del ejemplo

Para este tutorial, como ejemplo se elaborará una lista de contactos telefónicos, que permita hacer las operaciones ACME con ellos: Añadir, Consultar, Modificar o Eliminar. Los requerimientos específicos se irán describiendo a medida se vaya avanzando en el tutorial.

Descarga de plantilla WebPack

Asumiendo que se instalaron los componentes necesarios indicados en la primera parte del tutorial, podemos proceder a crear la carpeta que contendrá nuestro proyecto en el lugar que deseemos. Luego, abrimos la consola en dicha carpeta, y procedemos a generar el nuevo proyecto a partir de la plantilla de webpack, haciendo uso de la herramienta de línea de comandos de Vue (vue-cli), para ejecutar el siguiente comando:

$ vue init webpack vue2-tutorial-contactos

Con ese comando, le indicamos a la línea de comandos de Vue que deseamos iniciar un nuevo proyecto, a partir de la plantilla webpack, y cuyo nombre será vue2-tutorial-contactos. Luego de ello, para completar la creación del proyecto, la herramienta interactiva preguntará al usuario la información necesaria para generarlo:

En algunos casos, la herramienta mostrará los valores por defecto a un lado del dato requerido, en un tono más claro, y entre paréntesis. Tal es el caso del nombre del proyecto, que como puede notarse es el mismo que le enviamos como tercer parámetro al comando para generar el proyecto. Si deseamos utilizar el valor por defecto, solamente presionamos ENTER. Si no, digitamos el nuevo valor, y presionamos ENTER.

Luego de ello nos solicita la descripción del proyecto. En este caso, ingresamos una pequeña sinopsis de nuestro proyecto de prueba:

El siguiente dato solicitado es el autor del proyecto, el cual se obtiene de la configuración global de GIT:

Seguidamente el asistente nos indica que elijamos el tipo de compilación a utilizar con Vue. En este ejemplo utilizaremos la recomendada, la cual es más fácil de utilizar, pero levemente más pesada (de acuerdo a la descripción, no he probado la segunda opción, jejeje):

Luego debemos elegir si instalar o no el vue-router en nuestro proyecto, el cual se utiliza para navegar entre distintas partes de la aplicación. Si bien no es necesario poseer un componente de enrutamiento elaborado para este proyecto, ya que no tendremos una gran cantidad de "páginas", lo utilizaremos a modo de ejemplo, ya que puede ser de utilidad para proyectos de mayor envergadura. Para instalarlo ingresamos la letra Y, o bien presionamos ENTER solamente, ya que esta es la opción por defecto.

Después se solicita indicar si se utilizará la herramienta ESLint para analizar el código fuente (linter). Si bien no es necesario, ya que Vetur lo hará dentro del Visual Studio Code, dejaremos que el asistente lo instale, para ver cómo se ejecuta y muestra esta herramienta al momento de correr el proyecto.

Luego elegimos la configuración estándar de reglas de ESLint (he aquí una comparación de las configuraciones de lint):

En el siguiente paso, se nos pide indicar si deseamos que el asistente prepare pruebas unitarias para el proyecto. Indicaremos que sí (Y), y seguidamente elegiremos a Karma y Mocha como herramientas para la creación y ejecución de las pruebas.

Como penúltimo paso, se nos pregunta si deseamos que se preparen las pruebas de extremo a extremo (end-to-end) utilizando Nightwatch. Indicaremos que sí.

Y finalmente, el asistente nos consulta si deseamos que se ejecute el comando npm install, una vez creado el proyecto, para instalar todas las librerías y componentes necesarios para poderlo ejecutar. Seleccionaremos que sí, utilizando la herramienta NPM:

Una vez completados estos pasos, el asistente procede a crear el proyecto, e instalar los paquetes necesarios:

Y nos indica cuando el proceso ha finalizado:

Ejecución del proyecto de ejemplo

Allí, en color mostaza, nos indica como podemos ejecutar el proyecto. Tal como dice allí, basta con ingresar a la carpeta vue2-tutorial-contactos, que es la que contiene el proyecto (nótese que el nombre de la carpeta es el mismo que indicamos al iniciar el asistente de vue-cli), y ejecutar el comando npm run dev. Con ello se procede a construir el proyecto.

Una vez finalizada la construcción, se nos indica que se puede ver la aplicación en la URL: http://localhost:8080

Al abrir la ruta en el navegador, vemos el resultado:

Introducción a la estructura del proyecto

Ahora que el proyecto ya esta listo, podemos abrir la carpeta que lo contiene utilizando Visual Studio Code, con la opción de menú File > Open Folder:

En este punto las partes de la estructura del proyecto que más nos interesan son las siguientes:

src: contiene el código fuente de Vue del proyecto.
index.html: es la página de inicio de la aplicación.

Una gran ventaja de que este proyecto haya sido generado con WebPack es que posee la característica de hot-reload, lo cual quiere decir que luego de modificar un archivo, este es recompilado, y la página web es refrescada automáticamente para ver los cambios. Para probar esto, podemos modificar el mensaje dentro archivo src/components/HelloWorld.vue, así:

Al guardar el archivo, WebPack detecta el cambio, y recompila el archivo modificado, lo cual puede observarse en la terminal donde está corriendo la aplicación:

Y una vez finalizada la compilación, la página es refrescada automáticamente en nuestro navegador (y si no es el caso, basta que la refresquemos nosotros mismos). Nótese el cambio en el texto del mensaje:

Esto es todo en esta ocasión. Pueden encontrar el código fuente de esta parte del tutorial acá: https://github.com/guillegr123/vue2-tutorial-contactos/tree/tutorial-parte-02. Espero próximamente poder mostrar como crear nuestra lista inicial de contactos. Saludos.

miércoles, 6 de diciembre de 2017

Hola nuevamente. Tratando de manternerme conectado, (y mientras espero a que se termine de instalar SQL Server), en esta ocasión quiero compartirles una forma bastante sencilla de hacer un panel de cargado con CSS y javascript. El panel de cargado usualmente es un componente que se utiliza para invalidar un área determinada de la página web mientras se realiza algún proceso, para evitar que el usuario realice alguna acción dentro de dicha área.

El panel que les mostraré básicamente es un DIV que poseerá un GIF animado como indicador de procesamiento. Este “panel” se superpondrá a otro elemento DIV, que es el área a invalidar.

Primeramente, este es el HTML de la página web:

Obsérvese que el DIV que se desea invalidar es el que posee el ID "area_invalidar". Dentro de este se ha colocado el DIV que servirá de panel de cargado, como primer elemento hijo (ID="panel_carga").

Luego, tenemos el archivo CSS ("estilos.css"):

La parte de mayor interés está marcada entre los comentarios "Clases CSS de interés". Nótese que el DIV que representa el área a invalidar tendrá la propiedad position con el valor relative, mientras que el DIV que será nuestro panel de carga tendrá el valor de absolute. Esto se debe a que queremos indicar que las propiedades de posición y tamaño del DIV panel de carga serán relativas con respecto al DIV área a invalidar. Gracias a ello podemos especificar el ancho y alto del DIV panel de carga como 100%, para indicar que éste ocupará todo el espacio del área a invalidar.

Luego, en la misma clase utilizada para el panel de carga, tenemos la propiedad de opacidad (alpha para Internet Explorer, opacity para Mozilla Firefox y otros), con la cual especificamos la razón o porcentaje de opacidad del panel de cargado. Al combinarla con un color de fondo (background-color) se logra un efecto de oscurecimiento y transparencia sobre el área invalidada. Adicionalmente a ello se coloca una imagen de fondo, que en este caso es un GIF animado, mediante la propiedad background-image, para que muestre al usuario un indicador de que se está realizando alguna clase de procesamiento. La imagen es centrada y aparece solamente una vez, gracias a las propiedades background-position:center y background-repeat:no-repeat, respectivamente.

También se tiene la propiedad z-index, que indica la “altura” o nivel del elemento. Dicha propiedad tiene significado dentro del elemento padre, por lo que tiene influencia para todos los nodos hermanos. El valor por defecto es cero, por lo que al colocar un valor de, por ejemplo, 10, nos aseguramos de que el panel de cargado estará sobre el resto de elementos contenidos en el DIV de área a invalidar.

Finalmente tenemos la propiedad de visibilidad, que le colocamos el valor de hidden, para que el panel de carga aparezca oculto al mostrarse la página.

Por otra parte se tiene el archivo de código fuente de Javascript. El javascript es necesario para realizar el cambio de las propiedades CSS a través de las acciones del usuario.

En este caso, según puede observarse en la página HTML (arriba), al presionar el botón "Enviar" se ejecutará la función procesar, que recibe como parámetro el ID del DIV que sirve de panel de carga. Dicha función básicamente se encarga de mostrar el DIV de carga.

Nótese que para efectos demostrativos, al final de la función se colocó una llamada a la función setTimeout, para que el panel de cargado se oculte después de 5 segundos. En una aplicación web real, el panel debería de ocultarse una vez se haya obtenido alguna respuesta o resultado después del proceso solicitado.

Este es el resultado final, antes de presionar el botón:

Luego de presionar el botón, nótese el aparecimiento del panel de cargado solamente sobre el área a invalidar, que para efectos de este ejemplo corresponde al mismo formulario web:

Finalmente después de 5 segundos se oculta el panel de cargado, gracias al uso de la función SetTimeOut.

Como pueden observar este método es una forma fácil, rápida y directa de crear un panel de cargado DIV, utilizando solamente HTML, CSS y javascript puros.

Les debo el código fuente para descargar, ya que lo dejé en otra computadora que he prestado por el momento.

Saludos.

Publicado originalmente el 13/02/2013, en https://itsouvenirs.wordpress.com/2013/02/13/diseno-web-panel-de-carga-loading-panel/.

domingo, 22 de octubre de 2017

Índice:

Parte 1: Qué es Vue.js y preparación del entorno

Parte 2: Creación de proyecto desde plantilla

Hola, este es un pequeño tutorial acerca de Vue.js 2 (que espero sí pase de la primera entrega, a diferencia de mis intentos fallidos con Symfony 2 - que por cierto ya van por la v3 - y WebAPI 2 - que por cierto ya esta siendo sustituida por ASP.NET Core 2). La idea de este tutorial surgió como una forma de práctica, después de seguir el tutorial Build a To-Do App with Vue.js 2 de Jeremy Kithome en scotch.io, y para compartir acerca del framework en español.

En esta primera entrega se explicará un poco acerca de qué es Vue.js, y cómo preparar el entorno de desarrollo utilizando Node JS y la herramienta de línea de comandos provista por el framework.

Sin más que agregar, ¡empecemos!

¿Qué es Vue.js?

Vue (pronunciado viú) es un framework progresivo para construir interfaces de usuario utilizando HTML, CSS y Javascript. Es progresivo porque ha sido diseñado para ser adoptado de forma gradual, siendo posible integrarlo con otras librerías en proyectos existentes. Este framework ha sido influenciado desde sus inicios por AngularJS (Angular 1); sin embargo, es más liviano que este, y que otras alternativas similares.

Preparación del entorno de desarrollo

Aunque Vue no depende de ningún framework o herramienta de terceros, y puede codificarse usando cualquier editor de texto, para este tutorial se hará uso de Node JS y la herramienta Vue CLI para la creación del "esqueleto" de la aplicación y su ejecución, y Visual Studio Code con una extensión para el soporte de los componentes de Vue, para la codificación.

Primeramente, se procede a instalar Node JS. Para ello, se recomienda descargar e instalar la versión LTS desde el sitio web oficial (6.11.4 con NPM 3.10.10), para el sistema operativo que se esté utilizando: https://nodejs.org/es/download/

Una vez instalado Node JS, procedemos a instalar la herramienta Vue CLI, que provee un conjunto de plantillas para la creación rápida de aplicaciones. También facilita su ejecución con recarga en caliente, y su compilación para ambiente de producción. Para instalar la herramienta se ejecuta en una terminal el siguiente comando:

npm install -g vue-cli

Para verificar que Vue CLI ha sido instalado correctamente, ejecutamos el comando vue en la línea de comandos, lo cual nos muestra las opciones de uso disponibles:

Luego, con respecto a la edición del codigo fuente, se procede a descargar e instalar Visual Studio Code. La última versión del editor puede descargarse en el siguiente enlace, para el sistema operativo que se esté utilizando: https://code.visualstudio.com/download

Finalmente, para facilitar la edición de los componentes de Vue, buscamos e instalamos "Vetur" en las extensiones de Visual Studio Code.

Vetur es un conjunto de herramientas para trabajar con Vue, que incluye un servidor de lenguaje para VS Code, y provee las funcionaliedades de embellecimiento de código, revisión se errores, auto-completamiento, depuración, entre otras.

Con esto ya se tiene un entorno listo para el desarrollo de nuestra primera aplicación con Vue. En la próxima entrada explicaré como crear el proyecto a partir de la plantilla de webpack, ejecutarlo, ~~y agregar las primeras funcionalidades básicas~~.

Ir a Parte 2: Creación de proyecto desde plantilla

sábado, 26 de agosto de 2017

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.

Souvenirs de IT