Cypress: pruebas automatizadas de principiante a Pro + Framework

1. 1. Introducción.: Hola y bienvenidos. Este curso está diseñado para llevarte paso a paso en el mundo de Chipre, proporcionándote las habilidades y la confianza para manejar proyectos de prueba de palabras reales, ya sea que recién estés comenzando o buscando subir de nivel. Estás en el lugar correcto. Aquí hay un resumen rápido de lo que aprendes en cada sección. En la primera sección, te guiaremos a través de la instalación y configuración de todo lo que necesitas para comenzar tu viaje con Chipre. Al final de esta sección, su entorno estará listo para sumergirse en las pruebas. A continuación, configuraremos un proyecto de Cypress desde cero. En el camino, aprenderás sobre los selectores CSS, sus tipos y cómo usarlos manera efectiva habilidades esenciales para trabajar con elementos web Esta sección profundiza en la interacción con elementos web Aprenderás a realizar acciones como hacer clic, escribir y más, así como comportamientos y estados verificados para garantizar una cobertura sólida de las pruebas. En la Sección cuatro, aplicará lo que ha aprendido a través de lecciones prácticas interactivas. También exploraremos cómo capturar capturas de pantalla y videos para mejorar tus pruebas de Cypress, proporcionando información clara durante la depuración Y en la sección final, crearás un marco completo de Cypress imitando flujos de trabajo de proyectos del mundo real Implementaremos el modelo de objetos de página, integraremos una herramienta de informes personalizada y configuraremos scripts para agilizar sus pruebas. Nos vemos en las próximas lecciones. 2. 2. Instalación de código de Visual Studio y Node.js: Bienvenido a la Lección dos. En esta lección, estaremos configurando todo lo necesario para comenzar a trabajar con Chipre. Y al final de esta lección, tendrás tu entorno de desarrollo completamente configurado y listo para funcionar. Empecemos con la instalación de Nod Jazz. Entonces deberías buscar Google Nod Jz. Deberíamos abrir el primer enlace, no.org. Y aquí debemos descargar siempre la versión LTC. Una vez completada la descarga, debemos seguir las instrucciones simplemente haciendo clic en Bien. Entonces abramos este archivo y aquí continuemos, continúe. Acordar instalar. Están pidiendo la contraseña. Sí. Por lo que la instalación se completó con éxito. Podemos cerrar, y preguntan si quiero trasladar eso a Ben. El siguiente es el código de Visual Studio o el código VS. Entonces probemos el código de búsqueda de Visual Studio. Aquí debemos ir o el primer enlace en code.visualstudood.com Y aquí porque estoy trabajando en una máquina Mac, voy a ver descarga para Mac. Si trabajarás desde una máquina con Windows, deberías ver Dolod para Windows Y si estás usando una máquina linux, no estoy seguro de ello. Vamos a hacer clic en Descargar. Una vez completada la descarga, podremos abrir ese archivo. La misma situación será en la máquina Windows. Lo trasladaré a las aplicaciones. Una vez que terminemos con el proceso de instalación, podremos abrir la aplicación de código de Visual Studio. De la lista de todas las aplicaciones, debemos dar clic en Visual Studio Code. Y aquí deberías ver una página de bienvenida si no es la primera vez que instalas el código de Visual Studio en tu máquina. Por último, hablemos de NTM o no gestor de paquetes que viene incluido con los nodejs que ya instalamos y es una puerta esencial para gestionar los paquetes y la biblioteca para Usaremos NTM para instalar Cypress y otras herramientas a lo largo de este curso Ahora verifiquemos la versión de nuestro paquete NPM. En primer lugar, deberíamos abrir una terminal. Podemos usar el terminal de código VS desde el terminal de menú, haciendo clic en Nuevo terminal o podemos abrir nuestro terminal de máquina. Entonces en el terminal, deberíamos escribir NPM menos V. Y aquí, dependiendo de tu versión, deberías ver la versión que instalas Si recibe un error eso significa que algo salió mal al instalar el paquete Nod Jz Entonces eso es todo para configurar nuestro entorno de desarrollo. Detallaremos No Jazz, configuraremos el código de Visual Studio y tocaremos brevemente a MBM que viene liado con el non En la siguiente lección, nos sumergiremos en instalar Chipre y poner en marcha nuestro primer proyecto . Nos vemos ahí. 3. 3. Configuración del proyecto desde cero.: Bienvenido de nuevo. En esta lección, vamos a crear nuestro primer proyecto Cypress Y al final de esta lección, tendrás un proyecto Cypress completamente funcional configurado y listo para escribir tu primera prueba automatizada Ya creé una carpeta y voy a abrir esa carpeta en mi aplicación de código visual studio para eso desde el archivo menu, que es carpeta abierta. Y aquí tengo mi proyecto Cypress y doy clic en Abrir. Me preguntan si es un Trust Outer, porque soy yo. El siguiente paso será abrir la terminal desde la terminal Menú, hacer clic en Nueva terminal. Ahora inicializaremos un nuevo proyecto No escribiendo NPM en él. PM te hará algunas preguntas sobre tu proyecto como nombre versión, puedes presionar Enter y dejar que todo esté predeterminado. Y después de eso, PM creará un paquete justo en archivo, que administrará la dependencia de tu proyecto. Así nombre del paquete Yenerersion Yenter Discreción Yenter Todo por defecto, Sí. Aquí podemos observar que tenemos nuestro paquete hijo justo. Aquí gestionaremos nuestras dependencias. Ahora es el momento de instalar Cypress. Para eso, volvamos a nuestra terminal. Y aquí debemos escribir el comando. NPM instala Cypress, dash, dash, save dash d. Este comando le dice al Ambien que descargue e instale Chipre como dependencia de desarrollo para Y una vez concluida la instalación , Chipre se agregará a nuestros proyectos, no a los módulos aquí. Y también dentro del paquete el hijo debemos observar la nueva dependencia Cypress Esperemos a la instalación. La instalación es completa y aquí en profundidad dependencia, podemos observar el Cypress y la versión de Chipre Y también en módulos de nodo, aquí deberíamos tener en algún lugar Chipre. Sí, lo tenemos. Sí, pero no te preocupes por esta carpeta. No vamos a trabajar con eso. Ahora que Cypress está instalado, vamos a configurar la estructura del proyecto Cypress Para ello, deberíamos abrir por primera vez la solicitud de Chipre. Para eso, de vuelta a la terminal y MP Cypress abren. Haga clic en Entrar. Este comando abre el corredor de prueba Cypress Y si, aquí se nos pide elegir entre extremo a extremo y componentes. Vamos con extremo a extremo, continuar, y estamos eligiendo Chrome. Si no tienes Chrome, por favor estudia. Y aquí nos preguntan si queremos tener los ejemplos básicos de Cypress, elegiremos tener ejemplos Bien, lo tengo. Volvamos al código de Visual Studio. Y como podemos ver después de abrir el Ciprés, un pliegue su nombre Cypress se agregó automáticamente aquí con descargas extremo a extremo, aquí guardaremos nuestras pruebas, accesorio para datos de prueba y soporte también para datos de configuración y prueba. Vamos a hacer clic en una de estas pruebas y verificar si las pruebas se están ejecutando y si instalamos todo correctamente. Escojamos uno. Digamos recorrido. ¿Importa? Y como puedes ver, Cypress es increíblemente intuitivo, mostrando exactamente lo que está sucediendo para cada paso en la prueba Esto facilita mucho el bugging y el desarrollo web Aquí, si abrimos una prueba, podemos ver qué pasó en cada paso. Muy potente, muy intuitivo. Ahora tiene un entorno de pruebas completamente funcional completo con Cypress instalado y listo para funcionar En las próximas lecciones, vamos a div pañal para escribir tus primeros pasos y explorar los diferentes comandos que usarás para interactuar con tu aplicación web. Nos vemos en la siguiente lección. 4. 4. Fundamentos de JavaScript para este curso.: Bienvenida de nuevo. En esta lección, cubriremos los conceptos esenciales de Javascript que necesitarás entender para poder escribir una prueba efectiva de Cypress Incluso si eres nuevo en la programación, no te preocupes, comenzaremos con lo básico y lo construiremos a partir de ahí. Para esa lección, necesitamos instalar la extensión de código de Visual Studio. Entonces para eso, deberíamos ir a la pestaña de extensión y escribir aquí corredor de código. Y necesitamos instalar esa extensión Ejecutar instalar. Esta extensión nos ayudará a ejecutar código JavaScript dentro del archivo. Empecemos con la sintaxis básica de JavaScript. Aquí hay un ejemplo sencillo de registro de consola. Esta línea de código da salida hello word. Vamos a tratar de ejecutar esto. Entonces después de instalar nuestro código ejecutando la extensión, deberíamos tener aquí alrededor del botón de código, y si lo presionamos, veremos aquí la salida de nuestro código. Por lo general, usamos Consolod para los bugging. A continuación, vamos a discutir sobre qué es una variable y para qué se utilizan. Básicamente, tenemos tres tipos de variables. El primero se declara con var, segundo ED y el último con const Por lo general, usaremos solo lead y const y luego explicaré cada uno de ellos. La primera, declarada con var es una variable disponible globalmente. El segundo declarado con let está disponible solo dentro del bloque de código. Es alcance de bloque. Y el último declarado con costo también está disponible en el ámbito de bloque, pero esa variable no se puede cambiar. Entonces es un bloque de código, un alcance de bloque. Es algo que se declara dentro de los frenillos Carly. Lo discutiremos más adelante. Entonces, como dijimos, una variable var tiene alcance global. Entonces aquí declaramos dentro de nuestro alcance. Aquí tenemos nuestras llaves Carly, el nombre var Ellie Y ahora queremos hacer una consola para eso para ese nav. Pero después de eso fuera de ese bloque de código, también estamos tratando de hacer consola. Entonces deberíamos ver en la consola a As porque la VR es de alcance global. Vamos a ejecutarlo. Sí, aquí tenemos el resultado Allie y Allie Ahora hablemos de let variables. Solo son de alcance de bloque, lo que significa que solo estarán disponibles dentro de estos tirantes Carl Entonces aquí declaramos nuestra variable de edad, que es 25, e hicimos aquí registro de consola. Y también estamos tratando de hacer un registro de consola fuera de ese bloque de código. Entonces en la salida, deberíamos ver los primeros 125, y después de eso, deberíamos ver error de referencia porque la edad no está definida. Vamos a tratar de ejecutar eso. Entonces como dije, aquí tenemos los primeros 25 y después de eso, tenemos aquí una referencia. La edad no está definida porque la edad aquí solo está disponible dentro de ese bloque de código. Y finalmente, tenemos nuestra variable de costo, que también tiene un alcance de bloque como let, pero su valor no puede ser reasignado Entonces vamos a tratar de entender. Aquí, declaramos que un costo variable es estudiante con el valor de true porque es un estudiante. Y después de eso, intentamos hacer un registro de consola aquí y tendremos la salida. Déjame comandar esa línea. Deberíamos tener la salida de la verdad. Y si poco común esa línea e intentaré sacar la variable estudiada fuera de ese bloque, debería recibir aquí una referencia. Vamos a tratar de ejecutar esto. Aquí podemos observar que tenemos el primer registro de consola con salida de true. Y después de eso, recibimos un error de refino porque se estudia, no se define fuera de ese alcance de bloque Y tratemos de reasignar un valor a una variable const. Déjame comandar esa línea. Aquí, intentaremos poner a un alumno a caídas, pero ya lo declaramos como cierto. Eso es claro el resultado y tratar de. Entonces aquí recibimos la asignación de error a una variable constante que es imposible, y tenemos la línea de código. No podemos asignar false a un estudiante que ya fue asignado a true. Las funciones son otro concepto fundamental en JavaScript. Una función es un bloque de código diseñado para realizar una tarea específica, y se puede usar en todo su código. Aquí hemos definido una función llamada grit que toma un nombre como parámetro y devuelve un mensaje de saludo Luego llamamos a esta función y almacenamos el valor en un mensaje de variable lit. Después de eso, estamos imprimiendo ese mensaje a la consola. Tratemos de entender qué se va a imprimir aquí. Entonces tenemos el nombre hello plus y estamos recibiendo como parámetro llamado Alice. Entonces en la salida, deberíamos haber impreso Hola Alice y exclamación. Entonces vamos a tratar de ejecutar eso. Como podemos ver, tenemos aquí Hola Alice. Si vamos a poner aquí otro nombre, nombre segundo, tendremos hola nombre segundo. Los objetos son una forma de agrupar datos relacionados y funcionar juntos. En Javascript, un objeto es una colección de propiedades y cada propiedad es un valor clave por. Aquí, declaramos una persona objeto y dentro de un bloque de llaves de tarjeta de código Decidimos tener valor clave pers como N que es John H, que es 25. Y también para objeto, podemos declarar un método, una función, una acción. Y nuestra persona puede grillar, y dentro de la grilla, tenemos una función que va a decir hola y este nombre. Esta palabra clave significa que usaremos el nombre asignado dentro ese objeto dentro de ese bloque de código. Así que vamos a tratar de contras registrar ese objeto. Aquí podemos ver que tenemos un objeto con todos estos valores clave por nombre, edad y cuadrícula como función. Además, podemos asignar una propiedad específica de ese objeto. Aquí, estamos tratando de asignar a cons log el nombre de la persona. Intentemos correr eso y podemos ver aquí a John. También, podemos llamar a una función dentro de un objeto. Aquí estamos tratando de llamar a la función de cuadrícula desde nuestro objeto persona. Entonces como puedes ver, la primera fila del registro de la consola es nuestro objeto después de eso es el nombre de la propiedad, y al final, tenemos nuestra función, que es hello jour Aquí podemos concluir nuestra lección donde discutimos sobre qué es una variable, qué es un objeto y qué es una función. Nos vemos en la siguiente lección. 5. 5. Tipos de selectores de CSS y cómo encontrar selectores en el DOM.: Hola. En esta lección, nos sumergimos en el selector CSS, una herramienta clave que usarás para identificar e interactuar con los elementos de la página, y al final de la lección, los usarás con confianza. Primero, hablemos de qué son los selectores CSS. Los selectores CSS son alfareros que se utilizan para seleccionar y dar estilo a elementos en una página web En el contexto de Chipre, utilizamos estos selectores para apuntar elementos para nuestras pruebas Por ejemplo, si quieres hacer clic en un botón, ingresar texto en un campo de entrada o verificar el contenido de un encabezado, necesitarás usar el selector CSS para apuntar a ese elemento específico. Ahora vamos a discutir sobre los selectores CSS más populares y sobre la fórmula general, cómo encontrar un selector CSS fórmula general para el selector CSS se compone de etiqueta, que puede ser input, button, Div select, y así sucesivamente, el atributo, que puede ser una clase, un texto, un nombre, ID, y el nombre del atributo, que puede ser todo. Discutamos sobre cómo encontrar selectores CSS por clase. Aquí tenemos un ejemplo de un DIV, que tiene una clase con el nombre de la clase name. Si queremos encontrar este elemento, este DIV, podemos usar punto y clase N. La cosa con punto funcionará solo para clase o sss seleccionados por clase O podemos usar la fórmula general, que es tag Name, en nuestro caso, es D aquí, el atributo en nuestro caso, el atributo es class, y el nombre del atributo en nuestro caso es class name. El siguiente son los selectores CSS por ID. Aquí tenemos un botón con el ID, MID, y un envío de texto. Para encontrar un selector CSS por AD, podemos usar esa fórmula. Podemos usar has y el nombre del DNI. Y en nuestro caso es has y MAD. La cosa con has solo se puede usar para el selector de ID. En cuanto a los selectores CSS, para el selector CSS de clase, podemos usar eso Pero para el selector de ID, podemos usar has, y también podemos usar la fórmula general para encontrar un selector CSS. Aquí, podemos usar el nombre de la etiqueta que es botón. A continuación, usamos atributo, que es ID en nuestro caso, ID de botón y el nombre de atributo, que es mi ID. Y así es como estamos luchando contra un selector CSS. El siguiente es luchar contra los selectores CSS por atributo. En ese ejemplo, tenemos una entrada con tipo text y name user name. Estamos usando fórmula general, nombre de etiqueta. I etiqueta entrada, atributo es nombre, y nombre de atributo es nombre de usuario. Aquí está la etiqueta, aquí está el atributo y el nombre del atributo. Y el último que puedo decir el menos popular es CSS selector por etiquetas, donde podemos encontrar como por párrafo, en nuestro caso, tenemos un párrafo, y podemos encontrar apenas todos los párrafos en la página donde podemos encontrar todos los botones y todas las entradas. Una cosa más aquí también. Cuando usamos esta fórmula general, podemos usar eso sin la etiqueta, pero es más seguro usarlo con etiqueta. Practicemos un poco sobre cómo encontrar ese elemento. Para ese ejercicio, vamos a utilizar la documentación de Cypress es ejemplo Cypress Y si quieres ver la estructura interna de esta página, debes hacer clic derecho e inspeccionar. Ahora, deberías ir a la pestaña del elemento. Si desea encontrar la ubicación exacta de un elemento web, puede hacer clic en este botón de selección y después de eso, puede hacer clic en el elemento en la página. Y tu ubicación será resaltada. Así que vamos a tratar de encontrar un selector CSS por clase. Si quieres comenzar a buscar los elementos en la página, debes hacer clic en Control más C. Control más F. Ahora aparecerá aquí una barra de búsqueda. Así que intentemos encontrar el selector CSS por clase para esa entrada de correo electrónico. Primero, vamos a dar click en ese botón Seleccionar después de ese clic en nuestro elemento, y aquí podemos observar que tenemos una clase dos clases. Entonces vamos a copiarlos. Y vamos a pegar aquí. En nuestro caso, tenemos dos clases. Tratemos de encontrar el primero usando el método dot. Cuando ponemos el método dot, podemos observar que tenemos diez elementos con la misma clase. Entonces eso significa que deberíamos usar también el segundo. Vamos a copiar y cuando tengas dos clases, puedes concatenerlas usando punto Entonces ahora mismo, tenemos nuestros elementos uno o uno, lo que significa que el elemento es único y ese selector CSS es bueno para usar para nuestras pruebas. Tratemos de encontrar también el mismo elemento usando el segundo método o encontrando unos selectores CSS, la fórmula general Entonces en nuestro caso, la fórmula general será el atributo, la etiqueta, que es entrada, corchetes, y aquí debemos escribir el tipo de atributo, que es clase igual y el atributo en nuestro caso, son eso. Entonces uno o uno, lo que significa que el elemento es único y podemos usarlo en nuestras pruebas. Continuemos encontrando un selector CSS por ID. Quiero encontrar la ubicación para esa entrada de contraseña. Entonces vamos a encontrar esa ubicación ese atributo. Aquí podemos observar que tenemos una entrada con el ID contraseña uno. Entonces en la barra de búsqueda, podemos poner has y en el nombre de identificación, que es contraseña uno. Podemos observar que es uno de uno, que significa que es un atributo único y puede ser utilizado en nuestra prueba. Además, intentemos encontrar el segundo método usando la fórmula general. Es la entrada, ID, palabra de paso igual uno, uno de uno, selector CSS único. Y también, intentemos eliminar el nombre de la etiqueta, que es la entrada, y también podemos observar el elemento también es único y se puede usar sin el nombre de la etiqueta. A continuación, intentemos encontrar por diferentes atributos, que no es un ID o una clase. Busquemos el selector para ese botón de envío. Voy a dar click en el botón de buscar en ese elemento. Podemos observar que es un botón con tipos enviar y una clase. Busquemos por tipo. Entonces control C, tenemos nuestra barra de sobretensión y la fórmula general sin tipo de etiqueta igual, y el nombre fue presentar. A partir de aquí, tipo y nombre, enviar. Y tenemos uno de uno, lo que significa selector único único, que se puede utilizar en nuestras pruebas. Eso es todo para la lección de hoy donde aprendemos a usar, cómo escribir, como dije, selector y cómo encontrar el elemento b en la página. Estas habilidades son esenciales para escribir pruebas efectivas de Cypress Vamos a usar estas habilidades en la siguiente lección, véala ahí. 6. 6. La primera prueba en Cypress.: Hola. En esta lección, escribiremos y ejecutaremos una simple prueba de Cypress Primero, vamos a crear una nueva carpeta dentro la carpeta Anton donde guardaremos nuestras pruebas. Entonces nueva carpeta, vamos a nombrarla. Primero. Ejemplos, y debemos crear un archivo con la extensión, si punto Gs. Esa es la extensión del Ciprés. ¿Nuevo archivo? Primero, Prueba si punto js. Aquí, se trata de una simple prueba de Cypress que visita un sitio web y verifica si el título de esa prueba tiene un texto específico Entonces voy a usar el ejemplo punto Cypress dot AO, y voy a comprobar si el título de ese sitio web es Cypress do to kitchen sink Además, he agregado un comentario en la primera línea que ayudará a nuestro editor de código a entender que estamos usando Cypress y nos dará auto complation para nuestros comandos Rompamos la estructura de ese archivo. Utilizamos describir en worder para agrupar pruebas relacionadas juntas. Piensa en ello como una carpeta en tu máquina donde estás separando tus fotos de tu cumpleaños a tus fotos de tu graduación, digamos. Así, podemos separar nuestras pruebas de inicio de sesión de nuestra prueba de inicio de sesión en el mismo archivo. Dentro del bloque describe, tenemos la función de TI, y cada función de TI representará una prueba de Cypress separada Se pueden añadir más de ellos, y esa será otra prueba que comprobará algo diferente. Permítanme eliminarlo por ahora Chipre tiene muchas funciones predeterminadas, y para poder acceder a ellas, debemos vincular esa función al objeto global si. Por ejemplo, el método visita, vinculamos ese método al objeto siglob, y ese método visitamos ese Ese es el sitio web de Chipre. El método title también se vincula al CI al objeto si Y ese método obtiene el título de la página. La parte igual de disparar es una aseveración. Y aquí verificamos si el título es correcto. Ahora es el momento de ejecutar nuestra prueba. Entonces abramos una terminal desde la terminal nueva terminal, y aquí deberíamos abrir Chipre. Para eso, deberíamos escribir Bs, Chipre abrió. Sí, y para terminar, empieza a probar y aquí está nuestra primera prueba. Hagamos clic en él y esperemos la ejecución. Podemos observar aquí toda la acción. El primero es visita, luego extraemos el título, y al final, estamos verificando si nuestro esperado es igual al valor real. Si nuestra afirmación fallara, recibiremos un error con la información Intentemos agregar algo diferente aquí. Pongamos el número dos. Y aquí estamos observando que estamos esperando cierta cantidad de tiempo, y después de eso, recibimos que esperabas tener Cypress yo fregadero de cocina para igualar fregadero de cocina Cypress Ayo a Eso es todo para la lección de hoy. Acabamos de escribir y ejecutar nuestra primera prueba de Cypress. Enhorabuena y nos vemos en las próximas clases. 7. 7. Interacción con elementos web en Cypress: acciones esenciales.: Bienvenida de nuevo. Hoy, comenzaremos a aprender uno de los aspectos más importantes de las pruebas con Chipre, que es interactuar con los elementos. Hoy, aprenderás a encontrar elementos en una página y a realizar acciones como hacer clic, escribir y seleccionar. Empecemos. Aquí, tenemos un campo de entrada, y queremos escribir algún texto. Entonces comencemos. Intentemos encontrar el selector CSS para ese elemento. Podemos intentar encontrar por ID, así controlar F y tiene hash y correo electrónico uno. Uno de diversión. Bien. Entonces ahora que encontramos nuestro selector, podemos intentar buscar y escribir el texto. Aquí he creado una describir, y dentro de la describir, tengo una prueba que visita nuestro sitio web y después de eso, desde el CI de objeto global, estamos usando G común dentro del método get, estamos dando el selector CSS de nuestro elemento. Y después de eso después de que encontramos nuestro elemento, estamos escribiendo un texto dentro de ese elemento. Entonces abramos el Cypress e intentemos ejecutar caso de prueba. Y Big Cypress, abierto. Déjame guardarlo. Sí. Entonces es interactuar con los elementos. La primera acción es visitar el sitio web. El segundo es el uso del método común G. Estamos luchando contra nuestro elemento. Podemos ver que se destaca. Y después de eso, con la ayuda de tipo común, estamos escribiendo nuestro texto. A veces es más fácil encontrar un elemento basado en el texto que contiene en lugar de sus selectores CSS Ahí es donde entra el comando Contiene. Entonces aquí tenemos un botón con el texto, da clic a Toggle Popover Y cuando hacemos clic en él, se muestra un Popover, que contiene cierto texto Entonces quiero ir a visitar esa página. Después de eso encuentra ese botón por texto, y después de hacer clic en él, quiero afirmar para verificar que se muestre ese pop over con este texto Así que vamos al código de Visual Studio. Aquí, tengo una función de TI, que es un caso de prueba. Y dentro del caso de prueba, primero, estamos visitando nuestra página. Entonces con la ayuda del comando, el comando contiene, estamos encontrando el botón por texto, y después de eso, estamos dando click sobre él. Después de haber hecho clic en ese botón, estamos tratando de buscar el pop over por texto, y estamos afirmando, estamos verificando que este popover Así que déjame guardar eso, y vamos a ir al Ciprés Aquí observamos que ejecutamos esto. Después de eso, con el comando Ctys, encontramos nuestro botón Después de eso, hicimos clic en él, y después de hacer clic, se mostró el popover El siguiente paso es encontrar el popover por texto. Y el último es verificar que se muestre nuestro popover Para estructuras de página más complejas, donde necesitas encontrar elementos dentro de otros elementos, puedes usar find command. Esto es particularmente útil cuando se trata de elementos anidados Entonces aquí tengo seis botones, y quiero dar click en el último. Cuando hago clic en el botón, se muestra un Pop up con texto clicado Entonces déjame abrir los elementos e intentar encontrar el localizador para ese elemento. Entonces aquí podemos observar que todos estos elementos están dentro de esa Div. Lo que voy a hacer, voy a encontrar el div con método get, y después de eso, voy a buscar solo dentro del div el último elemento. Así que vamos al código de Visual Studio. Entonces aquí tengo otro caso de prueba. Estamos visitando el sitio web. Después de eso, busco, me sale el div que tiene etiquetas reales. Clase de etiquetas de acción. Y después de eso, estoy buscando dentro del DIV, todos los spuns aquí tenemos como seis spas Y después de eso, le estoy diciendo al Chipre que solo quiero obtener el último hilado y estoy pinchando en él. Después de haber hecho clic en ese elemento, estoy encontrando el pop up y validando que mi pop up contiene tener texto Así que vamos. Vamos a ejecutar esta prueba. Déjame guardar y aquí podemos observar que visitamos la página. Después de eso, encontramos que Dev, podemos observar que todos los elementos están resaltados. Después de eso, encontramos balnearios, todos los spas. Aquí tenemos 66 spas. Y con la ayuda del último comando, resaltamos solo el último y solo hicimos clic en el último Y después de eso, comprobamos que nuestro pop up contiene texto clicked Además, si queremos dar click en el primer elemento, podemos usar el primer comando. Entonces vamos a ver. Entonces aquí, sólo se resalta la primera . Además, digamos que queremos dar click en digamos el segundo, podemos usar comando igual y dentro del igual, deberíamos dar el índice. Pero nuestro comando igual está basado en cero, índice cero y el conteo comienza desde cero. 01, y el uno será el segundo elemento. Entonces, vamos a ahorrar. Y aquí cuando igual uno será el segundo elemento. Otro tema importante es trabajar con botones de radio y casillas de verificación. Entonces aquí tenemos algunas casillas de verificación y algunos botones de radio. Quiero hacer clic para marcar el botón de opción y marcar y marcar esta casilla de verificación Entonces intentemos encontrar el selector para la casilla de verificación. Aquí podemos tratar de encontrar por valor. Controlemos F y valoremos. Tenemos cuatro elementos. Podemos usar el primero común para eso. Y para nuestro botón de radio, intentemos encontrar aquí tenemos AD, y creo que AD es único, uno de uno. Entonces vamos al código de Visual Studio. Aquí tenemos una prueba donde visitamos primero. Después de eso, estamos encontrando nuestro botón de radio por ID, que es único y después de eso, con la ayuda del método check, estamos revisando ese botón de radio. A continuación, vamos a encontrar la primera casilla de verificación y la vamos a marcar. Después de eso, queremos desmarcarlo. Entonces abramos el Cypress y Big Cypress Papen. Y selecciona nuestra prueba. Entonces primero, visitamos el sitio web. A continuación, encontramos que nuestro botón está resaltado aquí. Entonces lo comprobamos. Y ahora podemos observar que nuestro botón de radio está marcado. El siguiente es encontrar nuestras casillas de verificación. Aquí tenemos tres, y dijimos que queremos comprobar sólo el primero, que aquí se resalta. Después de eso, hicimos la comprobación y aquí podemos observar que se comprueba el primero. Y la siguiente acción fue desmarcarlo. Entonces aquí podemos observar que está desmarcado. La última acción para hoy es seleccionar la opción de un menú desplegable selecto Entonces primero, intentemos encontrar ese menú desplegable, ese argumento selecto. Aquí podemos observar que tenemos un selecto y dentro de él, tenemos todas estas opciones. Entonces queremos encontrar el select, y después de eso, vamos a seleccionar elementos con la ayuda del select común usando el nombre de la opción. Así que vamos a tratar de encontrar por clase. Voy a usar solo primero, el segundo. Acción. Digamos que es un selecto. Sí, aquí tenemos uno de uno. Y después de eso, la opción será seleccionada por el Oh, vamos al código de Visual Studio. Aquí tengo mi caso de prueba con el selecto. Visitamos el sitio web y después de eso, encontramos nuestro seleccionar el elemento, y después de eso, con la ayuda de la selección común, estamos dando qué opción queremos seleccionar. Así que vamos a guardar y verificar el resultado. Entonces aquí encontramos la entrada select, y con la ayuda del método select, seleccionamos la opción deseada. Así que ahora vamos a tratar de ejecutar todos ellos, y vemos que tenemos prueba para G y tipo contiene y da clic en Buscar y dar clic, verificar y verificar y seleccionar. Todos estos casos de prueba tienen algo en común, que es el primer paso, visite el sitio web. En ese caso, podemos extraer ese paso de visita fuera de nuestra prueba y podemos ponerlo dentro antes de cada bloque de código. Así que intentemos antes. Antes de cada uno. Esa es la sintaxis. Entonces aquí dentro antes de cada uno, estamos agregando algo que se ejecutará antes de que cada función funcione antes de cada caso de prueba. Entonces déjame borrarlo de todos los casos de prueba. Y ahora antes de cada prueba, deberíamos visitar el sitio web. Así que vamos a guardar y verificar los resultados. Por lo que aquí podemos observar que antes de primer paso primera prueba, visitamos el sitio web. Lo mismo es con el segundo y con todos ellos. Entonces eso fue para la lección de hoy. Espero que hayas disfrutado. Nos vemos en las próximas lecciones. 8. 8. Cómo extraer texto de un elemento web.: Hola, en esta lección, discutiremos sobre un escenario de prueba muy común, que es extraer texto de un elemento web. En un entorno de pruebas de la vida real, estarás revisando el texto muy a menudo. Vamos al editor de código. Entonces aquí, ya creé una nueva carpeta y un nuevo archivo extraer texto del elemento web, y he agregado una prueba. Entonces en nuestra prueba, quiero navegar al sitio web de sourcedmo.com y verificar el logo desde el texto, desde el logo Entonces primero, copiemos nuestra URL. Vamos al código de Visual Studio y ci dot Visita y nuestro enlace. El siguiente, deberíamos encontrar el logo, el selector CSS logo. Entonces al hacer clic derecho en Inspeccionar, podemos encontrar que nuestro logo tiene una clase. Entonces intentemos controlar F, e intentemos encontrar por punto de clase y nombre de clase de clase. Entonces CI obtiene el nombre de la clase. Y el siguiente paso, deberíamos usar la cláusula DN, y dentro, entonces deberíamos almacenar nuestro objeto. Podemos darle un nombre. Vamos a darle logo. Objeto Logo. Así que ahora podemos extraer el texto de este objeto logo. Voy a crear un cons y lo llamaré logo text. De nuestro objeto, objeto logo, llamaré al método text. Este método extraerá el texto y lo dirá en nuestra constante. Ahora bien, si queremos comprobar si nuestro logotipo contiene el texto esperado, podemos usar esperar aquí, deberíamos dar texto de logotipo, y nuestro texto de logotipo debe ser igual a, veamos, oleaje b. Bien. Et salvemos, y abramos Chipre y Big Cypress abiertos. Para Cron extraer texto y nuestro archivo. Estamos navegando y después de eso, estamos extrayendo el texto de este logo y afirmando. Otra forma de hacer la misma aserción también puede ser obtener nuestro elemento y usar debería tener el texto Sword labs Entonces vamos a observar. Navegamos después de eso, hicimos la primera afirmación y la segunda Es así como podemos extraer simplemente el texto de un elemento b y validar que nuestro texto es el correcto. Nos vemos en Np pleasans. 9. 9. Assertions en Cypress.: Hola. En la lección de hoy, vamos a hablar de lo que son las aseveraciones de Chipre En cuanto a la documentación de Chipre, que está muy bien descrita y bastante detallada, sin duda le recomiendo que lea esta afirmación documentaria describir el estado deseado de un elemento Chipre tiene muchas aseveraciones implícitas. Muchos comandos tienen por defecto construido en la aserción. Por ejemplo, el comando visit esperará a que se cargue la página o el comando get esperará que el elemento exista en la fatalidad Tratemos de entender cómo funciona el método CI get a partir de nuestro ejemplo. Aquí estamos visitando el sitio web de demostración de origen, y estamos tratando de encontrar un elemento por ID que no existe. Entonces intentemos encontrar este ID, ID no existente en la página principal y cero de cero. Por lo que el ciprés volverá a intentar automáticamente y esperar a que el tiempo de espera predeterminado sea de 4 segundos. Y después de eso, fallamos. Entonces intentemos abrir y correr. Ahorremos una vez más, guardemos y ejecutemos nuestra prueba. Entonces aquí, ejecutamos la visita de primera línea, y después de eso, nuestro método G, hagamos una vez más. Nuestro método get está esperando y re intentando hasta que encuentre ese elemento donde recibirá un tiempo de espera aquí Entonces el tiempo de espera predeterminado es de 4 segundos, pero dentro de nuestro método get, podemos proporcionar nuestro tiempo de espera en Entonces, si queremos esperar un elemento durante 10 segundos, podemos proporcionar 10,000 milisegundos. Entonces aquí, podemos observar que G está tardando mucho más 10 segundos. Y después de eso, falló, y aquí en el año, podemos observar que tenemos 10 segundos. Aquí tenemos una lista de todas las aseveraciones disponibles en Chipre. Y para cada aserción, tenemos ambas opciones usando comandos Cypress should o usando expect Ahora vamos al código de Visual Studio e intentemos usar la misma aserción. Pero con ambas opciones, deberíamos y esperamos, vamos a usar una aserción para verificar la clase Ese, debemos y esperamos. Así que vamos a navegar a la demo de S, y queremos verificar que nuestro botón de inicio de sesión tenga esta clase. Ya preparé el código, así que estamos navegando. Después de eso, estoy extrayendo el valor y guardando este nuestro botón por ID botón de inicio de sesión, guardando en esa variable, y después de eso, usando esperar que ese botón de inicio de sesión tenga clase y nuestro nombre de clase. Y la segunda opción al usar debería también es extraer y guardar C obtengo nuestro botón y debería tener clase y nuestro nombre de clase. Ahora vayamos a nuestro corredor e intentemos ejecutar nuestra prueba. Entonces después de visitar la página, encontramos nuestro botón y afirmamos que nuestro botón tiene botón envío de clase y acción de botón Lo mismo que hicimos al usar el comando de Chipre debería. Resumamos lo que aprendimos sobre la aserción. En Chipre, tenemos aseveración de dos tipos. Deberíamos y esperamos, pero ambos están logrando el mismo resultado. Si quieres saber más sobre la aserción de Chipre, puedes consultar la documentación chipriota sobre Es muy claro e intuitivo. Nos vemos en las próximas clases. 10. 10. Cómo agregar capturas de pantalla y grabaciones de video a las pruebas.: Hola. En la lección de hoy, vamos a aprender a hacer capturas de pantalla y videos en Chipre. La funcionalidad de captura de pantalla en Chipre es muy simple. Desde el CI global de objetos, debe llamar a la captura de pantalla del método. Eso es. El método de captura de pantalla puede tomar algunos parámetros como el nombre del archivo y las opciones de esa lista. Aquí podemos tener algunas opciones como capturar la página de otoño. Ropa de cama, tiempo de espera, y una diopción muy interesante es override, que por defecto es false Pero si lo vamos a establecer en true, si vamos a ejecutar la misma prueba varias veces, no tendremos capturas de pantalla duplicadas Intentemos agregar algunas capturas de pantalla en nuestra prueba. Después de navegar a la página, eso es desde el CI de objeto global, captura de pantalla y otra captura de pantalla después haremos clic en el botón Iniciar sesión. Captura de pantalla de CI. Entonces aquí no estamos dando ningún nombre ni opciones. Digamos que después de visitar, hicimos una captura de pantalla, y otra después de hacer clic en la página de inicio de sesión Entonces vamos al código de Visual Studio. Aquí podemos observar que una nueva carpeta, se crearon capturas de pantalla. Y dentro de esa carpeta, tenemos nuestras capturas de pantalla. No proporcionamos ningún nombre ni opciones. Y Chipre, por defecto, creó el nombre de la captura de dividiendo el nombre del traje y el nombre de la prueba. Ahora, intentemos agregar el nombre para las capturas de pantalla. Así que la pantalla de la primera página, y vamos a guardar. Entonces aquí podemos observar que agregamos dos nuevas capturas de pantalla. Ahora, eliminemos esa carpeta. Eliminar. Bien. Entonces otra característica importante de la función de la captura de pantalla es que podemos hacer una captura de pantalla de un elemento específico. En nuestro caso, intentemos hacer una captura de pantalla solo de ese elemento de ese botón. Entonces después de CIG y nuestro elemento, no podemos hacer capturas de pantalla. Vamos a darle un nombre Botón de inicio de sesión. Vamos a ejecutar nuestra prueba se están ejecutando aquí. Así que vamos a revisar nuestra carpeta de capturas de pantalla. Aquí solo tenemos la captura de pantalla para el botón de inicio de sesión. Es hora de aprender cómo podemos iniciar la grabación de video para nuestra prueba. En nuestra carpeta Cypress con nuestras pruebas, tenemos un archivo de configuración, Cypress Config dogs Para iniciar la grabación de video de nuestra prueba, debemos agregar debajo el define config dentro de define config, un nuevo parámetro video y configurarlo en true. Eso es todo lo que necesitas hacer en redora para grabar tus pruebas. Otra cosa importante grabación de video es que la grabación comienza solo cuando tus pruebas se ejecutan sin cabeza desde la línea de comandos Entonces, si voy a guardar eso y voy a ejecutar nuestras pruebas, no pasará nada. La grabación no arrancará porque cuando estamos corriendo de cabeza, podemos observar nuestra prueba corriendo. Para poder ejecutar nuestra prueba desde la línea de comandos, primero, debemos copiar el PAP a nuestra prueba Entonces voy a copiar Path relativo y dentro de la terminal, voy a escribir PX, Cypress Run, dash dash, spec, e Ibec, y pondré el PP después de hacer clic en Enter Aquí veremos registros y ejecutaremos iniciando Cypress headless está usando navegador Electron y encontró una captura de pantalla de traje y video Aquí podemos observar el nombre una captura de pantalla un video de la suite y el nombre de la prueba. Entonces los resultados son una prueba pasando 3 segundos, capturas de pantalla y video. Ahora aquí podemos observar que tenemos una nueva carpeta de video y dentro de esa carpeta, tenemos nuestro video. Para que podamos observar nuestra prueba. Resumamos nuestra lección. Para la captura de pantalla, solo agrega método de captura de pantalla de puntos CI en tu prueba. Y para el video, solo agrega nuevo parámetro video T dentro del archivo Cypress Config Eso es todo para la lección de hoy. Nos vemos en los siguientes videos. 11. 11. Ejercicio práctico 1.: Bienvenido de nuevo. En esa sección de nuestro curso, vamos a hacer un poco de práctica. ¿Cómo va a funcionar eso? Voy a presentar lo que es caso que quiero automatizar. Después de eso, pones un video en pausa e intentas automatizarlo tú mismo. Y después de terminar con la automatización, continúe con el video y compare su implementación con la mía. Empecemos con nuestro primer caso de prueba. Primero, navegaremos hasta el sitio web de demostración de origen. Después de eso, vamos a hacer el inicio de sesión usando el usuario estándar y la salsa secreta de contraseña. Al hacer clic en la página de inicio de sesión. Después de hacer el login, debemos afirmar que debemos verificar que fuimos redirigidos a la página principal de los productos Sugerir que aquí podamos comprobar que este producto de texto está presente. El siguiente paso será agregar el último producto a la tarjeta haciendo clic en ese botón. Después de eso, debemos afirmar que este botón se quitó y agregar a la tarjeta no está presente siguiente paso será navegar a la página de la tarjeta haciendo clic en este botón, y al final, debemos afirmar que la TM se agregó a la tarjeta Entonces aquí agregué todos los pasos. Ahora puedes poner el video en pausa y volver después de que termines la implementación. Entonces el primer paso será navegar. Después de eso, déjame ir a hacer el logo. Después de eso, al hacer clic derecho e inspeccionar, busquemos el selector para el nombre de usuario y para la contraseña. Entonces aquí tenemos el ID, el control F, y vamos a encontrar por ID igual y el valor ID uno de un nombre de usuario. Bien, entonces CIPTG el nombre de usuario y el tipo de método. Escribamos aquí la contraseña de usuario estándar, y busquemos también el selector para la contraseña. Aquí, vamos a tratar de encontrar vamos a escribir por nombre. Y aquí tenemos nombre. Pasa uno de uno. Entonces CI sí obtiene la contraseña, y vamos a escribir la contraseña fuente secreta. Bien, el siguiente paso sería hacer clic en el botón Iniciar sesión. Aquí vamos por tipo enviar. Tratemos de encontrar tipo y enviar uno de uno. ¿Bien? Acción. Haga clic. Bien, entonces ahora vamos a tratar de ejecutar esto y ver si todo está bien. P ciprés abierto para abrir el Chipre, extremo a extremo, rollo Y nuestra carpeta debe ser prácticas y ejercicios. Así que vamos a correr. Tenemos la visita. Tenemos el inicio de sesión. Ahora estamos en esa página. Ahora después de la tala, aceptemos que este texto está presente. Entonces aquí podemos probar por prueba de datos, que es título. Prueba de datos, y es el título uno de uno. Bien. Así que vamos a tratar de CI que obtener debe tener texto Productos. Guardemos y observemos los resultados. Entonces tenemos el producto de aserción. Bien, ahora después de iniciar sesión, déjame quitar todo. Deberíamos agregar el último. Ahora encontremos el selector para este botón. Aquí, tenemos el ID, la prueba de datos. Bien, vamos a agarrar cual es el botón y la identificación. Voy a copiar el DNI. Es una larga, tarifa de control para eso por esa entrada. Entonces ID, y también podemos decir que esto es un botón. Bien. Si juego de palabras consigue, vamos a dar click en ese botón Después de hacer clic en ese botón, debemos navegar a la página de la tarjeta. Déjame encontrar el selector para Para la tarjeta. Bien, para prueba de datos tenemos aquí. Prueba igual. Yo. Bien. Algo anda mal. Hagámoslo una vez más. Tenemos aquí ID. W por clase. Probemos por clase. Bien, uno de uno. Copia esa S consigue click. Bien. Guardemos y verifiquemos los resultados. Entonces después de agregar a la tarjeta, encontramos ese botón del carrito de compras, hicimos clic y nos redirigieron a esa página Ahora debemos afirmar que proyecto nuestro producto fue agregado a la tarjeta Bien, entonces vamos a agarrar el elemento de datos del selector. Hagamos por prueba de datos. En ningún teléfono. Bien. Me sale bien, ahora vamos a extraer el texto. Entonces aquí vamos a tener artículo del auto. Ahora guardemos nuestro texto en texto constante, costo del artículo, nombre, artículo del auto y texto del método. Bien, entonces ahora aquí tenemos el texto del ítem. Vamos a validarlo usando expect item name, item text name equal and let's copy name from here. Bien. Vamos a guardar, y vamos a comprobar los resultados. Entonces después de navegar, estamos agarrando ese elemento, guardando el texto, y afirmando que el texto es correcto Entonces eso fue todo para ese ejercicio. Espero que tus resultados sean aparentemente los mismos. Nos vemos en la siguiente lección. 12. 12. Ejercicio práctico 2.: Hola, y bienvenidos de nuevo. Continuemos con nuestra segunda lección con la práctica. Presentaré lo que queremos automatizar y después de eso, pondrás el video en pausa y tratarás de hacerlo tú mismo. Después de eso, continúe con el video y verifique los resultados. Compara tu código con lo que intentaré automatizar. Entonces, procedamos a este escenario. Primero, navegaremos hasta la demostración de origen. Después de eso, haremos el inicio de sesión con el usuario estándar. El siguiente será agregar dos elementos a la tarjeta. Después de eso, debemos verificar que el icono de la tarjeta de compras aquí son dos porque agregamos dos elementos a la tarjeta. La siguiente acción será hacer clic en el menú, agregar preceder al rect norte del estado Después de eso, deberíamos comprobar que ese icono desapareció. No tenemos ningún artículo en la tarjeta. El siguiente paso será ordenar aquí de bajo a alto. Después de eso, deberíamos hacer una re carga, recarga de página. Y el último será comprobar una vez más que el número de icono desapareció. Y eso es todo. Entonces vamos al código de Visual Studio. Entonces aquí pongo todos los escalones. Déjame crear dos fosas a la tarjeta. Bien. Entonces para la mercancía, voy a tomar la parte de registro del último video porque es lo mismo. Bien, entonces ahora tenemos el login. El siguiente paso es llegar a la tarjeta. Busquemos los localizadores para estos botones. Entonces aquí podemos observar que tenemos una identificación. Bien. Control T. Busquemos identificación. Bien, uno de cinco. Eso es bueno. Yo que consigo y vamos a ir formulario, haga clic en acción. Bien. Ahora vamos a dar clic al botón del segundo auto. Aquí, tomémoslo por su nombre. Bien. N igual y el valor. Ci punto G, y acción, clic. Bien, intentemos correr para ver si todo está bien ahora y ser Cypress abierto Y para terminar, fila Bien, tenemos ejercicios es el Es el mismo archivo de la última vez. Así navegó el inicio de sesión. Después de eso, el primero se agrega a card potter y el segundo. Bien. Después de eso, el siguiente será verificar ese número. Puedo numerar estos dos. Así que vamos a salir aquí dos elementos, y vamos a tratar de encontrar el selector CSS. Aquí tenemos una página de carrito de compras. Claus y prueba de datos probemos por clase, bien. Cuota de control más llamada y el nombre de la clase, uno de uno. Bien. Ahora intentemos extraer para guardar ese objeto, y luego extraeremos el texto. Después Tienda. Icono de tarjeta rosa. Bien. Ahora guardamos ese artículo aquí. Y ahora vamos a crear una constante. Número de artículos en la tarjeta. Bien, y es igual al texto del título del carrito de compras. Así instruimos el texto. Y ahora usemos el número de espera de aserción. Igual y el número debe ser dos porque resaltado sólo dos. Bien, vamos a ver. Entonces conseguimos ese artículo y esperamos que sean dos. Bien. Entonces veamos cuál es el siguiente paso después de verificar. Deberíamos hacer clic en la configuración y verificar que ese icono desapareció. ¿Bien? Entonces, antes de hacer clic en la configuración, deberíamos abrir ese menú. Y aquí, nuestro menú tiene v. Veamos. Tenemos prueba de datos aquí. Bien. Tratemos de encontrar por prueba de punto y punto. Bien, en una bandera eso es bueno. Haga clic. Este clic abrirá el menú, y después de que se abra nuestro menú, hagamos clic en el Restablecer estado de cachorro Bien. Entonces aquí, vamos a tratar de encontrar por texto. Entonces, si quieres encontrar CI que contenga nuestro escritorio, intentemos hacer el glick Veamos si eso va a funcionar Bien, entonces aquí tenemos un problema. Comprobemos el problema. Prueba de datos abrir el menú. Y nuestro error es decir esa película porque este elemento está siendo cubierto por otro elemento. Ese es un problema muy popular. Y aquí, el Ciprés está proporcionando una solución para ese problema Aquí podemos usar la fuerza a través de esta fuerza. A través de nosotros haremos clic aunque el objeto esté cubierto. Así que vamos a tratar de agregar aquí la fuerza a través. Bien. Clan s doble. Bien. Vamos a guardar y ver los resultados. Bien, ahora tenemos el mismo problema porque los contenidos. Bien, también usemos la fuerza verdadera. Bien, entonces ahora nuestra prueba ha pasado. El siguiente paso es ordenar los artículos de menor a alto, volver a cargar la página y verificar Ahora, después de la configuración, deberíamos comprobar que ese icono desapareció. Bien, así que si queremos comprobar que algo desapareció, podemos obtener ese selector de clase de elementos y afirmar que no es visible o no existe Debería, y vamos a tratar de no existir, salir. Bien. Entonces podemos reservar nuestro pase de prueba porque ese elemento no existe en nuestra perdición Bien. El siguiente paso es ordenar. Bien, intentemos ordenar de bajo a alto. Aquí podemos observar que tenemos un tipo selecto de elemento selecto. Entonces para este tipo de selección con opción, debemos usar el método especial select by name. Vamos a agarrar vamos a agarrar por clase. Bien. Probemos por clase. Ci TTG, por clase, pondremos un.en el carril de clase y método especial seleccionar, y aquí debemos proporcionar el valor del texto Bien, entonces el valor del texto es de bajo a alto. Bien. Digamos, veamos los resultados. Bien, ahora es de bajo a alto. Eso es bueno. El siguiente será recargar la página. Para ello, podemos usar el método predeterminado de recarga de CI. Ese método volverá a cargar la página. Vamos a revisar. Bien. Entonces aquí podemos ver el método de recarga Y el último, el último paso es comprobar una vez más que nuestra página de carrito de compras no existe. Bien, vamos a copiar, y pongámoslo al final, ¿de acuerdo? A ver. Bien, entonces nuestra prueba está pasando. Eso es bueno. Bien, veamos una vez más lo que hicimos. Entonces navegamos por nuestro sitio web. Aquí tenemos el inicio de sesión. Después de eso, agregamos dos artículos a la tarjeta con solo hacer clic en el siguiente estaba revisando el ícono del carrito de compras. Es igual a dos, abrimos el menú y pulsamos en el estado de configuración Ahora nos encontramos con algunos problemas porque los artículos estaban cubiertos por otra cosa, y para eso, usamos la fuerza a través de eso está realizando el clic aunque el elemento esté cubierto por otra cosa. El último, verificamos que icono de la página del carrito de compras desapareció después de configurar la aplicación. Y utilizamos el método select para seleccionar la clasificación de precios de menor a mayor, recargamos la página y comprobamos una vez más que el carrito de compras aún está vacío Bien, así que eso fue para la lección de hoy. Espero que lo hayan disfrutado. Nos vemos en la siguiente. 13. 13. Ejercicio práctico 3.: Bienvenido de nuevo. Este es el último video de nuestra serie de ejercicios donde realizaremos una sencilla prueba. Intentaremos hacer el inicio de sesión con el usuario bloqueado y revisar su mensaje. Entonces navegaremos poniendo el nombre de usuario de un usuario de registro, la fuente secreta de pasaportes Y después de hacer clic en el botón de inicio de sesión, debemos afirmar que se mostró un mensaje de error Entonces vamos al código de Visual Studio. Vamos a crear una nueva prueba. Me conecto con cerrar sesión usuario. Bien. Entonces busquemos una vez más, los localizadores Vamos a crear por ID, tarifa de control. DNI. Se puede usar así. Entonces CI que consiguen. Tipo. Vamos a usar optar por el usuario. Bien. Bien, entonces antes de eso, debemos visitar el sitio web debemos navegar visita CI, y vamos a copiar la URL. Bien. Entonces ahora vamos a escribir vamos a averiguar el localizador para la contraseña. También por identificación. Y usemos como esa contraseña punto de fuente. Bien. Del lado que GD y escriba la contraseña es salsa secreta Bien. Y el siguiente paso será hacer clic en el botón de inicio de sesión. Además, vamos a agarrar por AD. Escribamos una identificación así. Este tipo de identificación, uno de uno, nueve. Sentarse aG. Y estamos pinchando. Bien, así que vamos a guardar y vamos a comprobar los resultados y pico de la operación de Cypress desde la terminal a las pruebas, iniciar los ejercicios diarios Bien, entonces navegamos escriba el nombre de usuario, el pathwor y haga clic en Ahora debemos hacer valer esta última. Bien. Entonces déjame tratar de cangrejo la aserción, el selector para eso Aquí tenemos prueba de datos. También tenemos botón, y tenemos la prueba. Tratemos de encontrar por texto usando contiene control. C. Entonces intentemos que CI que contenga debe ser visible. Bien. Bien, entonces tenemos nuestro poste de escritorio con todo es verde. Entonces eso fue todo para el menor de hoy. Fue una corta. Nos vemos en la siguiente donde haremos un poco de refactorización, y te mostraré cómo puedes escribir esta prueba aún más fácilmente usando las características de Cypress CF 14. 14. Refactorización y consejos para ejercicios prácticos.: Bienvenido de nuevo. En esta lección, te mostraré cómo podemos mejorar el proceso de redacción de casos de prueba o cómo podemos hacer un poco de refactorización Entonces si miramos nuestra prueba, podemos observar que la parte de inicio de sesión está casi presente en cada prueba, solo en la última, que es con usuario bloqueado. Entonces en ese caso, podemos poner un antes cada gancho que hará el login para todas nuestras pruebas. Entonces intentemos hacer eso. Deberíamos usar antes de cada uno. Esa es la sintaxis. Bien. Y a partir de la prueba, solo podemos hacer el control y poner ese código antes de cada uno donde haremos la visita, y usaremos la contraseña y contraseña haciendo clic en el botón enviar, y comprobaremos que estamos en la página principal del elemento. Bien, ahora podemos eliminar la parte de registro de la de todas las pruebas. Salvemos, y abramos el Ciprés y el Ciprés B Y pruebas, ejercicios redondos. Entonces están corriendo rápido, y aquí podemos observar que tenemos ahora ante cada uno. Es nuestro gancho lo que está haciendo es realizar la fase de inicio de sesión de nuestras pruebas. Bien, ahora, te mostraré una característica más muy importante de Util Cyprus que te ayudará en el proceso de escribir aún más fácilmente tu prueba Bien, entonces voy a hacer este salto para todas las pruebas. Déjame comentarlo, y voy a crear una nueva prueba. E uno. Bien, sólo voy a realizar algunos datos reales. Entonces déjame copiar la parte sentada y después de eso, lo haremos con el guardado de Cypress Entonces aquí hicimos la parte de visita. Ahora bien, aquí Chipre tiene ese botón, y si vas a hacer clic en ese botón, y después de eso, harás clic en el elemento b que deseas encontrar el selector CSS. Aquí Cybers te dará el selector CSS para ese elemento Y aquí tenemos la copia. Ahora, los Cybers te van a dar con el CIG así que voy a volver solo copiar y pegar que me den y aquí vamos a escribir Déjame copiar el usuario de estándares. Bien. Ahora encontremos el selector para el segundo. Bien, déjame hacer clic en eso. Tenemos la contraseña. Bien. Entonces, olvidé que lo copiamos. Tipo Salsa Secreta. Bien, ahora vamos bien para el botón de inicio de sesión. Ver, obtengo el botón de inicio de sesión. Control V, clic. Bien. Intentemos correr y ver. Bien, entonces ahora realizamos el log in. Después de eso, podemos encontrar la prueba de datos, el selector CSS para todos los elementos de la página. Entonces intentemos agregar un elemento a la página. Vamos a hacer clic. Primero, debemos hacer clic en ese botón y después de eso en el elemento be. Aquí tenemos la prueba de datos para nuestro botón de dos autos. Vamos a copiarlo, copiarlo. El pegarlo aquí y realizar. El clic. Entonces vamos a revisar los resultados. Aquí realizamos esto. Sí, agregamos la tarjeta. Esa es una característica más genial de los cybers que nos ayuda a sujetar nuestro proceso de escritura de kits de prueba Entonces eso es todo para la lección de sabor. Nos vemos en la siguiente sección. 15. 15. Estructura general de un framework y su configuración.: Hola, y bienvenidos a la sección del curso donde estaremos construyendo un marco de automatización similar a los utilizados en proyecto del mundo real. En primer lugar, aquí, he abierto una carpeta la cual fue creada en mi escritorio. Y en esta carpeta, guardaremos todos nuestros datos de prueba. A continuación, desde la terminal, abramos una nueva terminal y ejecutemos terminal en la nueva carpeta, deberíamos ejecutar MBM en ella Ese comando nos ayudará a crear un paquete hijo, donde almacenaremos información sobre el proyecto. Así que vamos a completar el marco de nombre del paquete. Ciprés. Lo sentimos, el nombre ya no puede contener letra Capta Bien. Marco. Ciprés. ¿Bien? La versión será 100 descripción. Marco Marco. Chipre. ¿Lo hiciste? Bien. Punto de entrada. Bien. Comando de prueba, bien. Todo el mundo dirige palabras clave vacías o licencia, y sí. Bien. Así que aquí podemos observar todos nuestros datos, nuestro nombre, versión, descripción, podemos cambiarlo si quieres. Y todo lo demás realmente no nos importa ahora mismo. Siguiente paso, necesitamos instalar Chipre. Entonces instalarás Chipre, yo lo buscaré en Google. Y el primer enlace sería a la documentación de Chipre. Y aquí tenemos nuestro script que deberíamos ejecutar en nuestra terminal. Entonces lo voy a copiar. Y del terreno, déjame despejar el charrán. Voy a colocar NBN Istyle Cypress Dev. Este Cypress Dev está mostrando dónde debemos instalar la dependencia Así que déjame hacer clic en Entrar y esperar un poco. Entonces después de unos segundos, tengo todo instalado. Tengo la nueva carpeta de modelos de dependencia, paquete, log Json y nod Es hora de abrir Cypress por primera vez. Entonces vamos a aclararlo y para abrir, I N Cypress abre Estos pasos los usábamos al inicio del curso, pero es lo mismo. Entonces aquí, no todo está configurado, elegiremos de extremo a extremo. Aquí todo quedará así. Tengo un poco de descripción para cada carpeta, pero continuemos. Yo Sí, usemos algunos ejemplos para verificar que instalamos todo. Correcto. Así que vamos a hacer clic en el primero. Sí, todo es verde, que significa que lo instalamos todo, correcto. Ahora, dejemos el Cypress y volvamos al código de Visual Studio Aquí tenemos la estructura básica predeterminada que Chipre está creando automáticamente después de tu primera ejecución. Aquí tenemos dentro de la carpeta Cypress, accesorios de extremo a extremo y soporte En la carpeta de extremo a extremo, conservaremos todas nuestras pruebas. Así que vamos a crear dos nuevas carpetas. Para nuestro framework, automatizaremos el framework de demostración de origen que usamos el sitio web de demostración de origen que usamos en nuestro curso. Así que vamos a crear carpetas. Básicamente, tendremos pruebas para la página de inicio de sesión y para la página principal de productos. Así que vamos a crear fuente Demostración de origen Prueba. Vamos a pincharlo así. Bien. Realmente no necesitamos estas dos carpetas, pero mantengámoslas aquí solo por un rato. Bien, agreguemos dos archivos aquí para iniciar sesión prueba dotc punto gs Bien. Aquí habrá pruebas para el inicio de sesión y para el producto. Pruebas cita. Los dejaré vacíos, pero luego agregaremos algunas pruebas. En la carpeta de soporte diremos que mantendremos nuestros selectores CSS que nos ayudarán a usar selectores y a organizarlos mejor. Así que vamos a crear dos archivos. Para cada página de nuestro sitio web, tendremos un archivo separado. Entonces, para la página de inicio de sesión, tendremos un archivo con todos los selectores que usaremos para la página de productos, otro archivo para la página de la tarjeta, otro, y así sucesivamente Entonces el primero será mecanografiado de inicio de sesión. Primero, vamos a crear una carpeta, y vamos a nombrarlo objeto de página porque vamos a utilizar un patrón de diseño que es objeto de página. Te lo explicaré más tarde. Movamos nuestro inicio de sesión dentro del objeto page. Bien. Y vamos a cambiarle el nombre y página de inicio de sesión y página de inicio de sesión. Bien. Y página de productos. Acerca de la página Patrón de diseño de objetos, lo discutiremos en las próximas lecciones. Y echemos un vistazo al archivo de los comunes. Aquí podemos agregar nuevos comandos que podemos usar en todas nuestras pruebas. Discutiremos sobre ellos en los próximos videos. Y en Chipre conf de extremo a extremo, aquí usamos para agregar el video para nuestra prueba, pero también usaremos ese archivo para agregar informes de prueba para nuestras pruebas Y eso lo haremos en las próximas lecciones. Esa es la principal estructura básica del framework Cypress que es muy similar a un framework que se utiliza en proyectos del mundo real Entonces aquí tenemos nuestro archivo donde guardaremos las pruebas. Tenemos archivo donde guardaremos los selectores CSS y también un archivo importante para agregar comandos y el archivo de configuración Eso fue para la lección de hoy. Nos vemos en la siguiente. 16. 16. Implementación del modelo de objetos de página en el marco de Cypress.: Bienvenido de nuevo. En la lección de hoy, discutiremos sobre el patrón de diseño de objetos de página y cómo podemos implementarlo para nuestro sitio web. Tercero, echemos un vistazo a la primera página que queremos automatizar. A partir de aquí, para escribir nuestros casos de prueba de automatización, necesitaremos el selector CSS para la entrada del usuario, para la contraseña y para el botón de inicio de sesión. Ahora vamos a cambiar el nombre de estos archivos de TS es la extensión de cuatro TypeScript, estamos usando aquí JS JavaScript Esa es la extensión correcta. Bien. Ahora, vamos a discutir un poco sobre el archivo BageObject. Nuestro objeto de página de inicio de sesión debe contener los selectores para todos los elementos web que vamos a utilizar desde esa página, acción que se puede realizar con esos elementos web Por ejemplo, con esa entrada de nombre de usuario, podemos realizar aquí tipo. Entonces en esa clase en ese archivo de objeto de página, deberíamos tener el selector para ese elemento y la acción que se puede realizar con ese elemento. Ahora comencemos con la creación de nuestro primer archivo de objeto de página. De los archivos por defecto, voy a copiar este comentario que nos ayudará con auto completado desde el Ciprés Bien, entonces todo, todos los selectores CSS y todas las acciones deberían estar dentro de una clase Una clase es la plantilla de nuestro objeto de página. Entonces déjame crear nuestra clase. Voy a usar la palabra clave Export porque con la ayuda de esa palabra clave Export, podemos usar el objeto de la clase fuera de este archivo. Así que la clase de exportación, y vamos a nombrarlo como página de inicio de sesión. Ahora necesitamos crear un objeto que agrupe todos nuestros selectores CSS Así que déjame cambiarle el nombre. Página de inicio de sesión los elementos. Bien. Y aquí vamos a dar un nombre para nuestro primer elemento web, que es la entrada del nombre de usuario. Así que vamos a nombrarlo algo así como entrada de nombre de usuario. Y la sintaxis aquí es simple. Vamos a dar el nombre aquí que ponemos desde el principio, CIG, dentro de eso agregaremos nuestro selector CSS Ahora, vamos a agarrar. Busquemos el selector CSS para el nombre de usuario. ¿Bien? Aquí tenemos prueba de identificación y datos. Bien, usemos ID para eso. Aplicación de control. Bien. Yo no lo copié. Usuario entonces. Bien. Entonces uno de uno, copiarlo. Y pongámoslo aquí. Bien, entonces ahora tenemos el primer elemento. Bien. Agreguemos también para la contraseña y para el inicio de sesión abajo. Contraseña, entrada. La sintaxis es la misma. La diferencia justa son los selectores. Bien. Encontremos el selector para esa. Contraseña también por AD. Bien, vamos a usar ID aquí. Contraseña, vamos a copiar. Bien. Y para el botón de inicio de sesión, también deberíamos tener aquí un ID. Sí, botón de inicio de sesión. Bonito. Bien, uno de uno. Vamos a copiar. Y agreguemos el selector de botón de inicio de sesión. Botón de inicio de sesión. Misma sintaxis. S me sale. Bien, ahora tenemos los selectores para todos los elementos que vamos a usar al principio Después de agregar todos nuestros elementos web, es el momento de agregar los métodos para nuestros elementos, las acciones que se pueden realizar con nuestros elementos. Entonces para el primer elemento web, que es la entrada del usuario, podemos realizar mecanografía. Así que vamos a darle un nombre a nuestra acción, algo así como Yenter user inter user name ¿Bien? Y ese es un método. Y dentro de ese campo, deberíamos escribir un nombre de usuario. Y ese nombre de usuario, será una cadena. Nuestro método, nuestra acción tomará como argumento, un nombre de usuario, ¿bien? Entonces ahora deberíamos usar ese objeto para acceder a nuestro elemento. Entonces este objeto está usando con este teclado después de nuestro objeto. Y a partir de ese objeto, tenemos nuestra entrada de nombre de usuario, como método y nuestro tipo de acción. Y para el tipo, usaremos nombre de usuario. Bien. Ahora, lo mismo que podemos hacer con Year password. Simplemente voy a copiar eso y la Contraseña, aquí tenemos contraseña y también estos elementos de inicio de sesión, tipo de entrada de contraseña y pase. Bien, la última acción será hacer clic en el botón de inicio de sesión. Así que permítanme crear un método el que se haga clic en el botón Iniciar sesión. Bien, nuestro método, no está recibiendo nada porque solo estamos haciendo clic, no escribiendo. Y aquí tenemos este nuestro objeto que contiene todos los elementos, nuestro botón de inicio de sesión, y nuestra acción. Haga clic. Bien. Ahora tenemos acciones separadas para ingresar el nombre de usuario, ingresar contraseña y hacer clic en el botón Iniciar sesión. Podemos agruparlos para tener un solo método, que se llamará login. Así que vamos a crear un método de inicio de sesión. Y para el inicio de sesión, necesitamos nombre de usuario y contraseña. Entonces dentro del login, tendremos primero, ingresaremos el nombre de usuario. Ingresa el nombre de usuario. Y aquí tenemos nombre de usuario. Bien, entonces ingresaremos contraseña, e ingresaremos la contraseña que vamos a dar en nuestras pruebas. Y el último estará dando clic en el botón Iniciar sesión. Ahora, vamos a resumir lo que tenemos aquí. Tenemos una clase con página de inicio de sesión. Dentro de nuestra página de inicio de sesión, tenemos todos los objetos, que es nombre de usuario, contraseña e inicio de sesión. Y para cada elemento, tenemos su acción. Aquí podemos escribir algo. Aquí podemos hacer click. Tenemos para ingresar nombre de usuario, ingresar contraseña, y hacer clic en el botón de inicio de sesión. Al final, agrupamos todas estas acciones en una sola acción grande que estaremos realizando el login a la aplicación. Ahora deberíamos crear el mismo archivo de objeto de página para la página de productos. Entonces a partir de aquí, vamos a necesitar este botón fuera a la tarjeta, este botón de quitar, y tarjeta el botón de la tarjeta. Ya he agregado todo aquí. Yo sólo voy a explicar lo que tenemos. Entonces es casi lo mismo que aquí, tenemos elementos para el botón de mochila AT Cart para esa. Tenemos botón de quitar mochila. Después de hacer clic en Atocar tenemos el botón de eliminar, y tenemos el botón Carrito, que es una clase Déjalo encontrar tarifa de control. Entonces esa. Sí. Entonces a partir de los métodos, tenemos una acción de método que es verificar que exista el botón de la tarjeta. Son solo los elementos, el botón de la tarjeta, y nuestra afirmación lo que debería ser visible Además, tenemos agregar mochila a tarjeta, que es simplemente hacer clic en este botón. Y el último es verificar que botón de quitar mochila aparece después de hacer clic para agregar al botón de tarjeta. Entonces eso es básicamente todo para las lecciones de hoy. Lección. Tenemos dos objetos de página con elementos y con sus acciones. Escribiremos algunas pruebas en la siguiente lección, así que nos vemos ahí. 17. 17. Prueba de la página de inicio de sesión.: Hola, doy la bienvenida de nuevo. En la lección de hoy, agregaremos pruebas para la página de inicio de sesión, utilizando nuestro objeto de página que creamos en menos anterior. Así que utilizaremos los objetos de página de inicio de sesión y proto page. Ahora, vamos a ir a la prueba de inicio de sesión CI y primero, yo ese comentario que nos ayudará con la corrección automática. Ahora vamos a crear un conjunto de pruebas. Voy a describir. Damos las pruebas de la página de inicio de sesión del nombre. Y dentro de eso, agregaremos nuestra prueba. Vamos a crear nuestra primera prueba, que se registrará con reidentiles de maíz Bien. Y el primer paso será CI Vs. Navegaremos a nuestra aplicación de demostración de origen. Entonces déjame copiar este camino. Bien. Sin el modelo de objetos de página, solo encontraríamos el selector CSS, el ID para eso y haremos Cici dot Get here tendremos ID, y usaremos type o name Pero ahora ya definimos todo nuestro selector SS aquí mismo ya con CI G. Así que dentro de esa clase de página de inicio de sesión, tenemos todo lo que necesitamos. Tenemos nuestros selectores y nuestro método. Entonces, para usar todo lo que tenemos dentro de eso, deberíamos crear un objeto de esa clase. Así que vamos a crear un objeto de esa clase que contendrá todo lo que tenemos dentro de esa clase de página de inicio de sesión. Entonces aquí tenemos la palabra clave export, lo que significa que podemos usar eso en la página fuera de ese archivo. Así que déjame crear esa página de inicio de sesión igual a la página Nueva y la página de inicio de sesión. Entonces aquí, tenemos Autoiput. Aquí está la ruta a nuestro archivo. Podemos apoyar la página Objetos Iniciar sesión página de soporte Inicio de sesión de objetos. Así que con solo hacer clic en eso, tendremos Auto Import así. Así que ahora podemos usar los métodos completamente definidos desde la página de inicio de sesión. Entonces después de visitar la página, ingresamos nombre de usuario y contraseña. Página de inicio de sesión punto YenerNombre de usuario. Y aquí nuestro método de nombre de usuario es pedir un nombre de usuario. Entonces cuando usamos eso, debemos dar un nombre de usuario. Vamos al Visual al Google Chrome y vamos a copiar ese nombre de usuario. Bien. Entonces después de ingresar nombre de usuario, ingresemos la contraseña, Página de inicio de sesión, Ingresa contraseña. Entonces para la contraseña es lo mismo. Nuestra contraseña está pidiendo una contraseña, Bien, que se utilizará para escribir la contraseña ingresada aquí. Entonces vamos a dar la contraseña. Es secreto. ¿Se cura bien? Y el último toque es hacer clic en el botón Iniciar sesión, que no está recibiendo nada Apenas estamos haciendo clic en el botón desde aquí. Bien, entonces vamos desde la terminal, vamos desde terminal, nueva terminal, y vamos a MP Cypress, Copan Probemos lo que tenemos aquí. Y para finalizar desde pruebas de inicio de sesión. Entonces nuestra prueba pasó, tenemos la parte de visita. Después de eso, estamos escribiendo el nombre de usuario, escribiendo la contraseña y dando clic en el botón de inicio de sesión. Ahora agreguemos una aseveración más para verificar que terminamos en la página de productos Entonces en la página de productos, tenemos este botón de tarjeta. Entonces así es como podemos verificar que después del registro, estamos redireccionándolo a la página de productos. Ya tenemos aquí en la página de productos, tenemos botón de tarjeta y tenemos una acción una afirmación que verificando que este botón de tarjeta sea visible Entonces ahora deberíamos usar estos elementos y estos métodos dentro de nuestras pruebas de registro y registro. Entonces para eso, deberíamos crear otro producto líder productos iguales página de nuevo producto y también. Deberíamos tener una nueva importación. Ahora desde esa página de productos, deberíamos usar botón de tarjeta existir, que es simplemente afirmar que ese botón es visible Así que la página del producto en el botón de la tarjeta existe. Vamos a guardar eso, y vamos a ir a la para comprobar los resultados. Bien, entonces después de hacer clic, somos redirigidos a la página de productos, y aquí tenemos la aseveración de que ese producto es visible Agreguemos una prueba más que verificará lo que sucederá si intentamos iniciar sesión con nuestras propias credenciales. Así que vamos a copiar esa y ponerla solo log con credenciales incorrectas. Entonces corre una salsa secreta Bien, vamos a ejecutarlo. Bien, entonces después de hacer clic, no somos redirigidos a la página del producto Estamos recibiendo un error. Ahora debemos afirmar ese error error. Intentemos reproducirlo manualmente. Voy a añadir algo así. Busquemos el selector CSS para ese error. Tenemos un error de prueba de datos. Bien. Controlemos F. Data. Aquí Bien, esa es una de ellas. Agreguemos eso dice selector a nuestro objeto de página de inicio de sesión. Entonces mensaje de error, la sintaxis es la misma. Lado que consigue. Y aquí, pongamos nuestro mensaje. Y para ese mensaje de error, podemos crear aquí un método, pero podemos usarlo desde esos elementos de la página de inicio de sesión. Intentemos hacer algo así. Entonces, después de hacer clic, ingresamos a los elementos de la página de inicio de sesión , el mensaje de error y nuestra afirmación deberían ser visibles Bien, así que vamos a ejecutar Bien, mensaje de error no es una función. Yo no la guardé aquí. Bien, ese fue el error. Bien, entonces ahora todo está funcionando bien, pero no podemos desde el archivo autoguardado Entonces después de que estemos modificando algo, va a hacer autoguardado Pero lo guardaré manualmente, pero puedes hacer algo así. Resumimos lo que hicimos en la lección de hoy. Entonces agregamos dos pruebas que están probando la funcionalidad de inicio de sesión, una con la credencial correcta y la segunda con incorrecta Estamos visitando el Bige después de eso, creamos dos objetos de nuestros objetos Bage para iniciar sesión Bolsa y página de productos Dentro de estos objetos. Tenemos todos los elementos web y todas las acciones que están disponibles para estos elementos web. Además, podemos mejorar nuestras pruebas poniéndolas antes de cada una porque antes de cada prueba, estamos visitando la demo de salsa. Entonces vamos a tratar de hacer eso. Antes de cada uno está la sintaxis. Bien, así que vamos a quitar eso de aquí. Y a partir de aquí, agrégalo aquí mismo. Eliminemos solo, y vamos a guardarlo manualmente. Ahora tenemos dos pruebas que están visitando antes cada una y con verde. Eso fue para la lección de hoy. Nos vemos en la siguiente. 18. 18. Prueba de la página de productos.: Hola, y bienvenidos de nuevo. En la lección de hoy, agregaremos algunas pruebas para la página de productos. Vayamos al archivo de prueba del producto. Y aquí los pasos son similares. En cuanto a la página de inicio de sesión. En primer lugar, tengo mucho que viene que va a ayudar a pasar con auto complete. Después de eso, crearé una suite de pruebas para la página de productos, y dentro de eso, podemos agregar nuestra prueba. El primer paso será agregar un producto, la tarjeta. Bien, así que al principio, solo deberíamos visitar nuestro sitio web. Bien, entonces aquí se me olvidó agregar Bien, ahora, creo que está bien. Vamos a copiar la URL. Y después de eso, deberíamos hacer la tala. Para la parte de inicio de sesión, deberíamos tener todo lo que tenemos dentro de la página de inicio de sesión, objeto de página. Ahora vamos a crear ese objeto, Login Login page, igual nueva página de inicio de sesión. Y aquí tenemos importados. La página de inicio de sesión ahora que es crear la página de productos página de productos. Bueno, No hay página de producto. Bien. Entonces tenemos dos objetos aquí que tenemos todo dentro de ellos. Entonces tenemos el inport. Ahora vamos a hacer el inicio de sesión. Podemos copiarlo de la prueba anterior. Aquí es simple, ingresando nombre de usuario, contraseña y haciendo clic en el botón de inicio de sesión, el siguiente paso es hacer clic después de realizar el inicio de sesión, déjame realizar el inicio de sesión. Deberíamos hacer clic en el botón de anuncio a tarjeta, que ya lo tenemos creado aquí. Tenemos una mochila en el botón de tarjeta y botón de quitar. Así que vamos a ir al código de Visual Studio. Y desde la página de productos, Agregar tarjeta. Así que vamos a agregar de nuevo a la tarjeta aquí. Realizaremos el método click. Bien. Entonces después de eso, intentemos correr primero para ejecutar la prueba para ver si las cosas están bien. Y hasta el final, inicio y página de productos. Estamos realizando la visita, el inicio de sesión, y estamos dando clic en ese botón. Bien, después de hacer clic, debemos verificar que tenemos botón de eliminar aparece el botón de quitar. Entonces para eso, también tenemos botón de quitar mochila, y tenemos un método que verifica que el botón de quitar mochila sea visible. Entonces usemos ese método. Para la página del producto, utilizamos verificar que aparezca el botón de eliminación de mochila, y vamos a ejecutarlo y verificarlo. Entonces tenemos una aseveración de que está verificando que aparezca este botón de eliminar Entonces agreguemos una verificación más de que verificaremos que este número de tarjeta, el número página de la tarjeta esté actualizado. Entonces intentemos agregar algo a la tarjeta, y busquemos el selector CSS para eso. Aquí observamos que tenemos una clase de compra de carbaje. Vamos a tratar de encontrarlo con punto. Carbaje comercial, uno de uno. Agreguemos ese selector CSS a la página de productos, página Objeto. Así que el número de página del carburador del coche. Bien, la sintaxis es similar. Aquí tenemos CI dot GAD. Entonces nuestra página de carrito de compras. Bien. Ahora, vamos a guardarlo y vayamos a las pruebas de productos y tratemos de hacer nuestra aseveración. Entonces desde la página de productos, aquí tenemos elementos, y dentro de los elementos, tenemos el número de página duro. Y podemos usar podemos usar nuestro método que debería tener texto, y probemos uno. Vamos a guardarlo. Ahora podemos observar que tenemos la última aseveración que está comprobando que hemos agregado un ítem a la tarjeta Ahora, vamos a resumir lo que hicimos en la lección de hoy. Así que creamos una nueva suite de pruebas para la página de productos. Agregamos estos dos objetos de nuestras clases. Creamos una nueva prueba donde hicimos la parte de visita, la parte de tala. Después de eso, le agregamos una mochila al auto, verificamos que apareciera el botón de quitar. Y verificar que el número de página de la tarjeta se actualizó a uno. Entonces aquí podemos agregar muchos otros casos relacionados con la página del producto. Solo necesitamos agregar más selectores CSS si los necesitamos. Entonces eso fue para la lección de hoy. Espero que lo hayan disfrutado. Nos vemos en la próxima vez. 19. 19. Creación y uso de comandos personalizados en Cypress.: Bienvenida de nuevo. En este video, discutiremos cómo podemos agregar un método global o una acción dentro de la carpeta commons. Entonces aquí podemos agregar un método que va a ser utilizado en todo nuestro framework. Ahora, vamos a discutir qué es un método global. Cada método que se cambia desde el CI de objeto global, métodos como visit u get o contains, hay métodos que se pueden usar en todas partes si son cambiados por el CI de objeto global. De nuestras pruebas, aquí podemos observar que en cada prueba, tenemos la funcionalidad de inicio de sesión aquí y aquí. Entonces ahora vamos a agregar make esta función de inicio de sesión como un método global que se puede usar chain desde el objeto global CI. En la CommansFolder, ya tenemos aquí algunos ejemplos del login, pero vamos a crear nuestro propio método Entonces la sintaxis, sólo vamos a seguir la sintaxis de Hell cypress dot commands dot add, y el nombre login to source up. A partir de aquí, nuestro método va a recibir correo electrónico y contraseña tendrá nombre de usuario y contraseña. Nombre de usuario Contraseña. ¿Bien? Entonces dentro de ese comando tenemos nuestro login. En el objeto de página de inicio de sesión, ya tenemos un método que está recibiendo nombre de usuario y contraseña y está realizando toda esta acción. Entonces intentemos agregar ese método dentro de eso. Primero, necesitamos crear el objeto de esa clase. Así que deja que la página de inicio de sesión sea igual a la nueva página de inicio de sesión. Entonces sí, aquí tenemos que importar todo aquí. Y desde login, desde el objeto de página de inicio de sesión, vamos a usar command, el método login que está recibiendo nombre de usuario y contraseña aquí. usuario y contraseña, y para nombre de usuario, estamos usando en el comando enter username y contraseña en el comando Enter password. Entonces vamos a dar el nombre de usuario y contraseña. Sí, vamos a borrar todo. Entonces, no vamos a eliminar, borrarlo así. Bien, entonces aquí solo seguimos esta sintaxis, cambiamos el nombre para iniciar sesión para acceder a la fuente arriba y estamos recibiendo nombre de usuario y contraseña, objeto creado de esa clase, y usamos el método especial action login, que es recibir nombre de usuario y contraseña. Ahora, si vamos a la página de prueba del producto aquí, tenemos la funcionalidad de inicio de sesión. Bien, entonces también tenemos que visitarlo porque antes de hacer clic y escribir nombre de usuario y contraseña, debemos visitar la página. Entonces antes de eso, agreguemos la visita. Bien, vamos a guardarlo. Y tratemos de simplemente comentemos que dijimos que un método global, una acción global se puede encadenar desde el CI de objeto global Así que desde CI, punto, y baja iniciar sesión. Ingresemos a la fuente arriba. Lado que inicie sesión para obtener la fuente arriba, y vamos a recibir nombre de usuario y contraseña. Bien, para el nombre de usuario vamos a usar el primero, el usuario Lou Standard y la salsa secreta. Bien, usuario estándar y saps secretos. Bien. Ahora, vamos a tratar salvar ambigu Cypress sapp Vamos a probar productos Cromado. Pruebas de producto, ¿de acuerdo? Entonces estamos realizando el login desde nuestro objeto, y el resto de la prueba permanece intacta. Y los inicios de sesión de comandos globales. Otra mejora que podemos realizar aquí está relacionada con la URL base. Entonces, en todo nuestro marco, estamos usando la misma URL base, demostración de origen. Entonces también aquí podemos observar que aquí vendemos demo de fuente. Justo después de eso, estamos usando tarjeta de inventario o algo así. Entonces en caso de que cuando tengamos una URL base, podemos poner esa URL base dentro de nuestro archivo de configuración. Entonces déjame ir a la configuración de cybers, y dentro de Yen a Yend, podemos agregar URL base Y para eso, podemos establecer esa URL base a nuestra salsa DMU. Así que vamos a guardar eso y bien, así después de que lo guardamos en todos los lugares donde estamos usando la URL base, podemos poner en el guión la diagonal diagonal, solo la diagonal diagonal Y el Cypress buscará dentro de la URL base de configuración de Cypress Así que vamos a guardarlo e intentar ejecutar nuestra prueba de producto. Entonces aquí observamos que estamos visitando un enlace vacío, pero los vamos a obtener. Intentemos hacer lo mismo con el resto de las pruebas en las pruebas de log in. Aquí estamos visitando vamos a eliminar y estamos dejando sólo la barra diagonal Bien, vamos a ahorrar, y vamos a ejecutarlos. Iniciar sesión en pruebas. Sí, así que aquí y antes de cada uno, estamos visitando una URL vacía, pero el cyberus sabe que los vamos a obtener. Entonces, vamos a resumir lo que hicimos en la lección de hoy. Agregamos un comando dentro de la carpeta de comandos. Sólo en esta carpeta, podemos un comando global. La sintaxis se ve así. Estamos dando el nombre lo que nuestro método utilizará como parámetros. Tenemos nombre de usuario y contraseña. Creamos el objeto de nuestra página de inicio de sesión. Visitamos la página y después de eso, hicimos el nombre de usuario YenerPassword, y haciendo clic en el botón de inicio de sesión Eso fue para la lección de hoy. Nos vemos en la siguiente. 20. 20. Generación y configuración de informes en Cypress.: Bienvenida de nuevo. En esta lección, aprenderá a agregar informes para sus grupos de pruebas. Entonces en nuestro si buscaremos CyprRports encontraremos que la documentación de Cypress está recomendando Así que vamos a copiar ese nombre y vamos a probar MoCA impresionante instalado Y el primer enlace será la instrucción sobre cómo podemos instalar este reporte. Entonces si nos desplazamos hacia arriba, aquí deberíamos tener el comando para instalar esa herramienta. Entonces MPM install save D MOCA En código de visual studio, abramos la nueva terminal Y aquí, vamos a pegar ese comando y BM instalar seguro. Así que vamos a ejecutarlo. Y deberíamos ver que todo está bien instalado ahora y el backer justo en archivo, debemos observar la nueva herramienta instalada Además de Cypress, deberíamos tener nuestra herramienta de reporte. Ahora debemos decirle a Chipre que utilice esa herramienta de reporte. Entonces, dentro del GS de Chipre, deberíamos escribir reporter y nuestro laboratorio de reporteros. Además de eso, sobre la documentación de esa herramienta, Mocoo ofrece muchos otros parámetros y opciones de cómo se puede configurar Pero solo voy a copiarlos y pegarlos porque hay muchas configuraciones. Entonces agregué aquí todas estas opciones. Aquí estamos mostrando dónde guardar el informe. Si podemos anular los informes los formatos que necesitamos HTML y Gson, el nombre del archivo y la marca de tiempo y así No te preocupes. Te voy a dar el link al repositorio de Github donde todo de ese curso estará ahí y no necesitas recordarlo todo. Entonces ahora tenemos nuestro reporte con muchas opciones, mucha configuración. Chipre generará informes sólo cuando ejecutemos nuestra prueba desde la terminal. Es lo mismo que con las capturas de pantalla. Las capturas de pantalla no se generan cuando estamos ejecutando nuestra prueba desde la aplicación UI. Ahora, intentemos dirigir nuestro escritorio. Huevos MP Ciprés. Corre vamos a correr todo lo que tenemos dentro del final para yend Aquí tenemos nuestro traje y dos trajes por defecto del Chipre. Tenemos 222 suites, y esto tardará un poco. Entonces esperemos los resultados. Entonces ese es el resultado de nuestra prueba. Tenemos algunas pruebas que fallaron. Entonces ahora vamos a observar que aquí mostramos que nuestros informes deben ser guardados dentro de la carpeta CyBrusrPorts Entonces aquí, CybrsSports. Deberíamos tener 22 archivos HTML y 22 Json. Vamos a revelarlos en el buscador y vamos a abrir un archivo HHTML Entonces aquí podemos observar que cada archivo representa un traje de prueba. El siguiente paso en el proceso de generación del gran informe es fusionar todos estos archivos Json, 22 en un archivo grande porque es más fácil ver un informe grande que 22 separados Entonces para eso, necesitamos ejecutar un comando. Lo haré es un comando largo, solo voy a copiarlo basado. Así que básicamente, aquí estamos usando Moca merge que fusionará todo con la extensión hijo, y crearemos un archivo grande que se llamará merge report Jason Entonces ejecutemos ese comando, y esperemos un poco. Aquí podemos observar que tenemos un archivo de informe de fusión grande. Y aquí tenemos un resumen 22 trajes, 136 pruebas, cuántas mejores, fallan o doblan, y así sucesivamente. El siguiente paso es generar a partir de ese gran archivo Json, h TML, gran reporte Entonces aquí también hay un comando muy largo. Yo sólo voy a copiar, pegarlo y ponerlo aquí. Vamos a ejecutarlo. Entonces tenemos reporte guardado y el camino a ese reporte. Entonces aquí tenemos una nueva carpeta, fusionar informe HTML, y aquí está nuestro informe. Vamos a revelarlo en Finder y abrirlo. Así que vamos a abrirla. Sí. Aquí está nuestro gran archivo de reporte , y tiene muchos filtros. Podemos mostrar solo post o solo podemos mostrar fallidos, muchos filtros, podemos filtrar por traje por nombre de prueba, y así sucesivamente. También, a partir de aquí, podemos ordenarlos. Y para el fallido, podemos observar el mensaje de error. Además, podemos agregar capturas de pantalla si las tenemos dentro de nuestra prueba. Entonces, básicamente, así es como debería verse un gran informe al final. Ahora vamos a resumir lo que agregamos aquí. Entonces, en primer lugar, instalamos la canción de Moca. Después de eso, agregamos muchas opciones para ese reportero. El siguiente paso es ejecutar las pruebas desde la terminal. Después de eso, tenemos muchos informes más pequeños. El siguiente paso es fusionar todos estos reportes archivos Json en un Json grande. Y el último es a partir de ese archivo Json, deberíamos generar un gran archivo hash de correo electrónico. Sé que todos estos comandos son muy largos y es difícil escribirlos. Pero en la siguiente lección, les mostraré cómo podemos facilitar la generación de informes, nos vemos ahí. 21. 21. Adición y configuración de scripts personalizados en Cypress.: Hola, y bienvenidos de nuevo. En la lección anterior, aprendimos a agregar un reporte de Cypress para nuestra prueba Y en la lección de hoy, aprendemos cómo hacerlo más fácil y cómo hacer nuestra vida como prueba más fácil a la hora de generar reportes. Entonces voy a borrar estas carpetas esa porque es una grande y lleva mucho tiempo ejecutarse, y pronto iré a la configuración de Cypress Primero, entendamos qué es un guión en nuestro contexto. Cuando estamos ejecutando nuestra prueba de Cypress desde la terminal, estamos ejecutando un script Entonces en ese caso, intentemos ejecutar la carrera MPX Cypress Y por defecto, Cypress utilizará el navegador Electron. Pero si queremos usar cierto navegador, podemos usar la opción PZ, y podemos darle desde y además tenemos una opción encabezada Esa opción nos mostrará el proceso de correr. Entonces intentemos ejecutar nuestras pruebas. Aquí tenemos toda esta información, y aquí observamos todas estas pruebas. Es parte de la prueba por defecto y parte de nuestras pruebas. Ahora bien, cómo podemos agregar estos scripts en nuestro sabor. Básicamente, agregaremos todos estos comandos que usamos en terminal en lección anterior en un formato más sencillo. Vamos a ir a nuestro paquete archivo Json, y aquí dentro dentro de la opción de scripts, podemos agregar nuestros scripts personales. Entonces para el script anterior que usamos para ejecutar la prueba desde el terminal y con navegador, podemos agregarlo aquí. Corre de aquí a otro lado y podemos Bien, así que todo está terminado Corre. Y aquí podemos tener nuestro guión. En realidad fue MPX, Cypress corre, hay sujetador y n y también se dirigió Ahora bien, si queremos llamar para ejecutar este script, solo podemos ejecutar MPM run y el nombre de nuestro script Entonces ahora aquí tenemos el MP E Cypress Run. Tenemos el texto de que estamos ejecutando ese guión. Es decir, si tenemos un comando largo y complicado, podemos guardarlo aquí y darle un nombre. Y después de eso, cuando queremos ejecutarlo, simplemente lo llamamos por su nombre y se ejecutará todo el comando. Entonces eso es más sencillo. Entonces déjame dejarlo todo aquí. Entonces agregaré aquí los comandos para generar la captura de pantalla para administrar los archivos hijo en un archivo grande, y para generar un reporte hushmil Aquí agregué nuestro comando big long que es fusionar todos los archivos ison en un archivo big merge son Y el siguiente es generar un reporte ushmail a partir de este gran reporte de fusión hijo Así que ahora intentemos ejecutar todo desde la terminal usando scripts. El primero será MPM run y nuestro script nail. Así que vamos a correr, y esperemos los resultados. Bien, entonces aquí tenemos nuestros resultados. Hemos fallado la prueba, y tenemos prueba de ruta. Después de correr, podemos observar que en nuestro archivo de informes, tenemos todos estos pequeños informes. Entonces, el siguiente paso después de correr es manejar nuestros gisons en un gran ison Entonces voy a copiar el nombre de nuestro guión, es uno muy largo. Yo lo ejecutaré. Déjame claro MPM correr, y nuestro nombre. Y aquí observamos que ejecutamos todo este guión largo llamándolo por su nombre. Y en nuestra carpeta de informes, hemos fusionado informes sobre el pequeño. El último paso es generar un reporte de correo electrónico de silencio a partir del reporte Json Ronda MPM y nombre. También aquí observamos lo que ejecutamos y tenemos nuestro informe. Ahora bien, si vamos a ir aquí y revelar en buscador, revelar en Finder. Aquí tenemos nuestro reporte con todos los resultados y todo en su lugar. Entonces vamos a resumir lo que hicimos en la lección de hoy. Primero, un script es comando al que se le da un nombre, y después de eso, solo estamos llamando al comando por su nombre, y es mucho más fácil guardar el comando aquí mismo, si es largo y estamos usando el comando mucho tiempo muy a menudo. Entonces hemos agregado el nombre, el comando, y después de eso, simplemente estamos llamando al comando desde la terminal. Así que no te preocupes por el código. Añadiré el link al repositorio Github con todo, todos los comandos, y todo desde todo el framework al inicio del curso. Entonces nos vemos en la siguiente lección. 22. 22. Resumen.: Hola, bienvenido de nuevo. Resumamos nuestra creación de marco y nuestro proceso Al principio, creamos nuestro paquete recién archivado ejecutando en nuestra terminal, el MDM común en él Aquí, almacenamos nuestra dependencia y nuestros scripts y toda la información, los metadatos sobre el framework como la descripción de la versión, y podemos agregar aquí muchas otras opciones. Después de eso, instalamos Chipre y abrimos Chipre por primera vez. Después de abrir el Chipre por primera vez, tenemos esta estructura por defecto, esta carpeta Cypress, Dwards end to yend donde tenemos pruebas de ciprés por defecto Y también aquí agregamos una carpeta lateral de demostración sos, agregamos nuestra suite de pruebas. Aparte de fixture, tenemos muchos ejemplos, pero no los usamos. La siguiente carpeta es support donde creamos el objeto page. Carpeta con dos archivos, un archivo por página web. Entonces, para la página de inicio de sesión, un archivo para la página del producto, otro archivo. Dentro de cada archivo de objeto de página, creamos una clase con nuestro selector CSS y acción disponible donde los métodos que podemos usar con estos selectores En la carpeta Commons en archivo Commons, agregamos un método global que se puede usar en todos los archivos encadenados por CI CI global Object En nuestro caso, creamos Login y los usamos creo en prueba de productos. Sí, utilizamos los métodos globales. Otro paso muy importante en nuestro framework cation y configuración fue el proceso de agregar nuestro reporte, que agregamos por lo instalamos, y después de eso, configuramos ese framework dentro las configs de Chipre con muchas opciones y parámetros Y el último paso fue agregar los scripts que agregamos nuestro script para ejecutar la prueba para administrar los resultados, y para generar el hermoso informe. Entonces eso era todo lo que necesitas saber para poder crear tu propio framework de Chipre que se pueda usar en aplicaciones de palabras reales. Espero que lo hayan disfrutado. Nos vemos en la siguiente lección.