SFScon18 - Juri Strumpflohner - End-to-end testing done right!
0 likes•121 views
The document discusses end-to-end testing using Cypress, highlighting its advantages over other tools like Selenium. It emphasizes Cypress's features such as time traveling, real-time reloads, and improved developer ergonomics. The document also includes code snippets demonstrating testing strategies for login and other functionalities.
![@juristr
describe('Login', () => {
it('should login and logout properly', () => {
cy.login(Cypress.env('username'), Cypress.env('password'));
cy.get('r3trees-shell');
// logout again
cy
.get('[data-tuid="user-menu-btn"]')
.click()
.get('[data-tuid="logout-btn"]')
.click()
.url()
.should('eq', `${Cypress.config('baseUrl')}/login`);
});
});](https://image.slidesharecdn.com/sfscon18-juristrumpflohner-end-to-endtestingdoneright-181206104154/85/SFScon18-Juri-Strumpflohner-End-to-end-testing-done-right-22-320.jpg)
![@juristr
describe('Login', () => {
it('should login and logout properly', () => {
cy.login(Cypress.env('username'), Cypress.env('password'));
cy.get('r3trees-shell');
// logout again
cy
.get('[data-tuid="user-menu-btn"]')
.click()
.get('[data-tuid="logout-btn"]')
.click()
.url()
.should('eq', `${Cypress.config('baseUrl')}/login`);
});
});](https://image.slidesharecdn.com/sfscon18-juristrumpflohner-end-to-endtestingdoneright-181206104154/85/SFScon18-Juri-Strumpflohner-End-to-end-testing-done-right-23-320.jpg)
![@juristr
describe('Login', () => {
it('should login and logout properly', () => {
cy.login(Cypress.env('username'), Cypress.env('password'));
cy.get('r3trees-shell');
// logout again
cy
.get('[data-tuid="user-menu-btn"]')
.click()
.get('[data-tuid="logout-btn"]')
.click()
.url()
.should('eq', `${Cypress.config('baseUrl')}/login`);
});
});](https://image.slidesharecdn.com/sfscon18-juristrumpflohner-end-to-endtestingdoneright-181206104154/85/SFScon18-Juri-Strumpflohner-End-to-end-testing-done-right-24-320.jpg)
![@juristr
describe('Login', () => {
it('should login and logout properly', () => {
cy.login(Cypress.env('username'), Cypress.env('password'));
cy.get('r3trees-shell');
// logout again
cy
.get('[data-tuid="user-menu-btn"]')
.click()
.get('[data-tuid="logout-btn"]')
.click()
.url()
.should('eq', `${Cypress.config('baseUrl')}/login`);
});
});](https://image.slidesharecdn.com/sfscon18-juristrumpflohner-end-to-endtestingdoneright-181206104154/85/SFScon18-Juri-Strumpflohner-End-to-end-testing-done-right-25-320.jpg)
![@juristr
describe('Login', () => {
it('should login and logout properly', () => {
cy.login(Cypress.env('username'), Cypress.env('password'));
cy.get('r3trees-shell');
// logout again
cy
.get('[data-tuid="user-menu-btn"]')
.click()
.get('[data-tuid="logout-btn"]')
.click()
.url()
.should('eq', `${Cypress.config('baseUrl')}/login`);
});
});](https://image.slidesharecdn.com/sfscon18-juristrumpflohner-end-to-endtestingdoneright-181206104154/85/SFScon18-Juri-Strumpflohner-End-to-end-testing-done-right-26-320.jpg)
![@juristr
describe('Login', () => {
it('should login and logout properly', () => {
cy.login(Cypress.env('username'), Cypress.env('password'));
cy.get('r3trees-shell');
// logout again
cy
.get('[data-tuid="user-menu-btn"]')
.click()
.get('[data-tuid="logout-btn"]')
.click()
.url()
.should('eq', `${Cypress.config('baseUrl')}/login`);
});
});](https://image.slidesharecdn.com/sfscon18-juristrumpflohner-end-to-endtestingdoneright-181206104154/85/SFScon18-Juri-Strumpflohner-End-to-end-testing-done-right-27-320.jpg)
![@juristr
describe('Login', () => {
it('should login and logout properly', () => {
cy.login(Cypress.env('username'), Cypress.env('password'));
cy.get('r3trees-shell');
// logout again
cy
.get('[data-tuid="user-menu-btn"]')
.click()
.get('[data-tuid="logout-btn"]')
.click()
.url()
.should('eq', `${Cypress.config('baseUrl')}/login`);
});
});](https://image.slidesharecdn.com/sfscon18-juristrumpflohner-end-to-endtestingdoneright-181206104154/85/SFScon18-Juri-Strumpflohner-End-to-end-testing-done-right-29-320.jpg)
SFScon18 - Juri Strumpflohner - End-to-end testing done right!
- 1. Photo by rawpixel.com from Pexels End-2-end Testing Done right! @juristr • https://juristr.com
- 2. whoami?
- 4. Software · GIS · Innovation · International Projects · South Tyrol
- 6. Egghead.io Instructor Learn the best JavaScript tools and frameworks from industry pros. Video tutorials for badass web developers.
- 14. TRUST NO
- 15. Cypress.io
- 17. @juristr Time Travel Real time Reloads Debuggability Automatic waiting cypress.io
- 19. In practice ?
- 20. @juristr
- 21. Writing Tests
- 22. @juristr describe('Login', () => { it('should login and logout properly', () => { cy.login(Cypress.env('username'), Cypress.env('password')); cy.get('r3trees-shell'); // logout again cy .get('[data-tuid="user-menu-btn"]') .click() .get('[data-tuid="logout-btn"]') .click() .url() .should('eq', `${Cypress.config('baseUrl')}/login`); }); });
- 23. @juristr describe('Login', () => { it('should login and logout properly', () => { cy.login(Cypress.env('username'), Cypress.env('password')); cy.get('r3trees-shell'); // logout again cy .get('[data-tuid="user-menu-btn"]') .click() .get('[data-tuid="logout-btn"]') .click() .url() .should('eq', `${Cypress.config('baseUrl')}/login`); }); });
- 24. @juristr describe('Login', () => { it('should login and logout properly', () => { cy.login(Cypress.env('username'), Cypress.env('password')); cy.get('r3trees-shell'); // logout again cy .get('[data-tuid="user-menu-btn"]') .click() .get('[data-tuid="logout-btn"]') .click() .url() .should('eq', `${Cypress.config('baseUrl')}/login`); }); });
- 25. @juristr describe('Login', () => { it('should login and logout properly', () => { cy.login(Cypress.env('username'), Cypress.env('password')); cy.get('r3trees-shell'); // logout again cy .get('[data-tuid="user-menu-btn"]') .click() .get('[data-tuid="logout-btn"]') .click() .url() .should('eq', `${Cypress.config('baseUrl')}/login`); }); });
- 26. @juristr describe('Login', () => { it('should login and logout properly', () => { cy.login(Cypress.env('username'), Cypress.env('password')); cy.get('r3trees-shell'); // logout again cy .get('[data-tuid="user-menu-btn"]') .click() .get('[data-tuid="logout-btn"]') .click() .url() .should('eq', `${Cypress.config('baseUrl')}/login`); }); });
- 27. @juristr describe('Login', () => { it('should login and logout properly', () => { cy.login(Cypress.env('username'), Cypress.env('password')); cy.get('r3trees-shell'); // logout again cy .get('[data-tuid="user-menu-btn"]') .click() .get('[data-tuid="logout-btn"]') .click() .url() .should('eq', `${Cypress.config('baseUrl')}/login`); }); });
- 28. Extend Cypress!
- 29. @juristr describe('Login', () => { it('should login and logout properly', () => { cy.login(Cypress.env('username'), Cypress.env('password')); cy.get('r3trees-shell'); // logout again cy .get('[data-tuid="user-menu-btn"]') .click() .get('[data-tuid="logout-btn"]') .click() .url() .should('eq', `${Cypress.config('baseUrl')}/login`); }); });
- 30. @juristr Cypress.Commands.add('login', (username: string, pwd: string) => { cy.visit('/login'); // compile and submit the form cy.get('form') .getEl('username') .type(username); cy.get('form') .getEl('password') .type(pwd); cy.get('form').submit(); });
- 31. @juristr it('should correctly choose toppings', () => { ... cy.get('form') .getToppings() .first() .click(); cy.get('form') .getToppings() .last() .click(); cy.get('form').hasChosenToppings(2); ... })
- 32. Strategies e2e
- 33. @juristr Frontend UI API Gate way Service DB Service DB Service DB Service DB Logic Logic Logic pay prods orders data data
- 35. @juristr Frontend UI API Service DB Service DB Service DB Service DB ... ... ... ... ... ... ... ...
- 36. @juristr Frontend UI API Gate way Service DB Service DB Service DB Service DB Logic Logic Logic pay prods orders data data Mock API Gateway DB
- 37. @juristr Frontend UI API Gate way Service DB Service DB Service DB Service DB Logic Logic Logic pay prods orders data data Cypress fakes
- 38. So...
- 39. to summarize @juristr Simpler API - just one global cy object Extensible - extend the API with your app specific commands Developer Ergonomics - time travelling, better error handling, debugging Dev and CI support - Docker containers Test run parallelization - reduces test runs by 50% (CI only) Multi browser support coming - currently just Chrome and Electron
- 40. docs.cypress.io
- 41. @juristr JURI STRUMPFLOHNER Questions? Reach out to me later & connect with me on Twitter https://juristr.com