Cypress_-_e2e_testing_for_Web_in__2019_.pdf

Transcript

1. Cypress - e2e testing for Web in 2019 21.08.2019
2. Shahjada Talukdar Senior Software Engineer @eBay
3. What is Cypress? JavaScript e2e Testing Framework
4. Why we need another tool? Selenium, Robots
5. Limitations of Selenium • Old(2004) and was not built for the today’s modern webapps • Slow, flaky tests, not stable enough
6. Experience with robot • It’s hard to make dev env • Hard to write and run tests • Local env test running is hard while development • Not sure if it’s very good for TDD
7. Objective ( to solve the problem ) To have a testing environment with possibly fewer flaky tests and faster & easier dev experience.
8. Challenges for companies • Existing test framework(Robot) is already in power. • Existing app(already built), harder than apps from scratch. • Need to think about the existing DevOps environment.
9. Current Limitations of cypress • Still pretty new ( I think it as react’s beginning time ). • No IE support yet (they say to test with chrome and if the app works 100% means it is tested e2e so it’s a big relief too ).
10. Benefits(?) of Cypress • Same JS code everywhere. • Development environment couldn’t be easier than this. • We can use our existing testing knowledge like mocha, jest, jasmine
11. • https://www.cypress.io/how-it-works
12. Old Team, Old App and We have 50 developers, what to do? npm install
13. Initiate cypress for an existing app cypress open
14. e2e tests need to wait for the page to render and finish the http calls Cypress does this by default ( at least they say so ) That’s why, fewer/no manual time waits
15. My app is developed with React(redux), Angular, Vue, Polymer, Vanilla? Cypress does not need to know the framework. And no major application code changes for the tests to run
16. Demo
17. Features of Cypress
18. Time travelling Cypress takes snapshots as your tests run. Simply hover over commands in the Command Log to see exactly what happened at each step.
19. Real time reloads Cypress automatically reloads whenever you make changes to your tests. See commands execute in real time in your app.
20. Debuggability Stop guessing why your tests are failing. Debug directly from familiar tools like Chrome DevTools. Our readable errors and stack traces make debugging lightning fast.
21. Automatic waiting Never add waits or sleeps to your tests. Cypress automatically waits for commands and assertions before moving on. No more async hell.
22. Network traffic control - Easily control, stub, and test edge cases without involving your server. You can stub network traffic however you like. - Fixtures
23. Screenshots and videos - View screenshots taken automatically on failure, or videos of your entire test suite when run headlessly. - Screenshots using API
24. Selectors Playground
25. Environment Variables
26. Dashboard in Cypress
27. Comparisons - With cypress it will be less waits and sleeps or probably close to none. Cypress is growing so fast, we can hope it will be even more stable & better.
29. Thank you Shahjada Talukdar https://shahjada.me https://twitter.com/destro_mas
30. Questions and discussions