Cypress: una completa experiencia de testing end-to-end por Lucas Borella Sobre el taller: En este taller vamos a ver un roadmap de todo lo que ofrece Cypress: instalar Cypress, crear Tests, correr tests, debugging y buenas prácticas.

1. FROM SCRATCHFROM SCRATCH
a complete guide to e2e testing
https://www.cypress.io/
cypress.io https://www.cypress.io/

2. cypress.io https://www.cypress.io/
ES UN FRAMEWORK DE TESTINGES UN FRAMEWORK DE TESTING
ESCRITO POR COMPLETO EN JAVASCRIPTESCRITO POR COMPLETO EN JAVASCRIPT
ORIENTADO A DESARROLLADORES/ QA ENGORIENTADO A DESARROLLADORES/ QA ENG
PARA AUTOMATIZAR TEST EN EL NAVEGADORPARA AUTOMATIZAR TEST EN EL NAVEGADOR
SIMULA EL USO DEL NAVEGADOR ACOMO UNSIMULA EL USO DEL NAVEGADOR ACOMO UN
USUARIO REAL LO HARIAUSUARIO REAL LO HARIA
OPEN-SOURCEOPEN-SOURCE

3. cypress.io https://www.cypress.io/
Lenguajes de Scripting
Automation
Machine Learning
BlockChain
Beers
Lucas Borella

4. cypress.io https://www.cypress.io/
Y que mejor forma de ver una herramienta
nueva que con un pantallazo de sus cualidades

5. cypress.io https://www.cypress.io/
GOTO TEST RUNNER UI

6. cypress.io https://www.cypress.io/
https://www.cypress.io/features
FEATURESFEATURES
TIME TRAVELTIME TRAVEL
HOT RELOADHOT RELOAD
NATIVE ACCESSNATIVE ACCESS
DEBUGGINGDEBUGGING
AUTOMATICAUTOMATIC
WAITINGWAITING
NETWORKNETWORK
TRAFFICTRAFFIC
CONTOLCONTOL

7. cypress.io https://www.cypress.io/
https://www.cypress.io/how-it-works
ARQUITECTURAARQUITECTURA
CYPRESS IN BROWSERCYPRESS IN BROWSER CYPRESS IN NODECYPRESS IN NODE
SE MANTIENEN EN CONSTANTE COMUNICACIONSE MANTIENEN EN CONSTANTE COMUNICACION
PARA OBTENER UN FLUJO CONTROLADO DEPARA OBTENER UN FLUJO CONTROLADO DE
NUESTROS TESTS AUTOMATIZADOSNUESTROS TESTS AUTOMATIZADOS

8. cypress.io https://www.cypress.io/
AHORA QUE ENTRAMOS EN CONTEXTOAHORA QUE ENTRAMOS EN CONTEXTO
Y TENEMOS UN PANORAMA MAS CLAROY TENEMOS UN PANORAMA MAS CLARO
DE CYPRESSDE CYPRESS
LES PRESENTOLES PRESENTO
NUESTRO TEST BUNNYNUESTRO TEST BUNNY
https://github.com/cross13/magic-bunny

9. cypress.io https://www.cypress.io/
https://github.com/cross13/magic-bunny
$ git clone https://github.com/cross13/magic-bunny.git
$ cd magic-bunny/
$ npm install
1
2
3
$ npm run start1 $ npm run server1
GOTO TERMINAL

10. cypress.io https://www.cypress.io/
ASI QUE... POR DONDE EMPEZAMOSASI QUE... POR DONDE EMPEZAMOS
(QA) TESTS CASES (QA) TESTS CASES

11. cypress.io https://www.cypress.io/
TEST CASE LOGIN PAGE:TEST CASE LOGIN PAGE:
1. Ingresar a http://localhost:3000/login.
2. Chequear el título de nuestra página.
3. Completar el campo username con un usuario válido.
4. Completar el campo password con la password para el
usuario válido.
5. Hacer click en el boton de login
6. Chequear mensages de éxito
7. Corroborar url dentro del app una vez logueado
HAPPY PATHHAPPY PATH

12. cypress.io https://www.cypress.io/
INSTALACION INICIALINSTALACION INICIAL
$ mkdir magic-bunny-automation && cd ./magic-bunny-automation
$ npm init
$ npm install cypress --save-dev
1
2
3
................

13. cypress.io https://www.cypress.io/
GOTO TERMINAL

14. cypress.io https://www.cypress.io/
CYPRESS STRUCTURECYPRESS STRUCTURE
{
"baseUrl": "http://localhost:3000",
"requestTimeout": 7000,
"pageLoadTimeout": 60000,
"defaultCommandTimeout": 5000,
"trashAssetsBeforeRuns": true,
"viewportHeight": 960,
"viewportWidth": 1360,
"env": {
"API_URL": "http://localhost:8080"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
cypress.json //config file

15. cypress.io https://www.cypress.io/
GOTO VSCODE / TEST RUNNER UI
UN TEST SIMPLEUN TEST SIMPLE

16. cypress.io https://www.cypress.io/
UN TEST SIMPLEUN TEST SIMPLE
/// <reference types="Cypress" />
context('Login Page', () => {
beforeEach(() => {
cy.visit('/');
})
it('should have the correct title', () => {
cy.get('.Login-Title')
.should('have.text', 'Magic App')
.should('be.visible');
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

17. cypress.io https://www.cypress.io/
ELEGIR EL MEJOR SELECTORELEGIR EL MEJOR SELECTOR
UNIQUENESSUNIQUENESS
Con una serie de estrategias cypress calcula automaticamente el mejor
selector disponible en el DOM para referenciar al elemento objetivo
data-cy
data-test
data-testid
id
class
tag
attributes
nth-child

18. cypress.io https://www.cypress.io/
EJERCICIO DE SELECTORESEJERCICIO DE SELECTORES
GOTO TEST RUNNER / VSCODE

19. cypress.io https://www.cypress.io/
CONCEPTO IMPORTANTECONCEPTO IMPORTANTE
RETRY-ABILITYRETRY-ABILITY
https://docs.cypress.io/guides/core-concepts/retry-
ability.html#Commands-vs-assertions

20. cypress.io https://www.cypress.io/
EJERCICIO DE RETRY-ABILITYEJERCICIO DE RETRY-ABILITY
GOTO VSCODE / TEST RUNNER UI

21. cypress.io https://www.cypress.io/
UI UI
/// <reference types="Cypress" />
context('Login Page', () => {
beforeEach(() => {
cy.visit('/');
})
it('Should render the correct login page', () => {
cy.get('.Login-Title').should('have.text', 'Magic App').should('be.visible');
cy.get('.Login-username').should('have.attr', 'placeholder', 'Username');
cy.get('.Login-password').should('have.attr', 'placeholder', 'Password');
cy.get('.Login-submit').should('contain', 'Login');
});
it('should allow to type inside the inputs', () => {
cy.get('.Login-username').type('myuser');
cy.get('.Login-username').invoke('val').should((text) => {
expect(text).to.eq('myuser');
});
cy.get('.Login-password').type('mypassword');
cy.get('.Login-password').invoke('val').should((text) => {
expect(text).to.eq('mypassword');
});
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

22. cypress.io https://www.cypress.io/
UI <-> API UI <-> API
/// <reference types="Cypress" />
context('Login Page', () => {
beforeEach(() => {
cy.visit('/');
})
it('should login', () => {
cy.get('.Login-username').type('admin');
cy.get('.Login-password').type('123456');
cy.get('.Login-submit').click();
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

23. cypress.io https://www.cypress.io/
STYLESTYLE
it('should show the error msg on a failed login with the correct style', () => {
cy.get('.Login-username').type('fail-user');
cy.get('.Login-password').type('fail-password');
cy.get('.Login-submit').click();
cy.get('.Login-error').contains('Wrong Crendentials');
cy.get('.Login-error').should('have.css', 'background-color')
.and('eq', 'rgb(181, 67, 36)');
cy.get('.Login-error').should('have.css', 'color')
.and('eq', 'rgb(255, 255, 255)');
});
1
2
3
4
5
6
7
8
9
10

24. cypress.io https://www.cypress.io/
UN POCO MAS COMPLEJOUN POCO MAS COMPLEJO
it('should login', () => {
cy.server().route('POST', '/login').as('postLogin');
cy.clearLocalStorage().then((ls) => {
expect(ls.getItem('myUser')).to.be.null
});
cy.get('.Login-username').type('admin');
cy.get('.Login-password').type('123456');
cy.get('.Login-submit').click();
cy.wait('@postLogin').its('status').should('be', 200);
cy.url().should('include', '/magic').then(() => {
expect(localStorage.getItem('myUser')).not.empty;
cy.log(localStorage.getItem('myUser'));
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

25. cypress.io https://www.cypress.io/
USE NETWORK REQUEST TO AVOID SCREENSUSE NETWORK REQUEST TO AVOID SCREENS
it('should authenticate with the api', () => {
cy.fixture('login').then((user) => {
cy.request('POST', Cypress.env('API_URL') + '/login', user)
.then((xhr) => {
expect(xhr.body).not.empty;
expect(xhr.body.token).not.empty;
localStorage.setItem('myUser', xhr.body);
})
});
})
1
2
3
4
5
6
7
8
9
10

26. cypress.io https://www.cypress.io/
CREAR COMANDOSCREAR COMANDOS
Cypress.Commands.add('login', (username, password) => {
cy.server().route('POST', '/login').as('postLogin');
cy.clearLocalStorage().then((ls) => {
expect(ls.getItem('myUser')).to.be.null
});
cy.get('.Login-username').type('admin');
cy.get('.Login-password').type('123456');
cy.get('.Login-submit').click();
cy.wait('@postLogin').its('status').should('be', 200);
cy.url().should('include', '/magic').then(() => {
expect(localStorage.getItem('myUser')).not.empty;
cy.log(localStorage.getItem('myUser'));
});
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
cy.login('admin')1

27. cypress.io https://www.cypress.io/
HOOKSHOOKS
describe('Hooks', function() {
before(function() {
// runs once before all tests in the block
})
after(function() {
// runs once after all tests in the block
})
beforeEach(function() {
// runs before each test in the block
})
afterEach(function() {
// runs after each test in the block
})
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

28. cypress.io https://www.cypress.io/
DEBUGGING TESTSDEBUGGING TESTS
https://docs.cypress.io/guides/guides/debugging.html#Debug-just-like-you-
always-do

29. cypress.io https://www.cypress.io/
DEBUGGEAR PROMISES ?DEBUGGEAR PROMISES ?

30. cypress.io https://www.cypress.io/
THE END, ALL TESTS THE END, ALL TESTS PASSPASS
Links de interes
https://docs.cypress.io/api/api/table-of-contents.html
Github
https://github.com/cross13/magic-bunny
https://github.com/cross13/magic-bunny-automation
https://www.cypress.io/blog/
https://docs.cypress.io/guides/references/best-practices.html#article