Background First

When it comes to automate any front end applications, most of us are well aware about Selenium that can almost automate anything that is the part of browser or to simply put it as tool that can be used to automate any front end applications by far.

That being said, since its an open source tool, it has vast audiences and why should it not? It has great documentation and support for multiple languages through bindings. But, really selenium an open source option to automate modern applications? Certainly not!

As we are modernising the way we build front end application so is the need to modernise how we can automate those. Let's Discuss one of that

Jump a step forward

To understand it bitmore, we need to understand how selenium works and why its not best tool to automate modern applications.

Selenium Architecture mainly has 4 components to it:

• Client Library - Code written in different language [Java,Python,Ruby,etc,]
• JSON Wire Protocol - Primarily responsible for transfer of data between HTTP servers
• Browser Drivers - Browser drivers interact with its respective browsers and execute the commands by interpreting Json which they received from the JSON Wire Protocol
• Browser - Where the execution happens

Now that selenium makes use of protocol to communicate to browser and that is not real browser but controlled by drivers. This makes the execution slow and flaky sometimes.

But wait..Do we have something new which does not share same architecture and achieve more?

Yes,We Do, In fact there are more than one, but I will cover only the one which is more promising and actively used today!

Cypress

Cypress, a modern framework that enable us to write faster, easier and more reliable tests.

Cypress consists of a free, open source, locally installed Test Runner and a Dashboard Service for recording your tests.

• First: Cypress helps you to start writing tests for every day while you build your application locally. TDD at its best!
• Later: After building up a suite of tests and integrating Cypress with your CI Provider, it's Dashboard Service can record your test runs. You can always check why did this fail?

Cypress is both fundamentally and architecturally different from Selenium. Few features of Cypress that Impressed me are:

- Easy to setup and write tests. 🙈
- Automatic wait handling for web elements. 🤩 
- Execution happens on real browser, that means no Driver binaries required anymore. 😎  
- Native Access to all application object. 👍 
- You can edit the changes and check the results dynamically. 😮
- In built test runner that works like charm 😊 
- Dashboard support for detailing and report 👌
- Support for Typescript , BDD and TDD style testing. 😁
- Less Flakiness in test as it has automatic waiting fo objects. 💁
- Simplest way to debug in detail for errors. 😅
- No need to implement screen capture separately. 👏
- Actively maintained and most active community to help. 😇
- and the list goes on ...❤️

Cypress is just a command away to install and start running its pre built tests. You can simply use npm i cypress --s-d to get started.

Make sure that you have already run npm init or have a node_modules folder or package.json file in the root of your project to ensure cypress is installed in the correct directory.

I will be covering the setup and writing tests in more detail in my next post.

But Sachin, If Cypress is so cool 😎 then why everyone is not using it much? Well 😊,like every coin has two sides, this one too has no exception here, it depends on p2p.

Downside

While it may seem a kind of restriction but it even makes more sense when we start realising its good to have some.

• Cypress is designed for end-to-end tests of front end apps nothing more, nothing less
• Its not the tool for web indexing, performance tests , scraping the websites,etc.
• Since, It runs inside the browser, it will always support browser language i.e; Javascript, which makes it a little bit harder to communicate with the back end - like your server or database
• It cannot work in multiple tabs ,multiple browser window
• It's restricted to same origin.[Two URLs have same origin if the protocol, port (if specified), and host are the same for both]

There are some temporary trade-offs too but this will be worked upon as per the roadmap plan for Cypress.

You can check their official list of feature from here

Debate

While its really interesting to debate on what is best and what is not, Its purely based on project to project requirements.

My two cents here are:

• If your applications is already built using selenium based framework and things are working for you , then you don't really need to switch to any other modern tools,ASAP. But eventually, you should!
• If you are trying to build a new from scratch then a POC on Cypress will be worth to do and understand its outcomes.

Lastly,Thanks for reading out this post, do let me know your opinion on comment section below I will be happy to answer you. Keep learning😄