Downloaded 54 times
More Related Content
Similar to Why you should switch to Cypress for modern web testing?
Why you should switch to Cypress for modern web testing?
- 1. Cypress - JavaScript unittesting tool Testing the way it should be... - Shivam BharadwajJune 07, 2018
- 2. Agenda ★ TheProblem ★ Why Cypress? ★ Cypress Vs Selenium ★ Installing Cypress ★ Unit testing in Cypress ★ Live Demo ★ Stubbing and Mocking ★ Live Demo ★ Takeaways 2Shivam Bharadwaj
- 3. The Problem Modern Web?(react/vue/p5) Another testing tool, Why? 3
- 4. Why Cypress? ➔ JavaScripttesting tool ➔ Free and open source ➔ Easy Control of response bodies, status and headers ➔ Fast, <20 ms response time ➔ Built on top of Mocha and Chai ➔ Ability to choose whether to stub responses or allow them to actually hit your server ➔ Active community on GitHub, Gitter and stackoverflow ➔ Rich documentation ➔ Auto Reload, act as real user ➔ Commands automatically retries assertions ➔ Helps you finding locator - Test your code, not your patience 4
- 5. What sets Cypress apart? ★Time travel ★ Real time reloads ★ Automatic waiting ★ Spies, stubs, and clocks ★ Network traffic control ★ Screenshots and videos ★ Runs directly in browser ★ Debugging (hover) ★ Helpful error messages ★ First visibility actions ★ Testing of responsive web apps 5
- 6.
- 7. Cypress Vs Selenium ➢No configuration needed with Cypress ➢ Cypress only supports Chrome and Electron (FireFox support is on its way) ➢ Selenium WebDriver runs remotely outside the browser, Cypress is the exact opposite, it runs inside the browser ➢ Cypress only supports jQuery selectors (CSS selectors) ➢ Cypress is super fast than selenium and it records video as well ➢ Cypress is commercial company and, not sure they will keep their open source promise ➢ Running Cypress in Continuous Integration is the same as running it locally The web has evolved. Finally, testing has too 7
- 8. npm init npm installcypress --save-dev Installing Cypress *You should have node.js installed 8
- 9. 1 Inatalling Cypress List anyresearch or data you have to support the need for a solution. 9
- 10. Folder Structure Like mavenprojects in Java, Cypress also exhibits its own structure /cypress /fixtures - example.json /integration - example_spec.js /plugins - index.js /support - commands.js - index.js 10
- 11. Writing and Running Test Thetest interface borrowed from Mocha provides describe(), context(), it() and specify(). context() is identical to describe() and specify() is identical to it() 11
- 12. 12 I am beingused by?
- 13.
- 14.
- 15. Mocking = Imitation,Fake ● Mocking is creating objects that simulates the behaviour of real objects ● A dummy implementation of your object ● Sinon is famous JavaScript mocking library that provides mocks, stubs, and spies 15
- 16. Stubbing = ASmall Piece ● Stubbing means replacing a method, function or an entire object with a version that produces hard-coded responses ● Dummy objects that exhibits properties of real objects ● The stub implements just enough behaviour to allow the object under test to execute the test ● Real time examples - ○ James Bond ○ Module Dependency 16
- 17. Stubbing with Cypress ❏cy.fixture() ● Load a fixed set of data ❏ cy.server() ● Start a server to begin routing responses ❏ cy.route() ● manages the behavior of network requests cy.route('GET', /sessions/, '@sessionsJson'); 17
- 18.
- 19.
- 20.
- 21. Takeaways It provides verygood features to enable you to create integration tests. Experienced with the problems related to Selenium we @Frontline decided to switch our tactics and use Cypress as our primary E2E tool. It works as expected and makes our lives a lot easier. I have used Cypress way too little to like it very much and think this is the tool we required. In any way do try Cypress. 21
- 22. Questions? References ● https://www.cypress.io/ ● DemoVideo Creating First Project ● https://gorrion.io/blog/getting- started-with-cypress-io/ @its_ShivamB Thank You!! 22Shivam Bharadwaj