Tutorial Cypress Automation

TUTORIAL CYPRESS AUTOMATION & TESTER
Tata Consulting Services – Learnig team
INDICE
1. Selector................................................................................................................................2
3. Estrutura del Proyecto..........................................................................................................4
3. Chai y Mocha........................................................................................................................8
4. Primer Test.........................................................................................................................12
5. Hook ..................................................................................................................................14
6. Capacidad de Intento ........................................................................................................14
2
1.-SELECTOR
Los selectores CSS son el patrón utilizado para identificar elementos en una página web según
su estilo. Un selector utilizado para filtrar los elementos DOM coincidentes:
GET
Obtenga uno o más elementos DOM por selector
Veamos los siguientes selectores:
 Child Combinator (>)
El combinador de descendientes coincide con un hijo, un nieto, etc. El combinador secundario

selecciona elementos que son hijos directos de otro elemento.
Utilice el símbolo mayor que (>) entre selectores para especificar que un selector es hijo
directo del otro.
 div > input#username
- Descendiente
El ␣ combinador (que se supone que representan un espacio, o mejor dicho uno o m ás

espacios en blanco) combina dos selectores tales que el selector combinado incluye s ólo los
elementos que coinciden con el segundo selector para los que hay un elemento ancestro que
coincide con el primer selector. Los selectores descendientes son similares a selectores hijos ,
pero que no requieren que la relación entre los elementos coincidentes ser estrictamente
entre padres e hijos.
 div span
- Selector de Clase.
En un documento HTML, los selectores de clase buscan un elemento basado en el

contenido de su atributo class. El atributo class está definido como una lista de elementos
separados por espacio, y uno de esos elementos debe coincidir exactamente con el nombre de
clase dado en el selector.
3
 .row (buscar "class=row") .
Si queremos encontrar un dov dentro de esa clase row y encontrar un Hr
Ejemplo: .row div hr (ejemplo para selecionar un hr dentro dela clase)
- Selector Adyacente
Se hace referencia a este selector como selector adyacente o selector del próximo hermano.
Sólo seleccionará un elemento especificado que esté inmediatamente después de otro
elemento especificado.
div label + input#usernme (funcional en las listas o form)
Especific Match
Una de las formas más directas y más seguras de poder hacer selector a un elemento es
indicando el match exacto de los que lo componen, por ejemplo la siguiente sintaxis, le
indicamos que nos devuelva el elemento del formulario y dentro de esto tenemos un div y el
div hijo de la posición 1.
4
 form > div:nth-child(1)
Buscamos los hijos que estan debajo de form, y con mayor exactitud a seudoclases
Sub- String Matches
Se crea un selector CSS para elementos dinámicos y valores de atributos. Permite la

coincidencia de cadenas parciales, texto de inicio y fin de cadenas.
Encuentra elemento tal igual como atributos
 ^= Match a prefix
 $= Mtch a Suffix
 *= Match a Substring(Contains)
Sintaxis.
 a[target='_blank']
Ahora para encontrar los elementos a que empiecen con un underline o raya abajo
 a[target^='_']
5
Ahora como poder encontrar un atributo con 'nk'.
Sintaxis.
 a[target$='nk']
Ahora como encontrar elemento con 'an'.
 a[target*='an']
6
2.-FOLDER STRUCTURE OF CYPRESS
Estructura por defecto.
Cypress no da un folder llamado Integration para almacenar los archivos de test.
Si deseamos agregar un nuevo archivo y para actualizar debemos correr nuestro test runner.
7
3.- CHAI y MOCHA
Mocha es un marco de prueba de JavaScript rico en funciones que se ejecuta en node.js y en el

navegador, lo que hace que las pruebas asincrónicas sean simples y divertidas. La prueba de
Mocha se ejecuta en serie, lo que permite generar informes flexibles y precisos, al tiempo que
asigna excepciones no detectadas correctas.
Referencia: https://www.youtube.com/watch?v=-sn3H0V3PuY
Mocha: palabras claves para entender lo que hace.
- Describe: funciona como una suite de test.
Ejemplo:
Describe (‘Main Suite’), function () {
});
- It().- Especifica un test case que podemos hacer un exception
Const holaTest = “Hello World test is as expected”;
Describe (‘Main Suite’), function (){
It (‘Hola mundo ’), function (){
Assert.equal(holaTest,’ Hello World test is as expected’);
8
});
Se crea un Describe padre e hijo haciendo una validación cada uno correspondientemente.
Y realizamos las aserciones de un arreglo y el tamaño del arreglo, cada uno en sus it
correspondientes.
9
Archivo de Accesorios
Este fichero nos brinda un lugar para almacenar los archivos que se van a utilizar en nuestros
test, estos pueden ser : archivos json, Excel, xml, etc.
Documentos descargados.
10
Esta carpeta permite alojar todos los documentos que se

descargan dentro de una navegación automáticamente, ejemplo: una descarga desde un
botón en su evento clic.
Archivos de captura de pantalla.
Es el folder encargado de almacenar de las capturas por los comandos cy.screenshot o por
alguna configuración de imágenes de pantalla por algún error, lo guarda automáticamente.
Documentos de Videos.
11
Este fichero almacena los videos a través de una configuración de los test que se estan
ejecutando.
Archivos de complementos
Nos permite almacenar o modificar de los comando de cypress, Recordemos que cypress
proviene de Node.js. Los comandos se ejecutan en el navegador.
4.-Primer Test
12
Referencia:
https://www.youtube.com/watch?
v=puyyzaZuIKI&list=PLYDwWPRvXB89V8mbG6AmhUjHLpwWid70n&index=5
En este primer test realizamos operaciones matemáticas dentro de “describe” que también
puede ser remplazado con “context”, las operaciones se alojan en los “it”.
Ahora continuamos con los describe y su respectivos it con los llamados expect para obtener
los resultados esperados de nuestros elemento de test.
El resultado en nuestro navegador de automatización de cypress nos muestra los resultados.
13
Los except nos dan los valores esperado de la función to.eq() con los resultados de nuestras
operaciones matemáticas antes ya declarados.
5.- Hook – Mocha
Los Hooks son funciones o métodos que se ejecutan en determinados momentos del flujo de
ejecución de los tests.
Los que usaremos en nuestro proyecto son:
Los que usaremos en nuestro proyecto son:
before(): es una función que se ejecuta una vez antes de la ejecución de todos los tests del
mismo grupo.
beforeEach(): es una función que se ejecuta antes de cada test individual.
afterEach(): es una función que se ejecuta después de cada test individual.
14
after(): es una función que se ejecuta una vez, al finalizar la

ejecución de todos los tests del mismo grupo.
El resultado del ejemplo de nuestros Hook lo podemos ver en la siguiente imagen, donde estas
operaciones o funciones se puede utilizar cada vez que se realiza cada operación, antes de
todas estas o al finalizar.
15
Capacidad de Intento
Referencia:
- https://www.youtube.com/watch?
v=NvdUwnEXM_k&list=PLYDwWPRvXB89V8mbG6AmhUjHLpwWid70n&index=7
- https://todomvc.com/examples/react-backbone/
Para empezar utilizamos el cy.visit , para ir hacia una pagina determinada y poder realizar
nuestra navegación y funcionamiento.
En este ejemplo, la página permite (1) ingresar ítem al combo dándole el texto “todo A” y
enter como evento para agregar este ítem temporalmente al combo identificado con su
clase .newtodo.
Como podemos ver en nuestra imagen de resultados, la primera línea de código agrego los
ítem al combo con dos Ítem A y B, además debemos tener en cuenta que Cypress le asigna un
tiempo cada vez se asigna el ítem o se ejecuta el type del elemento.
16
Además en este ejemplo validamos si realmente agregamos en el 2 item en el combo que

estamos utilizando para nuestro test.
Obtenemos con el “todo-list li” el combo y sus ítems agregados; y con el “should”
Debemos controlar 2 item con el length para que nos dé un Assert según la evaluación.
Constatamos lo que el DOM selecciona al buscar con los elementos SELECTOR , donde estos
elementos se han utilizado en el get.
17
Aumento de Tiempo de Espera.
Referencia : https://www.youtube.com/watch?
v=f2eKG_DStXE&list=PLYDwWPRvXB89V8mbG6AmhUjHLpwWid70n&index=8
Commando Run
Nos permite una serie de script sin el Cyprees Runner.
npx cypress open
En la siguiente imagen podemos visualizar el Cypress Runner en el navegador, donde en la

parte izquierda tenemos la barra de los “describe” e “it” que representan a los suites de los
test que se van ejecutando con cierto time y resultados esperados. En la parte derecha se
encuentra el navegador, el tipo de navegador
18
Head
Es una ejecución donde se visualiza la parte gráfica y el navegador.
Headless
npx cypress run
Es una ejecución sin visualizar la parte gráfica. EN la siguiente imagen podemos visualizar que
cada una de nuestras instrucciones solo corren en la consola, devolviendo el resultado
esperado o lo contrario.
19
VALIDACIONES – LOCATION
Referencia:
https://www.youtube.com/watch?
v=RFEs1RrXHmc&list=PLYDwWPRvXB89V8mbG6AmhUjHLpwWid70n&index=10
En esta sección una de las primeras funciones que se realizar al momento de testear es de
validar un dominio, titulo, protocolos y un login antes de navegar a páginas con mayor
funcionalidad y características.
Palabras claves: visit,should, url, title, location
20
Palabras claves: type.
El resultado de visit no muestra la página de la siguiente imagen www.saucedemo.com , donde

hemos realizado las validaciones mencionadas anterioriormente.
21
LOCALIZADORES
En esta sección vamos a ver un poco ms de como utilizamos los elementos o selectores de las
paaginas que están en nuestra pagina de test. En el ejemplo siguiente , ejecutamos el test
donde en una pagina de login ingresamos un usuario y passsword y hacemos click para que nos
lleve a una nueva sección.
22
Palabra Claves: get, type, click
Get : Obtener un elemento de la pagina de test
Type: escribir dentro del elemnto.
Click: Evento que se le da algún elemento del get
El evento click de nuestro botón nos lleva hacia una nueva página ya configurad en el submit.
En la siguiente imagen muestra la pagina direccionada del ejercicio.
23
Ejecutamos nuestro test para ver cómo funciona nuestros localizadores l obtener de nuestro
ejemplo el user, passwod y botón login de nuestra pagina
24
25

Tutorial Cypress Automation

Cargado por

Copyright:

Formatos disponibles

Tutorial Cypress Automation

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tutorial Cypress Automation

Cargado por

Copyright:

Formatos disponibles

TUTORIAL CYPRESS AUTOMATION & TESTER

Tata Consulting Services – Learnig team

3. Estrutura del Proyecto..........................................................................................................4

6. Capacidad de Intento ........................................................................................................14

Obtenga uno o más elementos DOM por selector

Veamos los siguientes selectores:

 Child Combinator (>)

El combinador de descendientes coincide con un hijo, un nieto, etc. El combinador secundario

 div > input#username

El ␣ combinador (que se supone que representan un espacio, o mejor dicho uno o m ás

En un documento HTML, los selectores de clase buscan un elemento basado en el

 .row (buscar "class=row") .

Si queremos encontrar un dov dentro de esa clase row y encontrar un Hr

Ejemplo: .row div hr (ejemplo para selecionar un hr dentro dela clase)

div label + input#usernme (funcional en las listas o form)

 form > div:nth-child(1)

Sub- String Matches

Se crea un selector CSS para elementos dinámicos y valores de atributos. Permite la

Encuentra elemento tal igual como atributos

Ahora como poder encontrar un atributo con 'nk'.

Ahora como encontrar elemento con 'an'.

2.-FOLDER STRUCTURE OF CYPRESS

Estructura por defecto.

Cypress no da un folder llamado Integration para almacenar los archivos de test.

3.- CHAI y MOCHA

Mocha es un marco de prueba de JavaScript rico en funciones que se ejecuta en node.js y en el

Mocha: palabras claves para entender lo que hace.

- Describe: funciona como una suite de test.

Describe (‘Main Suite’), function () {

- It().- Especifica un test case que podemos hacer un exception

Const holaTest = “Hello World test is as expected”;

Describe (‘Main Suite’), function (){

It (‘Hola mundo ’), function (){

Assert.equal(holaTest,’ Hello World test is as expected’);

Esta carpeta permite alojar todos los documentos que se

Archivos de captura de pantalla.

El resultado en nuestro navegador de automatización de cypress nos muestra los resultados.

5.- Hook – Mocha

Los que usaremos en nuestro proyecto son:

Los que usaremos en nuestro proyecto son:

beforeEach(): es una función que se ejecuta antes de cada test individual.

afterEach(): es una función que se ejecuta después de cada test individual.

after(): es una función que se ejecuta una vez, al finalizar la

Además en este ejemplo validamos si realmente agregamos en el 2 item en el combo que

Aumento de Tiempo de Espera.

Nos permite una serie de script sin el Cyprees Runner.

npx cypress open

En la siguiente imagen podemos visualizar el Cypress Runner en el navegador, donde en la

Es una ejecución donde se visualiza la parte gráfica y el navegador.

npx cypress run

Palabras claves: visit,should, url, title, location

Palabras claves: type.

El resultado de visit no muestra la página de la siguiente imagen www.saucedemo.com , donde

Palabra Claves: get, type, click

Get : Obtener un elemento de la pagina de test

Type: escribir dentro del elemnto.

Click: Evento que se le da algún elemento del get

En la siguiente imagen muestra la pagina direccionada del ejercicio.

También podría gustarte