End-to-End Testing for the Modern Web

Revolution Conf '19

Transcript

1. End-to-End Testing for the Modern Web @tgriesser
2. Hello RevConf!!!
3. Tim Griesser @tgriesser Sr. Software Developer
4. Testing!!
5. Testing!!
6. What is testing really??
7. - Jenna Charlton - “Testing 101 For Devs”
8. One of those things you’re supposed to do…
9. One of those things you’re supposed to do…
 but not everyone does
10. One of those things you’re supposed to do…
 but not everyone does ⏰
11. The Testing Pyramid UI / E2E Integration / Services Unit Tests
12. The Testing Pyramid UI / E2E Integration / Services Unit Tests Cheapest, Developers Like These
13. The Testing Pyramid UI / E2E Integration / Services Unit Tests Real World, Most Valuable More Expensive
14. https://martinfowler.com/bliki/TestPyramid.html The Testing Blob??
15. Cost Benefit Unit E2E Integration
16. UI Testing is Expensive
17. UI Testing is Flaky, Unreliable
18. UI Testing is Hard to Maintain
19. but at the same time…
23. UI / End-to-End testing is too expensive to ignore
24. is an approach to software testing and system testing in which testing is performed earlier in the lifecycle (i.e., moved left on the project timeline). It is the first half of the maxim "Test early and often.” “Shift-Left”
25. Cost Benefit Unit E2E Integration
26. Fast, easy, and reliable testing tool for anything that runs in a web browser
27. Why Cypress?
28. Why Cypress? • Open Source, MIT Licensed • Runs in a variety of CI providers • Batteries included: Mocha + Chai + Sinon • Excellent documentation, examples • User experience • Simple download, or npm install cypress
29. Modern Web Applications: Stateful
30. Cypress: Built for the Modern Web • Listens and Responds to your application’s events • Knows when XHR’s are sent/received • Allows you to access the DOM directly • Time Travels through previous commands • Readable error messages • Handles async, write code declaratively
31. Works with any framework
33. Demo Time!
34. Common Questions
35. Cypress vs Selenium
36. Cypress vs Selenium
37. Cypress vs Selenium Stateless
38. Cypress vs Selenium Stateful
39. Cypress vs Selenium Stateful Stateless &
40. Testing Network Requests
41. Full End-to-End
42. Network Stubbing
43. Visual Regression Testing
48. Accessibility
49. Accessibility
50. Not just for complex frontend UI testing - useful in traditional web apps
51. “anything that runs in a web browser”
53. Cypress Dashboard
54. Cypress Dashboard
55. Cypress Dashboard • Intelligent parallelism of tests, balances based on historical run times • Records artifacts, screenshots, recordings of the tests in CI • Free for Open Source Projects
56. Code Coverage?
59. Integration Unit How Cypress Tests Cypress Types
60. Integration Unit Types Testing Hourglass? ⌛
61. Documentation
62. Roadmap https://on.cypress.io/roadmap Cross Browser Testing Full Network Layer Stubbing Test Retries
63. We are trying to drastically improve the status-quo of testing on the web
64. Thanks!