Boas práticas e diferenças Cypress vs Protractor walmyr.dev

● Diferenças ○ Slogan ○ Configuração ○ Sintaxe ○ Tipos de teste ○ Documentação ○ Bootstrap ○ Popularidade / Tendência ○ Público ○ Paradigmas de programação ● Boas práticas ○ Application Actions / Page Objects ○ Testes mistos / Testes End-to-end ● Minhas funcionalidades favoritas ● Demo time ● Recursos para aprendizado das ferramentas ● Perguntas Agenda

Cypress “A web evoluiu. Finalmente, os testes também.” Slogan Protractor “Testes end-to-end para aplicações Angular.”

Cypress // cypress.json {} Configuração Protractor // protractor.conf.js module.exports.config = { specs: [`./specs/*.spec.js`], onPrepare() { browser.waitForAngularEnabled(false); } }

Sintaxe Cypress cy.visit(`http://example.com `); cy.get(`#my-id`); cy.contains(`Salvar`).click(); cy.get(`.item`); // Retorna uma lista de itens cy.get(`.item`).should(`have.length`, 20); // Como eu uso. Também dá pra usar expect. cy.url().should(‘be.equal`, `http://example.com`); Protractor browser.get(`http://example.com `); element(by.css(`#my-id`)); element(by.cssContainingText(`button` , `Salvar`)).click(); element.all(by.css(`.item`)); // Retorna uma lista de itens expect(element.all(by.css(`.item`)).c ount()).toBe(20); expect(browser.getCurrentUrl()).toEqu al(`http://example.com`);

Sintaxe . . . Cypress cy.get(`.text-field`).type(`Oi`); it.only(`some test`, () => {...}); it.skip(`other test`, () => {...}); describe.only(`test suite`, () => {...}); describe.skip(`test suite`, () => {...}); Protractor element(by.css(`.text-field`)).sendKe ys(`Oi`); fit(`some test`, () => {...}); xit(`other test`, () => {...}); fdescribe(`test suite`, () => {...}); xdescribe(`test suite`, () => {...});

Cypress ● Unidade ● Componentes ● API ● Sistema ● End-to-end ● Comparação de screenshots ● Mistos Tipos de teste Protractor ● End-to-end ● Comparação de screenshots

Cypress ● Altíssima qualidade! ● Boas práticas ● Más práticas ● Texto, snippets de código, videos, gifs, screenshots ● Aplicações exemplo ● cypress/examples ● cypress-io/cypress-examples-recipes https://docs.cypress.io/guides Documentação Protractor ● Boa para sua época comparado à concorrência ● Boas práticas (da época?) ● Texto e snippets de código (basicamente) ● API parou de ser atualizada depois da versão 5.4.1 http://www.protractortest.org/#/

Protractor npm i protractor -D touch protractor.conf.js mkdir specs/ && cd specs/ touch sample.spec.js mkdir page-objects/ ... Bootstrap Cypress npm i cypress -D npx cypress open

Popularidade / Tendência

. . . Popularidade / Tendência Fonte: https://stackshare.io/stackups/cypress-vs-protractor

. . . Popularidade / Tendência

. . . Popularidade / Tendência Fonte: https://2019.stateofjs.com/testing/

Protractor Normalmente utilizado por testadores, QAs, etc. Cypress Feito de desenvolvedores para desenvolvedores. Público

Protractor (OO) // page-objects/Login.js class Login { constructor() { this.loginField = element(...); this.pwdField = element(...); this.loginBtn = element(...); } visit() { browser.get(`/login`); } login() { this.loginField .sendKeys(`admin`); this.pwdField .sendKeys(`123321`); this.loginBtn.click(); } } module.exports = Login; Paradigmas Cypress (funcional) // support/commands.js Cypress.Commands.add(`login`, () => { cy.visit(`/login`); cy.get(`#user`).type(`admin`); cy.get(`#pwd`).type(`123321`); cy.contains(`Login`).click(); }); // integration/login.spec.js it(`should login`, () => { cy.login(); cy.get(`#avatar`) .should(`be.visible`); });

Protractor (OO) // specs/login.spec.js const LoginPage = require(`...`); it(`should login`, () => { const loginPage = new LoginPage(); loginPage.visit(); loginPage.login(); const avatar = element(by.css(`#avatar`)); expect(avatar.isDisplayed()) .toBe(true); }); Cypress // integration/login.spec.js ... it(`already some other test`, () => { ... }); Paradigmas

Boas práticas Protractor ● Page Objects e componentes ● https://github.com/wlsf82/protractor-compo nents-and-page-objects ● https://wlsf82.github.io/protractor-helper/ ● http://www.protractortest.org/#/style-guide Cypress ● App Actions ● https://www.cypress.io/blog/2019/01/03/s top-using-page-objects-and-start-using-ap p-actions/ ● Teste via interface gráfica só uma vez!

Protractor const path = require(`path`); const fileToUploadRelativePath = `./example.txt`; const fileToUploadAbsolutePath = path.resolve(__dirname, fileToUploadRelativePath); const fileInputField = element(by.css(`input['type="file"']` )); fileInputField.sendKeys(fileToUploadA bsolutePath); Funcionalidades favoritas Cypress ● Time travel ● Real time reload ● Automatic waiting ● Videos recording ● cy.server(); ● cy.route(); ● cy.request(); ● cy.exec(); ● cy.fixture(); ● cy.wait(`@some-route`); ● cy.get(`div`).as(`myDiv`); ● cy.contains(`Cancelar`).click() ;

Demo time!

Recursos para aprendizados das ferramentas Protractor ● https://talkingabouttesting.coursify.me/cours es/arquitetura-de-testes-com-protractor ● https://www.udemy.com/course/arquitetura- de-testes-com-protractor/ ● https://www.casadocodigo.com.br/products/l ivro-protractor ● https://leanpub.com/end-to-end-testing-with -protractor ● https://www.youtube.com/watch?v=BAS9dS TJaBk&list=PL-eblSNRj0QEvVfKp0Xzagao9S qaSyW5k ● https://wlsf82.github.io/protractor-helper/ Cypress ● https://talkingabouttesting.coursify.me/co urses/testes-automatizados-com-cypress-b asico ● https://talkingabouttesting.coursify.me/co urses/testes-automatizados-com-cypress-i ntermediario ● https://www.udemy.com/course/testes-aut omatizados-com-cypress-basico/ ● https://www.udemy.com/course/testes-aut omatizados-com-cypress-intermediario/ ● http://github.com/wlsf82/cypress-avancado

Perguntas?

Obrigado!

Boas práticas e diferenças Cypress vs Protractor walmyr.dev