Boas práticas e diferenças - Cypress vs Protractor

Slides da talk apresentada em 15/08/2020 na QArentena 41.

1. Boas práticas e diferenças Cypress vs Protractor walmyr.dev
2. • 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
3. Cypress “A web evoluiu. Finalmente, os testes também.” Slogan Protractor “Testes end-to-end para aplicações Angular.”
4. Cypress // cypress.json {} Configuração Protractor // protractor.conf.js module.exports.config = { specs: [`./specs/*.spec.js`], onPrepare() { browser.waitForAngularEnabled(false); } }
5. 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`);
6. 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`, () => {...});
7. Cypress • Unidade • Componentes • API • Sistema • End-to-end • Comparação de screenshots • Mistos Tipos de teste Protractor • End-to-end • Comparação de screenshots
8. 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/#/
9. 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
10. Popularidade / Tendência
11. . . . Popularidade / Tendência Fonte: https://stackshare.io/stackups/cypress-vs-protractor
12. . . . Popularidade / Tendência
13. . . . Popularidade / Tendência Fonte: https://2019.stateofjs.com/testing/
14. Protractor Normalmente utilizado por testadores, QAs, etc. Cypress Feito de desenvolvedores para desenvolvedores. Público
15. 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`); });
16. 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
17. 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!
18. 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() ;
19. Demo time!
20. 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
21. Perguntas?
22. Obrigado!
23. Boas práticas e diferenças Cypress vs Protractor walmyr.dev