Argentesting 2019 - Cypress una completa experiencia de testing end to end
2 likes605 views
The document is a comprehensive guide to end-to-end testing using the Cypress framework, providing information about its features, architecture, and setup. It includes instructions for installing Cypress, creating test cases, and implementing various testing strategies, such as handling UI and API interactions. Additionally, it offers code examples and debugging tips for optimizing automated tests.
Argentesting 2019 - Cypress una completa experiencia de testing end to end
- 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
- 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 ................
- 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
- 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
- 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