Cypress — End of Selenium Era
Web application have changed a lot over the last decade and so the way we test them have changed too. Lot of new web applications are build using the modern UI frameworks like React, Vue and angular. But automation engineers are still using decade old technology called Selenium which is quite complex and time consuming to do even very basic automation in today’s world.
Web has evolved, Development has evolved, hence the testing should too!
Testing is the final phrase of software development and usually application success depends on the testing overcome which should be delivered on time.
Why Cypress?
Cypress is build using JavaScript for end to end testing and most importantly doesn’t dependent on Selenium. It is build on Mocha and together asynchronous testing really fun and interactive.
Cypress can also be paired with any JavaScript testing framework and this flexibility helps us achieve far better testing which was not possible earlier using Selenium.
Some of the major advantages are:
🤖 Automatic waiting — Cypress is clever enough to know when to wait for an element, wait till all the animation in the page has loaded. Gone are the days were we have to specific waits for each DOM element in the UI thus making tests more reliable.
🔫 Dynamic Reloads — Whenever you are done making changes in the test file and save your file, Cypress automatically restarts the testing process behind the scenes with all the latest changes. Thus less manual work on daily basis.
🧩 API exposure — Since Cypress is running in the browser directly, it not only knows what the UI elements are but also the relevant API calls. Now that we know the API calls, we could also mock the API calls based on our needs.
⌚ Travel back in time — Cypress allows you to travel back in time and at each step allows you to see what happens before and after a particular step. This helps us save a lot of time in debugging and not running tests multiple times.
📸 Screenshots and Videos — Screenshots and videos of tests failures are automatically provided out of the box and we do not have to install any other plugins. This feature comes handy when running tests in CI/CD and knowing the failures without having to re-run them.
🏗️ Architecture — Several testing frameworks run outside the browser and execute remote commands to the browser but Cypress runs just like your application. So it behaves exactly just like your end users.
📚 Documentation — Cypress official documentation is really amazing and has every single feature listed out with proper examples, videos and explanations.
🦸♂️ Fast — Cypress is build directly inside the browser which makes it really fast comparing it with any other testing frameworks out there.
🛹 Shortcuts — Cypress allows you take shortcuts while automating your tests. You do not need to login to your application for every test, it gives you the ability to programmatically log in.
Reading through all the above advantages, must have got you excited on this new testing framework, So lets start installing it and run a quick sample test.
Installing Cypress
Lets start by creating a application from scratch
yarn initNow lets install cypress has a dev dependencies
yarn add cypress --devCypress is now installed ✅, it’s that simple!
To open cypress simple use the below command
npx cypress openCypress startup screen opens giving you some sample examples to start running and getting familiar with
Your First Cypress Test
Create a new file called cypressDemo.spec.js under cypress/integration with the following content
This simple test does is navigates to google.com and asserts that it landed in the google home page by checking the URL.
Cypress is super fast 🚀, the time to start, execute and stop the test is 0.41 seconds.
Conclusion
Hence, you could see how simple it is to setup a sample test which would have taken several minutes/hours if you would like to setup the same in selenium.
So could you imagine how much time you could save by switching from selenium to cypress for your organization.
