{"id":16345,"date":"2023-08-21T12:38:57","date_gmt":"2023-08-21T16:38:57","guid":{"rendered":"https:\/\/cl.abstracta.us\/blog\/?p=16345"},"modified":"2024-02-15T16:50:56","modified_gmt":"2024-02-15T19:50:56","slug":"automatizacion-pruebas-software-cypress-integracion-continua","status":"publish","type":"post","link":"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/","title":{"rendered":"Automatizaci\u00f3n de pruebas E2E con Cypress e integraci\u00f3n continua"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>En este art\u00edculo, exploramos Cypress y Cucumber para realizar pruebas automatizadas desde cero, orientadas a las pr\u00e1cticas de BDD <strong>(Behavior Driven Development<\/strong>) y CI (Continuous Integration), desde su implementaci\u00f3n, instalaci\u00f3n de dependencias, hasta llegar a un script automatizado.<\/strong><\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/wY0dg_6GY9WJPXiNwhv0AO3axjnmvlt5XhvAFiydNg2zNFSMK1Ku7XOUcecvZVLZnJHrz-3bBVBxO6-gXeJef0MvUFRS7jV84vGtPC57VwFzWMuOSbT15LuNKyBm4miIEc4sE0_xcgLpQ1Npo5VVpHc\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>En este art\u00edculo compartimos el resultado de la exploraci\u00f3n realizada a Cypress, una herramienta de pruebas de software end-to-end eficiente y de f\u00e1cil uso.<\/p>\n\n\n\n<p>Revisamos sus capacidades y cobertura en funci\u00f3n de las pruebas E2E para garantizar la calidad y la funcionalidad en diferentes entornos y escenarios, asegurando que la aplicaci\u00f3n se comporte seg\u00fan lo esperado en todos los niveles de integraci\u00f3n.<\/p>\n\n\n\n<p>Al ejecutar pruebas directamente en el navegador y ofrecer caracter\u00edsticas avanzadas como Time Travel, <strong>Cypress facilita la escritura, la depuraci\u00f3n y la observaci\u00f3n de pruebas para desarrolladores y equipos de calidad<\/strong>.<\/p>\n\n\n\n<p>Inicialmente, se hablar\u00e1 sobre Cypress, en qu\u00e9 consisten sus componentes y cu\u00e1les son sus herramientas complementarias. Se ahondar\u00e1 espec\u00edficamente en Cypress, mostrando cu\u00e1les son sus principales caracter\u00edsticas y beneficios. Finalmente, se explicar\u00e1 c\u00f3mo utilizar esta herramienta y sus componentes principales.<\/p>\n\n\n\n<p>Este repositorio contiene la implementaci\u00f3n de pruebas realizadas con Cypress y Cucumber.&nbsp;Est\u00e1 orientado a BDD y CI\/CD, dado que posee la <strong>integraci\u00f3n de un pipeline de Jenkins<\/strong> que permite ejecutarlas conect\u00e1ndose a un repositorio Git donde se encuentran las versiones de las automatizaciones.<\/p>\n\n\n\n<p>Adem\u00e1s, se agregaron algunos contenedores de Docker para optimizar los recursos disponibles. El sistema operativo utilizado fue Windows.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u00bfQu\u00e9 es Cypress? \u00bfC\u00f3mo funciona?<\/strong><\/h2>\n\n\n\n<p><strong>Cypress es una herramienta de automatizaci\u00f3n de pruebas de software open source que permite escribir pruebas E2E para aplicaciones web<\/strong>. Es una herramienta r\u00e1pida, f\u00e1cil de aprender y de usar, dise\u00f1ada para ser empleada por desarrolladores y equipos de calidad.<\/p>\n\n\n\n<p>La herramienta funciona ejecutando sus pruebas dentro de un navegador web, lo que permite visualizar c\u00f3mo luce y se comporta la aplicaci\u00f3n en tiempo real. Esto hace que resulte sencillo identificar problemas y solucionarlos r\u00e1pidamente.<\/p>\n\n\n\n<p>Tambi\u00e9n admite una variedad de caracter\u00edsticas que la hacen ideal para la automatizaci\u00f3n de pruebas, como la captura de pantalla autom\u00e1tica, el registro de la consola y la grabaci\u00f3n de videos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Caracter\u00edsticas de Cypress<\/strong><\/h2>\n\n\n\n<p>Entre los principales atributos de Cypress se pueden destacar los siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pruebas en Tiempo Real<\/strong>: Cypress permite ver pruebas que se ejecutan en tiempo real en el navegador facilitando la depuraci\u00f3n.<\/li>\n\n\n\n<li><strong>Time Travel:<\/strong> Cypress toma instant\u00e1neas a medida que se ejecutan las pruebas, permiti\u00e9ndote volver en el tiempo y ver c\u00f3mo estaba el DOM en diferentes puntos.<\/li>\n\n\n\n<li><strong>Interacci\u00f3n de Usuario Simulada<\/strong>: Puedes escribir pruebas que simulan la interacci\u00f3n real del usuario, como clics, desplazamientos, teclas, etc.<\/li>\n\n\n\n<li><strong>Integraci\u00f3n Continua<\/strong>: Cypress es adecuada tanto para el desarrollo local como para la integraci\u00f3n continua, facilitando la configuraci\u00f3n de pruebas en diferentes entornos.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bf<strong>C\u00f3mo utilizar Cypress<\/strong>?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Instalaci\u00f3n<\/strong>: Cypress se puede instalar f\u00e1cilmente a trav\u00e9s de <em>npm<\/em> o <em>yarn<\/em>. A menudo se instala como una dependencia de desarrollo en un proyecto.<\/li>\n\n\n\n<li><strong>Escritura de Pruebas<\/strong>: Las pruebas se escriben usando una sintaxis que es similar a Mocha y Chai. Puedes escribir pruebas utilizando JavaScript.<\/li>\n\n\n\n<li><strong>Ejecuci\u00f3n de Pruebas<\/strong>: Puedes ejecutar pruebas en tu navegador local durante el desarrollo o en un servidor de integraci\u00f3n continua. Cypress dispone de un panel de control donde puedes ver las pruebas que se ejecutan en tiempo real.<\/li>\n\n\n\n<li><strong>Aserciones<\/strong>: Cypress utiliza una variedad de aserciones para verificar que tu aplicaci\u00f3n est\u00e1 funcionando correctamente. Puedes probar elementos espec\u00edficos del DOM, realizar llamadas de red, revisar cookies y mucho m\u00e1s.<\/li>\n<\/ul>\n\n\n\n<p><strong>Requisitos t\u00e9cnicos<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>NodeJS<\/strong>:&nbsp;Se puede descargar desde <a href=\"https:\/\/nodejs.org\/en\/download\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>. Para su instalaci\u00f3n solo basta con descargar el archivo ejecutable y seguir los pasos que indica el wizard. Verificar la instalaci\u00f3n correcta ejecutando los siguientes comandos en una terminal: node -v y npm -v<\/li>\n\n\n\n<li><strong>Git<\/strong>: Se puede descargar desde <a href=\"https:\/\/git-scm.com\/download\/win\" target=\"_blank\" rel=\"noreferrer noopener\">esta ruta<\/a>.<\/li>\n\n\n\n<li><strong>VSCode<\/strong>: Se puede usar cualquier IDE de preferencia, pero para el desarrollo de este proyecto fue el que se utiliz\u00f3 y recomienda.&nbsp; Se puede descargar desde <a href=\"https:\/\/code.visualstudio.com\/download\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/li>\n\n\n\n<li><strong>Docker<\/strong>: Descargar desde <a href=\"https:\/\/docs.docker.com\/desktop\/install\/windows-install\/\" target=\"_blank\" rel=\"noreferrer noopener\">ac\u00e1<\/a> e instalar siguiendo el wizard.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Automatizaci\u00f3n de Pruebas con Cypress<\/strong><\/h2>\n\n\n\n<p>Para comenzar la automatizaci\u00f3n con Cypress debes seguir los siguientes pasos:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Descargar o clonar el repositorio con el proyecto desde <a href=\"https:\/\/github.com\/FreddyVal\/cucumber-cypress-framework\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>. Este repositorio debe ser guardado en una carpeta creada previamente para nuestra automatizaci\u00f3n.<\/li>\n\n\n\n<li>A continuaci\u00f3n, abrir el proyecto en VSCode y ejecutar <em>npm install<\/em> desde la terminal del IDE. Esto instalar\u00e1 las dependencias de desarrollo cargadas en el proyecto. Sugiero verificar que tenemos las siguientes dependencias en nuestro archivo package.json.&nbsp;<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/UlcMjX9bp_S4q0w1r38TwDKXx4Fx-3jT4afWuOhLfTAM-AYh_ACrFdbPUiEdjbYBph_jG-jkQeeXyPsEerDOy1A5B3XaRxGKmZSuiGdjG95hqO3r8DSJo6eA2kMoHv651GOITzPuz1c8KQvHqR3wE7M\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>En caso de no tener alguna de las dependencias, estos son los instaladores que deben ser ejecutados en una terminal desde el directorio raiz:<\/p>\n\n\n\n<p><em>npm install cypress &#8211;save-dev<\/em><\/p>\n\n\n\n<p><em>npm i -D cypress @bahmutov\/cypress-esbuild-preprocessor esbuild<\/em><\/p>\n\n\n\n<p><em>npm install @badeball\/cypress-cucumber-preprocessor \u2014-save-dev&nbsp;<\/em><\/p>\n\n\n\n<p>3. Luego, verificar que tenemos el siguiente script en nuestro package.json: <em>&#8220;cypress:open&#8221;: &#8220;cypress open&#8221;<\/em>.&nbsp;En caso de no existir, agregarlo debajo de scripts. Ejecutar desde la terminal <em>npm run cypress:open<\/em><\/p>\n\n\n\n<p>En este punto, se debe levantar el runner de Cypress donde podremos ver nuestros spec y ejecutar las pruebas en modo GUI (interfaz gr\u00e1fica de usuario). Despu\u00e9s, seleccionar &#8220;E2E Testing&#8221; y posteriormente el navegador de preferencias (se recomienda Chrome). Inmediatamente, se generar\u00e1 una vista como esta:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/wJhOI_7Rf2I7-6OyTpbkC6G81PMWrvZAhGCvgtJRhIUo35TosZ-8EoDB_iBWSpRdnzB7fCjX7E8fG6T4RDPaqt-6mqPQoXVWpL4d8aDgQ3pLK5b7YpUrgGvZJNEF7jvif8sJpmOEtWpNypVObUDDORQ\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>4. Luego, hacer clic en el spec cart.feature y verificar la ejecuci\u00f3n de las pruebas. Al finalizar, ejecutar por consola <strong>node .\\cucumber-html-report.js<\/strong> para generar el reporte.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Integraci\u00f3n de Cypress con Docker<\/strong><\/h2>\n\n\n\n<p>Docker es una plataforma open source que permite a los desarrolladores y administradores de sistemas construir, empaquetar y ejecutar aplicaciones como contenedores ligeros y aut\u00f3nomos. Estos contenedores pueden funcionar en cualquier entorno que tenga instalado Docker, lo que elimina los problemas de inconsistencia al mover c\u00f3digo entre diferentes etapas del ciclo de desarrollo.&nbsp;Esto conlleva un desarrollo m\u00e1s r\u00e1pido, pruebas m\u00e1s consistentes y despliegues m\u00e1s fiables.<\/p>\n\n\n\n<p>Esta integraci\u00f3n permite crear un entorno de desarrollo con los componentes y dependencias necesarios para los proyectos, sin necesidad de realizar instalaciones de manera local. Con esto logramos optimizar tiempos y recursos. Ahora, mostrar\u00e9 un ejemplo de c\u00f3mo ejecutar nuestros tests en un contenedor de Docker.<\/p>\n\n\n\n<p>Dentro del proyecto, en el directorio ra\u00edz, existe un archivo llamado Dockerfile. Este contiene las instrucciones para crear el contenedor con todas las dependencias necesarias para <strong>ejecutar las pruebas automatizadas con Cypress<\/strong>.<\/p>\n\n\n\n<p>En la l\u00ednea FROM est\u00e1 la instrucci\u00f3n con la imagen de Docker que vamos a utilizar. En nuestro caso, estamos empleando la \u00faltima versi\u00f3n de Cypress\/browser, sin embargo, esta puede ser cambiada por cualquiera de las disponibles.<\/p>\n\n\n\n<p>Para este caso en espec\u00edfico, se podr\u00edan usar tambi\u00e9n, im\u00e1genes de Cypress\/included. Toda esta informaci\u00f3n se encuentra disponible <a href=\"https:\/\/github.com\/cypress-io\/cypress-docker-images\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<p>Para crear el contenedor ejecutamos la siguiente instrucci\u00f3n: <em>&#8220;docker build -t &lt;nombre_contenedor:version&gt;&#8221;<\/em>. La variable <em>nombre_contenedor:version<\/em> es inventada para identificar nuestro contenedor. Un ejemplo podr\u00eda ser: <em>&#8220;docker build -t cypressproject:1.0&#8221;<\/em>.<\/p>\n\n\n\n<p>Una vez creada, deber\u00edamos ver la imagen creada en nuestro Docker:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/9UoDO__tiDW24jj22UrAQ2b3_7GgSbvrdo3ZKloK-kAMDPVChXn-RbD8zezggYPJz5PxSDqNYchzvIqrW7fP7cqumxQyqdTWQUTFlPi4bTUziDZArPJ4dZPGPgv-XwL4vQo1rKUvPuHhNNr6-s24a2s\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Una vez realizado este paso, solo nos queda ejecutar nuestras pruebas en nuestro contenedor con la siguiente instrucci\u00f3n en nuestro terminal: <em>docker run -i -t cucumberproject:1.0 cypress run &#8211;spec cypress\/e2e\/features\/* &#8211;browser chrome<\/em><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/iKDypCo6sj4twxPANc-yeRhW26kgchyoae8Bx_UzCV9VwwwvnFAVRHrq5ifaAiYnb3F_JsuGAg9xAImRUxrNnHxNi78_Sc6TvifN50RJ1en0C9dkDYVBiROC_V6Vua3VjW7-BxkMh9EJ9pcwSHg9DYU\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Algunos comandos \u00fatiles a tener presente en Docker son los siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>docker ps<\/strong>:&nbsp;Muestra todos los contenedores en ejecuci\u00f3n.&nbsp;<\/li>\n\n\n\n<li><strong>docker images<\/strong>: Lista todas las im\u00e1genes descargadas en tu sistema.&nbsp;<\/li>\n\n\n\n<li><strong>docker stop<\/strong>: Detiene uno o m\u00e1s contenedores en ejecuci\u00f3n. Ejemplo: <em>docker stop container_id<\/em>&nbsp;<\/li>\n\n\n\n<li><strong>docker rm<\/strong>: Elimina uno o m\u00e1s contenedores. Ejemplo: <em>docker rm container_id<\/em>&nbsp;<\/li>\n\n\n\n<li><strong>docker exec<\/strong>: Ejecuta un comando dentro de un contenedor en ejecuci\u00f3n. Ejemplo: <em>docker exec -it container_id bash<\/em>&nbsp;<\/li>\n\n\n\n<li><strong>docker logs<\/strong>: Muestra los registros de un contenedor en ejecuci\u00f3n. Ejemplo: <em>docker logs container_id&nbsp;<\/em><\/li>\n<\/ul>\n\n\n\n<p>Para obtener mayor informaci\u00f3n de los comandos de Docker, <a href=\"https:\/\/docs.docker.com\/desktop\/\" target=\"_blank\" rel=\"noreferrer noopener\">pincha aqu\u00ed<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Integraci\u00f3n con Jenkins en Docker<\/strong><\/h2>\n\n\n\n<p>Jenkins nos permite realizar la construcci\u00f3n, prueba y despliegue continuo de nuestros proyectos.&nbsp; En este apartado veremos como crear un pipeline que nos permita ejecutar pruebas sobre el proyecto, tomando como base el contenido de las pruebas de un repositorio Git.&nbsp; Pedemos utilizar Jenkins instalado de manera local, como tambien integrado con Docker.&nbsp; Este \u00faltimo ser\u00e1 nuestro caso.&nbsp; Para esto, hacemos lo siguiente:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ingresamos al <a href=\"https:\/\/hub.docker.com\/\">dockerhub<\/a> y en el buscador ingresamos &#8220;jenkins\/jenkins&#8221; y presionamos buscar.<\/li>\n\n\n\n<li>Seleccionamos el primero que nos aparece en el listado<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/l-KQDWiiHD-WjWx7m7N-RVf07TNXKSOP9zv8uM9woL_Dqso1r12xTOOprExueposKfSSW9c43-NCAl61k4_0Z4MbVJWb8vWKgZzjTfOHDeUVUT1meGSTcUKktRJhX0cI9UVLbmhuqWjYl8cHZeVMK2g\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>3. Podemos utilizar cualquiera de las dos versiones que nos aparecen desplegadas.&nbsp;Para este proyecto, se us\u00f3 la versi\u00f3n lts.&nbsp;Solo debemos la instrucci\u00f3n que nos aparece indicada y la ejecutamos desde una terminal. Se crear\u00e1 autom\u00e1ticamente la imagen en nuestro contenedor<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/gH0MqIyV-jNxYQLQf2_qi98Yi-5wdqlw3aSuFcyCB98p6shgBq2BLuxDI-8g_U1KvkesYnyREop5LUw0KeOF8rWGtGcFMH2lGhRLNDXN3zrnZd_6mL4rnp7A77z-2l62zFY-YPQyXy-eBc3436Lw37I\" alt=\"\"\/><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/qD4SX8Yvtde4ujn5NUyw4pD7uMYvkBtw_XCwzRadLjtnA5LxTACKpnopeJBoft2GECevkeuj5aBf2CgVVV0Gf7qGpZNTTeCrG1-Qga6cWeCO8TZdv9hEIGjGW6w4p_x6I4XSngkxMCqp5d2_eSAwEv0\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>4. Ejecutamos el contenedor reci\u00e9n creado con la instrucci\u00f3n: <em>docker run -d &#8211;name jenkins -p 8080:8080 -p 50000:50000 -v jenkins_home:\/var\/jenkins_home jenkins\/jenkins:lts-jdk11<\/em>. El primer puerto indicado en esta sentencias (-p 8080:8080), a trav\u00e9s del cual nos podremos conectar a Jenkins desde nuestro local al contenedor.&nbsp;Podemos verificar el \u00faltimo contenedor creado con <em>docker ps -l<\/em>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/gh8L5_5jFMhgj1wj2iD7-0vqBVJD_Avk6h1h-NPo_O_cURU6GryzxgqBajFwsQuQCscXWRO10ddoAixKbrcKn1z72g3jungQXlK6IYoOkwgcFsInjv7PVR1jn0t-QzHzgja8reI_lEtOsVSKN-C_Ev4\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>5. Abrimos el navegador e ingresamos en la URL: localhost:8080. Debemos ver una vista como la siguiente para configurar las credenciales de acceso:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/rpua04-K-sfiW0sQchG_AzkaDCr9OA3DMX2xgw9caNrSDP0hgHqEYPd11c3Qk9e_jtJIdrGncDXhjKVnwDdglKJ4SxF9SmA92gqfQ-r_Wj4K1bDJ00OKdj8eEsO4-jkkKLpfTn99xPESXkThCLQIrXo\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>6. Copiamos la direcci\u00f3n que aparece en pantalla y ejecutamos la siguiente instrucci\u00f3n en consola: <em>docker exec jenkins cat \/var\/jenkins_home\/secrets\/initialAdminPassword<\/em><\/p>\n\n\n\n<p>7. Esta instrucci\u00f3n nos mostrar\u00e1 una password por pantalla, la cual copiamos y pegamos en el campo de texto de Administrator password.<\/p>\n\n\n\n<p>8. Instalar plugins sugeridos y darle continuar.<\/p>\n\n\n\n<p>9. Seguimos los pasos sugeridos hasta finalizar.<\/p>\n\n\n\n<p>Una vez terminado este proceso, ya tenemos jenkins listo para poder crear nuestro pipeline.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Creaci\u00f3n de pipeline y ejecuci\u00f3n de pruebas automatizadas<\/strong><\/h2>\n\n\n\n<p>Ahora que ya tenemos Jenkins configurado, procedemos a crear nuestro pipeline para la ejecuci\u00f3n de pruebas.&nbsp;Para esto es importante tener nuestro proyecto en alg\u00fan repositorio Git.&nbsp;Esto porque simularemos un <strong>proyecto real de CI\/CD para ejecuci\u00f3n de pruebas autom\u00e1ticas con un pipeline<\/strong> b\u00e1sico que posteriormente se puede parametrizar y personalizar.<\/p>\n\n\n\n<p>Este proceso tiene dos partes: la primera es la creaci\u00f3n de la \u201cc\u00e1scara\u201d del pipeline en Jenkins y la segunda es la carga de su configuraci\u00f3n desde un archivo Jenkinsfile que est\u00e1 en la ra\u00edz de nuestro proyecto.&nbsp;Seguimos estos pasos:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Una vez dentro de Jenkins, seleccionamos Nueva Tarea &gt; Ingresamos un nombre &gt; Seleccionamos Pipeline &gt; Presionamos OK.<\/li>\n\n\n\n<li>Nos dirigimos a la secci\u00f3n de Pipeline y seleccionamos &#8220;Pipeline script from SCM&#8221; para cargar un pipeline mediante nuestro repositorio GIT&nbsp;<\/li>\n\n\n\n<li>En SCM seleccionamos GIT y ponemos la ruta de nuestro repositorio. En branch ingresamos la rama donde se ubicara nuestro repositorio, en nuestro caso est\u00e1 en la rama master.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/w_LFgukIkKSbxE0AtRdm2bIaxte3qF68dFCrOgOkDeKXTFqPx6fXaa-ZltMRtYFo-nSO-Un1PtNqnwTJMKGQeXPBscgBMDS3gTGFWh91FeB_GxUqBbDsqoGJ1c_hgBC8eK-QqwjcmC7xi-BXekM-zkc\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>4. En Script Path hay que especificar la ruta donde crearemos nuestro Jenkinsfile.&nbsp; Este lo creamos en la misma ruta donde tenemos nuestro package.json de nuestro proyecto, por lo que en este campo solo debemos escribir Jenkinsfile y guardamos.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/anhNa9ciED6AmhRGLZiAq5fpNPxqPtn13RSMUK3E5yRSW-RFA72V317CFRg2yU4Qt0Gco5OonSxxmcFYhqaRRjKt2r8weMbx30KMckmzKYCS9ihdg-4lztLYxiLIWiCOdealHHJRSocmGoy7013pv30\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Nuestro Jenkinsfile:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/Y7Z9duls4QuSq51J09WFIIhQnRcEgCRcDWSGFdzV-eoM5zGnnkDrwBM-kgiBfJd-gVqAyCdzfDVTGYtjs8tY0g7KlTDX-0g11bE9abD8M2FEgicc4cXpWfV0roSlJqWflSxE7FQp4uQlhL-GzhCHV2Q\" alt=\"\"\/><\/figure><\/div>\n\n\n<p><strong>Algunas consideraciones<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Se recomienda instalar el plugin AnsiColor, el cual nos permitir\u00e1 tener una mejor visualizaci\u00f3n de los logs.&nbsp; Para esto ir al panel de control de Jenkins &gt; Administrar Jenkins &gt; Plugins &gt; Available Plugins &gt; AnsiColor.&nbsp; Si no lo vas a instalar, elimina la l\u00ednea \u201cansiColor(\u2018xterm\u2019)\u201d del Jenkinsfile.&nbsp;<\/li>\n\n\n\n<li>Nuestro Jenkinsfile tiene 3 stages: el primero simula una etapa de construcci\u00f3n de nuestro software, el segundo la etapa de testing y el \u00faltimo la etapa de desarrollo.&nbsp; Esto solamente con el objetivo de mostrar c\u00f3mo se ver\u00eda entorno de desarrollo y pruebas parecido al real, sin embargo, el primero y \u00faltimo stage solo imprimen mensajes.<\/li>\n\n\n\n<li>Recuerda que vamos a hacer la conexi\u00f3n entre nuestra \u201cc\u00e1scara\u201d y la configuraci\u00f3n del archivo Jenkinsfile, por lo que es importante que en este punto ya tengas cargado el archivo en el repositorio Git en el cual haremos la conexi\u00f3n.<\/li>\n<\/ul>\n\n\n\n<p>5. Ir al pipeline creado en Jenkins y darle Build.&nbsp;La primera vez va a fallar porque va a configurar los par\u00e1metros que generamos previamente en el Jenkinsfile.&nbsp;Cuando esto finalice, el bot\u00f3n Build nos cambiar\u00e1 a Build with Parameters.<\/p>\n\n\n\n<p>6. Darle clic a Build with Parameters.&nbsp;Si todo va bien, nos preguntar\u00e1 por los spec a ejecutar y en qu\u00e9 browser queremos la ejecuci\u00f3n (escoger el browser Electron).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/4pTq-OcGjY58ELSiR48o44T4-_bwRoPDjHscwgDmTSyE-o4uSkCYS91tO19msiDJRzreNQTWJbJ0EkIVZMs_KZ0rP3LqiAIoTE2RVvqHJUCa9lR8SeOsClrDtctA_J8cYs1FCo06WkY67n8zyVTMTS0\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>7. Le damos clic a Ejecutar y listo.&nbsp;Se mostrar\u00e1 el pipeline ejecutando con las distintas columnas de ejecuci\u00f3n correspondiente a nuestros stages.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/rbY-3hfMqIcuVX-Ym9JXJiJI9L504LX6Dlb-ShuL2YLSH0KIOjRXzgb0AWeWKMkvg1Gj6lWrf4t41fS3BBCZDxsBhDWnqZJY3JPZ85R51a30E8xz76zbL8RmuqjxNyg1_3k-hGpbWx32QVN9nhO095w\" alt=\"\"\/><\/figure><\/div>\n\n\n<p><strong>Algunas consideraciones<\/strong><\/p>\n\n\n\n<p>El contenedor de Jenkins que tenemos levantado trae por defecto solo el navegador Electron y est\u00e1 levantado con un SO de Linux, por lo que si queremos usar otro navegador, debemos instalarlo nosotros.&nbsp; Para esto debemos escribir en consola <em>docker exec -u 0 -it jenkins bash<\/em>.&nbsp; Esto nos abrir\u00e1 una consola dentro de nuestro contenedor y ejecutamos las siguientes instrucciones para instalar Chrome:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>apt update<\/em><\/li>\n\n\n\n<li><em>apt install wget<\/em><\/li>\n\n\n\n<li><em>wget https:\/\/dl.google.com\/linux\/direct\/google-chrome-stable_current_amd64.deb<\/em><\/li>\n\n\n\n<li><em>apt install .\/google-chrome-stable_current_amd64.deb<\/em><\/li>\n<\/ul>\n\n\n\n<p>Con esto ya podemos ejecutar nuestras pruebas en Chrome.&nbsp;Deben repetirse los mismos pasos si deseas utilizar otro navegador como Firefox, por ejemplo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusiones generales<\/strong><\/h2>\n\n\n\n<p>Este proyecto fue levantado y creado pr\u00e1cticamente desde 0, por lo que me encontr\u00e9 con algunas dificultades durante el proceso que documento a continuaci\u00f3n, para tenerlo que consideraci\u00f3n por si llegas a tener algunos de estos inconvenientes.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Si al ejecutar las pruebas en el test runner de Cypress y este no carga la p\u00e1gina, pero si lo hace desde el Chrome de escritorio, lo que se recomienda es ingresar a las opciones de desarrollador y verificar en consola el error.&nbsp; En mi caso el antivirus estaba bloqueando la carga de la p\u00e1gina, por lo que se recomienda desactivarlo en el momento de ejecutar las pruebas.&nbsp;<\/li>\n\n\n\n<li>Si al ejecutar el pipeline de Jenkins, en el log muestra un error del tipo <em>npm: not found<\/em>, es porque se debe instalar Node en el contenedor.&nbsp;Esto lo hacemos de la siguiente forma:<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>docker exec -u 0 -it jenkins bash&nbsp;<\/em><\/li>\n\n\n\n<li><em>apt-update<\/em><\/li>\n\n\n\n<li><em>apt install curl<\/em><\/li>\n\n\n\n<li><em>curl -sL https:\/\/deb.nodesource.com\/setup_18.x -o nodesource_setup.sh<\/em><\/li>\n<\/ul>\n\n\n\n<p>Al momento de realizar este tutorial, la \u00faltima versi\u00f3n de Node era la 18, pero para verificar, sugiero visitar <a href=\"https:\/\/nodejs.org\/es\" target=\"_blank\" rel=\"noreferrer noopener\">esta p\u00e1gina<\/a> y revisar la \u00faltima versi\u00f3n publicada, para instalar la \u00faltima estable.&nbsp;Solo basta con poner los dos primeros d\u00edgitos donde dice \u201csetup_XX.x\u201d (se deben cambiar las X en may\u00fascula) .<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>bash nodesource_setup.sh<\/em><\/li>\n\n\n\n<li><em>apt install nodejs<\/em><\/li>\n\n\n\n<li><em>exit<\/em><\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>Si al ejecutar el pipeline en jenkins aparece un error con xvfb, se debe hacer lo siguiente:&nbsp;<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>docker exec -u 0 -it jenkins bash&nbsp;<\/li>\n\n\n\n<li>apt-update<\/li>\n\n\n\n<li>apt-get install xvfb<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>Puede que al ejecutar el pipeline, aparezcan errores con algunas librer\u00edas faltantes dentro del contenedor.&nbsp;Para esto, ejecutamos <em>docker exec -u 0 -it jenkins bash<\/em> y las vamos instalando una a una.&nbsp;A continuaci\u00f3n te dejo algunas opciones posibles y su instalador correspondiente:<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-table aligncenter\"><table><tbody><tr><th>Librer\u00eda<\/th><th>Instalador<\/th><\/tr><tr><td>libgtk-3-0<\/td><td>apt-get install libgtk-3-0<\/td><\/tr><tr><td>libcups.so.2<\/td><td>apt-get install libcups2<\/td><\/tr><tr><td>libglib2.0-0<\/td><td>apt-get install libglib2.0-dev<\/td><\/tr><tr><td>libnss3.so<\/td><td>apt-get install libnss3<\/td><\/tr><tr><td>libatk1.0-0<\/td><td>apt-get install libatk1.0-0<\/td><\/tr><tr><td>libatk-bridge-2.0.so.0<\/td><td>apt-get install libatk-bridge2.0-0<\/td><\/tr><tr><td>libgbm.so.1<\/td><td>apt-get install libgbm-dev<\/td><\/tr><tr><td>libasound.so.2<\/td><td>apt-get install libasound2<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo, exploramos Cypress y Cucumber para realizar pruebas automatizadas desde cero, orientadas a las pr\u00e1cticas de BDD (Behavior Driven Development) y CI (Continuous Integration), desde su implementaci\u00f3n, instalaci\u00f3n de dependencias, hasta llegar a un script automatizado.<\/p>\n","protected":false},"author":38,"featured_media":16351,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,57],"tags":[3,110,16,17],"class_list":["post-16345","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-automatizacion-pruebas","category-herramientas-pruebas","tag-automatizacion-pruebas","tag-integracion-continua","tag-pruebas-de-software","tag-testing-software"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Automatizaci\u00f3n de pruebas E2E con Cypress e integraci\u00f3n continua - Abstracta<\/title>\n<meta name=\"description\" content=\"En este art\u00edculo, exploramos Cypress y Cucumber para realizar pruebas automatizadas desde cero, orientadas a las pr\u00e1cticas de BDD (Behavior Driven Development) y CI (Continuous Integration), desde su implementaci\u00f3n, instalaci\u00f3n de dependencias, hasta llegar a un script automatizado.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Automatizaci\u00f3n de pruebas E2E con Cypress e integraci\u00f3n continua - Abstracta\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo, exploramos Cypress y Cucumber para realizar pruebas automatizadas desde cero, orientadas a las pr\u00e1cticas de BDD (Behavior Driven Development) y CI (Continuous Integration), desde su implementaci\u00f3n, instalaci\u00f3n de dependencias, hasta llegar a un script automatizado.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de Desarrollo de Software, Testing e Inteligencia Artificial | Abstracta\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AbstractaChile\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-21T16:38:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-15T19:50:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/es.abstracta.us\/wp-content\/uploads\/2023\/08\/automatizacion-pruebas-software-cypress-integracion-continua.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Abstracta Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@AbstractaChile\" \/>\n<meta name=\"twitter:site\" content=\"@AbstractaChile\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abstracta Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/\"},\"author\":{\"name\":\"Abstracta Team\",\"@id\":\"https:\/\/es.abstracta.us\/blog\/#\/schema\/person\/374d557eb4159dd8bc80fa5cedf4e523\"},\"headline\":\"Automatizaci\u00f3n de pruebas E2E con Cypress e integraci\u00f3n continua\",\"datePublished\":\"2023-08-21T16:38:57+00:00\",\"dateModified\":\"2024-02-15T19:50:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/\"},\"wordCount\":2632,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/es.abstracta.us\/blog\/#organization\"},\"keywords\":[\"Automatizaci\u00f3n de Pruebas\",\"Integraci\u00f3n Continua\",\"Pruebas de Software\",\"Testing de Software\"],\"articleSection\":[\"Automatizaci\u00f3n de Pruebas\",\"Herramientas\"],\"inLanguage\":\"es-CL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/\",\"url\":\"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/\",\"name\":\"Automatizaci\u00f3n de pruebas E2E con Cypress e integraci\u00f3n continua - Abstracta\",\"isPartOf\":{\"@id\":\"https:\/\/es.abstracta.us\/blog\/#website\"},\"datePublished\":\"2023-08-21T16:38:57+00:00\",\"dateModified\":\"2024-02-15T19:50:56+00:00\",\"description\":\"En este art\u00edculo, exploramos Cypress y Cucumber para realizar pruebas automatizadas desde cero, orientadas a las pr\u00e1cticas de BDD (Behavior Driven Development) y CI (Continuous Integration), desde su implementaci\u00f3n, instalaci\u00f3n de dependencias, hasta llegar a un script automatizado.\",\"breadcrumb\":{\"@id\":\"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/#breadcrumb\"},\"inLanguage\":\"es-CL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/es.abstracta.us\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Automatizaci\u00f3n de pruebas E2E con Cypress e integraci\u00f3n continua\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/es.abstracta.us\/blog\/#website\",\"url\":\"https:\/\/es.abstracta.us\/blog\/\",\"name\":\"Abstracta\",\"description\":\"Recursos, buenas pr\u00e1cticas, tendencias y rese\u00f1as de herramientas de desarrollo de software, testing e Inteligencia Artificial.\",\"publisher\":{\"@id\":\"https:\/\/es.abstracta.us\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/es.abstracta.us\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es-CL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/es.abstracta.us\/blog\/#organization\",\"name\":\"Abstracta\",\"url\":\"https:\/\/es.abstracta.us\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-CL\",\"@id\":\"https:\/\/es.abstracta.us\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/es.abstracta.us\/wp-content\/uploads\/2024\/03\/abstracta-logo.png\",\"contentUrl\":\"https:\/\/es.abstracta.us\/wp-content\/uploads\/2024\/03\/abstracta-logo.png\",\"width\":1217,\"height\":300,\"caption\":\"Abstracta\"},\"image\":{\"@id\":\"https:\/\/es.abstracta.us\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/we_are_abstracta\/\",\"https:\/\/www.linkedin.com\/showcase\/abstracta-chile\/\",\"https:\/\/www.youtube.com\/channel\/UCj4dx2LZCRcgM8GzxYEKYeQ\",\"https:\/\/www.facebook.com\/AbstractaChile\/\",\"https:\/\/twitter.com\/AbstractaChile\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/es.abstracta.us\/blog\/#\/schema\/person\/374d557eb4159dd8bc80fa5cedf4e523\",\"name\":\"Abstracta Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-CL\",\"@id\":\"https:\/\/es.abstracta.us\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/918af28f3280de6f53fa272bb6aab41b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/918af28f3280de6f53fa272bb6aab41b?s=96&d=mm&r=g\",\"caption\":\"Abstracta Team\"},\"sameAs\":[\"https:\/\/cl.abstracta.us\/\"],\"url\":\"https:\/\/es.abstracta.us\/blog\/author\/abstracta-team\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Automatizaci\u00f3n de pruebas E2E con Cypress e integraci\u00f3n continua - Abstracta","description":"En este art\u00edculo, exploramos Cypress y Cucumber para realizar pruebas automatizadas desde cero, orientadas a las pr\u00e1cticas de BDD (Behavior Driven Development) y CI (Continuous Integration), desde su implementaci\u00f3n, instalaci\u00f3n de dependencias, hasta llegar a un script automatizado.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/","og_locale":"es_ES","og_type":"article","og_title":"Automatizaci\u00f3n de pruebas E2E con Cypress e integraci\u00f3n continua - Abstracta","og_description":"En este art\u00edculo, exploramos Cypress y Cucumber para realizar pruebas automatizadas desde cero, orientadas a las pr\u00e1cticas de BDD (Behavior Driven Development) y CI (Continuous Integration), desde su implementaci\u00f3n, instalaci\u00f3n de dependencias, hasta llegar a un script automatizado.","og_url":"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/","og_site_name":"Blog de Desarrollo de Software, Testing e Inteligencia Artificial | Abstracta","article_publisher":"https:\/\/www.facebook.com\/AbstractaChile\/","article_published_time":"2023-08-21T16:38:57+00:00","article_modified_time":"2024-02-15T19:50:56+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/es.abstracta.us\/wp-content\/uploads\/2023\/08\/automatizacion-pruebas-software-cypress-integracion-continua.png","type":"image\/png"}],"author":"Abstracta Team","twitter_card":"summary_large_image","twitter_creator":"@AbstractaChile","twitter_site":"@AbstractaChile","twitter_misc":{"Written by":"Abstracta Team","Est. reading time":"14 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/#article","isPartOf":{"@id":"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/"},"author":{"name":"Abstracta Team","@id":"https:\/\/es.abstracta.us\/blog\/#\/schema\/person\/374d557eb4159dd8bc80fa5cedf4e523"},"headline":"Automatizaci\u00f3n de pruebas E2E con Cypress e integraci\u00f3n continua","datePublished":"2023-08-21T16:38:57+00:00","dateModified":"2024-02-15T19:50:56+00:00","mainEntityOfPage":{"@id":"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/"},"wordCount":2632,"commentCount":0,"publisher":{"@id":"https:\/\/es.abstracta.us\/blog\/#organization"},"keywords":["Automatizaci\u00f3n de Pruebas","Integraci\u00f3n Continua","Pruebas de Software","Testing de Software"],"articleSection":["Automatizaci\u00f3n de Pruebas","Herramientas"],"inLanguage":"es-CL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/","url":"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/","name":"Automatizaci\u00f3n de pruebas E2E con Cypress e integraci\u00f3n continua - Abstracta","isPartOf":{"@id":"https:\/\/es.abstracta.us\/blog\/#website"},"datePublished":"2023-08-21T16:38:57+00:00","dateModified":"2024-02-15T19:50:56+00:00","description":"En este art\u00edculo, exploramos Cypress y Cucumber para realizar pruebas automatizadas desde cero, orientadas a las pr\u00e1cticas de BDD (Behavior Driven Development) y CI (Continuous Integration), desde su implementaci\u00f3n, instalaci\u00f3n de dependencias, hasta llegar a un script automatizado.","breadcrumb":{"@id":"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/#breadcrumb"},"inLanguage":"es-CL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/es.abstracta.us\/blog\/automatizacion-pruebas-software-cypress-integracion-continua\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/es.abstracta.us\/blog\/"},{"@type":"ListItem","position":2,"name":"Automatizaci\u00f3n de pruebas E2E con Cypress e integraci\u00f3n continua"}]},{"@type":"WebSite","@id":"https:\/\/es.abstracta.us\/blog\/#website","url":"https:\/\/es.abstracta.us\/blog\/","name":"Abstracta","description":"Recursos, buenas pr\u00e1cticas, tendencias y rese\u00f1as de herramientas de desarrollo de software, testing e Inteligencia Artificial.","publisher":{"@id":"https:\/\/es.abstracta.us\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/es.abstracta.us\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es-CL"},{"@type":"Organization","@id":"https:\/\/es.abstracta.us\/blog\/#organization","name":"Abstracta","url":"https:\/\/es.abstracta.us\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es-CL","@id":"https:\/\/es.abstracta.us\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/es.abstracta.us\/wp-content\/uploads\/2024\/03\/abstracta-logo.png","contentUrl":"https:\/\/es.abstracta.us\/wp-content\/uploads\/2024\/03\/abstracta-logo.png","width":1217,"height":300,"caption":"Abstracta"},"image":{"@id":"https:\/\/es.abstracta.us\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/we_are_abstracta\/","https:\/\/www.linkedin.com\/showcase\/abstracta-chile\/","https:\/\/www.youtube.com\/channel\/UCj4dx2LZCRcgM8GzxYEKYeQ","https:\/\/www.facebook.com\/AbstractaChile\/","https:\/\/twitter.com\/AbstractaChile"]},{"@type":"Person","@id":"https:\/\/es.abstracta.us\/blog\/#\/schema\/person\/374d557eb4159dd8bc80fa5cedf4e523","name":"Abstracta Team","image":{"@type":"ImageObject","inLanguage":"es-CL","@id":"https:\/\/es.abstracta.us\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/918af28f3280de6f53fa272bb6aab41b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/918af28f3280de6f53fa272bb6aab41b?s=96&d=mm&r=g","caption":"Abstracta Team"},"sameAs":["https:\/\/cl.abstracta.us\/"],"url":"https:\/\/es.abstracta.us\/blog\/author\/abstracta-team\/"}]}},"jetpack_featured_media_url":"https:\/\/es.abstracta.us\/wp-content\/uploads\/2023\/08\/automatizacion-pruebas-software-cypress-integracion-continua.png","_links":{"self":[{"href":"https:\/\/es.abstracta.us\/blog\/wp-json\/wp\/v2\/posts\/16345"}],"collection":[{"href":"https:\/\/es.abstracta.us\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/es.abstracta.us\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/es.abstracta.us\/blog\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/es.abstracta.us\/blog\/wp-json\/wp\/v2\/comments?post=16345"}],"version-history":[{"count":13,"href":"https:\/\/es.abstracta.us\/blog\/wp-json\/wp\/v2\/posts\/16345\/revisions"}],"predecessor-version":[{"id":17015,"href":"https:\/\/es.abstracta.us\/blog\/wp-json\/wp\/v2\/posts\/16345\/revisions\/17015"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/es.abstracta.us\/blog\/wp-json\/wp\/v2\/media\/16351"}],"wp:attachment":[{"href":"https:\/\/es.abstracta.us\/blog\/wp-json\/wp\/v2\/media?parent=16345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/es.abstracta.us\/blog\/wp-json\/wp\/v2\/categories?post=16345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/es.abstracta.us\/blog\/wp-json\/wp\/v2\/tags?post=16345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}