I like my tests, like I like my friends, flake-free and reliable

Cypress end-to-end testing talk given at JS Conf US in Carlsbad, CA.

Transcript

1. I like my tests, like I like my friends, flake-free and reliable Amir Rustamzadeh @amirrustam JS Conf ! 2018
2. Sr. Software Engineer @amirrustam Amir Rustamzadeh amir@cypress.io
3. E2E Integration Unit Visit The Testing Pyramid @amirrustam
4. E2E Integration Unit Visit The Testing Pyramid Easy, developers really like to write these. @amirrustam
5. E2E Integration Unit Visit The Testing Pyramid Easy, developers really like to write these. More Difficult, costly, slower… Often completely ignored @amirrustam
6. E2E Integration Unit Visit The Testing Pyramid Best for users & business @amirrustam
7. Renaissance of the Web 2005 2006 2014 2013 @amirrustam
8. Renaissance of the Web 2005 2006 2014 2013 More complexity moved from backend to frontend. @amirrustam
9. 2005 2006 2014 2013 Renaissance of the Web + Testing Automation 2004 @amirrustam
10. Selenium Architecture Selenium Server Drivers Tests Python Javascript Java @amirrustam
11. Selenium Architecture Selenium Server Drivers Tests Python Javascript Java ⚠ Classical Syncing Dilemma @amirrustam
12. Selenium Architecture Flakiness Non-deterministic @amirrustam
13. ✋ JSDOM or DOM Emulation JSDOM is not a real browser. Your users don’t run your app with JSDOM. One of the primary reasons for E2E is to simulate real user actions. @amirrustam
14. Don’t let your users be your first E2E test. @amirrustam
15. Stateless Stateful @amirrustam
16. Fast, easy and reliable testing for anything that runs in a browser. Free. Open Source. MIT License @amirrustam
17. $ npm install -D cypress ☝ All-in-one tool You get everything you need ❤ Familiar tools underneath Mocha, Chia, Sinon @amirrustam
18. Lets see it in action…. @amirrustam https://github.com/cypress-io/cypress-example-todomvc
19. Cypress Architecture Browser Cypress Test Runner Your App @amirrustam
20. ⚡ Native-access to the DOM and your app.
21. - Fast Test Runs @amirrustam
22. ⏳ Automatic Waiting @amirrustam
23. Debuggability @amirrustam
24. Realtime Reloading @amirrustam
25. Flake-free, consistent, and reliable. @amirrustam
26. How are commands executed? 1 2 3 @amirrustam
27. ⚙ Component Testing cypress-react-unit-testing vue angular angularjs hyper-app svelte cycle @amirrustam https:!//github.com/bahmutov/cypress-vue-unit-test#test-adapters-for-other-frameworks
28. 3 cypress open Great for everyday development workflow Cypress + Editor Side-by-Side TDD Nirvana cypress run Testing in CI/CD Pipeline Headless More efficient for running all your tests @amirrustam
29. 3 cypress open Great for everyday development workflow Cypress + Editor Side-by-Side TDD Nirvana cypress run --record Video Recordings of Tests @amirrustam
30. Cypress Dashboard - Great for CI @amirrustam
31. cypress run --record --parallel Introducing Parallelization Now available in Cypress 3.1 @amirrustam
32. cypress run --parallel cypress run --parallel cypress run --parallel Your CI Machines 3x parallelism Ready for work signup.spec.js login.spec.js widget.spec.js @amirrustam
33. Previous Spec Test Runs Spec Test Duration History Test Duration (seconds) The Future Automatic Load Balancing of Test Specs Duration Forecast @amirrustam
34. Automatic Load Balancing of Test Specs login.spec.js signup.spec.js widget.spec.js @amirrustam
35. Cypress Parallelization Easily optimize your CI usage You save a lot of ⏳ time and money @amirrustam
36. cypress run --group frontend Introducing Test Run Grouping Now available in Cypress 3.1
37. Documentation docs.cypress.io
38. Best Practices docs.cypress.io @amirrustam
39. https:!//youtu.be/5XQOK0v_YRE Cypress Best Practices Brian Mann, Creator of Cypress
40. End to End testing with Cypress By Andrew Van Slaars egghead.io/courses/end-to-end-testing-with-cypress
41. docs.cypress.io/examples/examples/tutorials.html Tutorial Videos
42. Testing Workshop docs.cypress.io/examples/examples/workshop.html
43. Podcasts docs.cypress.io/examples/media/podcasts-media.html
44. We are trying to drastically improve the status quo of testing on the web. @amirrustam
45. Thank You npm install -D cypress Free. Open Source. MIT License Follow @amirrustam for link to slides.