Automated Testing is a vital part of any healthy software development process. It ensures high code quality, architectural flexibility which in turn helps to keep a fast pace in developing new features. It even gets more important for open source projects. You don’t want to blindly depend on untested projects which you include as libraries in your next production release. In this talk we’re not going to talk about TDD or unit testing. Rather, we’re diving into how automated, end-2-end testing is done in 2018, with Cypress.

1. Photo by rawpixel.com from Pexels
End-2-end Testing
Done right!
@juristr • https://juristr.com

2. whoami?

3. Web Technologies
JURI
STRUMPFLOHNER

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.

7. Trainer & Consultant
https://juristr.com

8. @juristr
Image: martinfowler.com

9. @juristr
Image: martinfowler.com
this part

10. @juristr
Image: martinfowler.com
costlyslow

11. Selenium
Server API
Selenium
Driver
Java
JavaScript
C#
Java
Our
WebApp
@juristr

12. Selenium
Server API
Selenium
Driver
Java
JavaScript
C#
Java
Our
WebApp
@juristr
Complex API

13. Selenium
Server API
Selenium
Driver
Java
JavaScript
C#
Java
Our
WebApp
@juristr
Needs to match

14. TRUST
NO

15. Cypress.io

16. https://cypress.io

17. @juristr
Time Travel
Real time Reloads
Debuggability
Automatic waiting
cypress.io

18. JavaScript
Our
WebApp
@juristr
Node.js

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

34. @juristr
Frontend UI API
Gat
ew
ay
Service
DB
Service
DB
Service
DB
Service
DB
Logi
c
Logi
c
Logi
c
pay
pro
ds
orde
rs
da
ta
da
ta

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