Protractor End of Support, Future of Angular E2E, Best Alternative Tools

Many angular and react project is running on Protractor Testing Framework, however, Protractor has recently announced the end of support 2022. Also, there are many users who want to explore Cypress End to End Test Automation Framework, This article explains and answers the most common question while exploring Cypress Test Automation Framework. 

The Protractor is dying!!! Google announced the protractor end of support/development. 'The Angular team plans to end development of Protractor at the end of 2022 (in conjunction with Angular v15).' So protractor users left with no other option than to migrate their test cases Since Protractor announced the end of life now everyone has only one question, What is the best alternative to the protractor end-to-end testing? Can Cypress Automation tool replace the Protractor or should we consider other tools?

In this article we have tried to answer the most asked question:

• What is Cypress?
• What are the bundles/tools in Cypress which help assertions and run tests?
• What are the pros and cons of Cypress?
• Migrating Protractor, WebdriverIO to Cypress.
• Should I switch to Cypress?

What is Cypress?

Cypress is built on Node.js, Cypress is an open-source Javascript/Typescript framework that enables unit testing, integration testing, and end-to-end testing. Unlike Protractor or WebdriverIO, Cypress runs on its own browser so we can expect fewer failures. Cypress doesn't use web drivers like ChromeDriver, GeckoDriver, etc. to run the tests. Most of the assertions, coding can be done using in-built Cypress commands however Cypress allows you to write jQuery methods for UI components identification, event handling, CSS animation, and Ajax. Cypress empowers testers with the ability to perform Test-Driven Development (TDD) with complete end-to-end testing. Cypress is developed with the intent to make development and testing a parallel process.

What are the Bundles/Tools in Cypress Which Help Assertions and Run Tests?

Cypress has inbuilt support for Mocha, Chai, Chai-jQuery, Sinon.JS, Sinon-Chai, which enables you to write tests in a simple way just by using describe(), it() blocks.

One of the most common questions we get is does Cypress support Cucumber?

The answer is yes and no both. The reason is cypress by default doesn't support cucumber it doesn't maintain cucumber preprocessors but it can be achieved through third-party libraries using npm.

Note: Since Cypress doesn't provide native support for Cucumber unless and until it's very much concern or needed we should avoid using third-party libraries. Third-party libraries are built by someone we are unsure how long they are going to maintain.

What Are the Pros and Cons of Cypress?

Advantages of Cypress:

1. The easy framework set up: Setting up a cypress is easy, one just has to install Cypress and few npm packages and the framework is ready.
2. Screen captures: Cypress captures screenshots after each step it allows QE/Developers to know what happened in each step.
3. No explicit and implicit wait: Cypress waits automatically for commands and assertions. 
4. Auto scrolling option: Cypress automatically scrolls to the view before performing any actions.
5. Visual Feedback: Cypress provides a snapshot and video-based feedbacks that helps to understand why and where tests are failing without digging into actual code blocks.
6. Logs: The Cypress shows the command logs as soon as they are executed.
7. Spies, stubs, and clocks: Verify and control the behavior of functions, server responses, or timers.
8. Cross-browser Testing: Cypress supports many browsers: Firefox, Chrome, Edge, Electron, etc.
9. Consistent Results: Since Cypress uses its built-in browsers it's a bit faster and consistent compared to other frameworks.
10. Cypress supports different types of testing: Cypress supports Unit, Integration, End to end, and API testing.
11. Plugin support: Cypress also supports a large number of plugins many are available on the npm repository one can install, configure and use it.
12. Headless browser execution: Cypress supports headless browser execution support.

Disadvantages of Cypress:

1. Cypress doesn't support multi-tab actions: Cypress opens one window for executions any new tabs and bowser pop-up simulations are not allowed. However, this can be achieved through few lines of code by removing the target= _blank attribute.
2. One cannot use Cypress to drive two browsers at the same time: Cypress does not support controlling more than 1 open browser at a time. At a point in time, you can execute tests with only one browser and it will be never be supported as per Cypress documentation.
3. Browser Support: Cypress doesn't support the Safari browser at this moment.
4. Hover Command: Cypress doesn't support hover actions, you need to rely on a workaround for this.
5. Cookie clearing in Each test: Cypress clears cookies after the execution of each test, so if you are writing end-to-end tests you need to log in multiple times in the application. If you need to avoid this situation you need to configure cookies using cypress commands to not clear cookies.
6. Automatic waits: Cypress automatically waits for the page to load or animation to complete but it doesn't work always. If you have a hybrid framework (MVC, SPA) you are likely to face this issue, however, Cypress provides a way to overcome it.
7. IFrame Support: No full-fledged iframe support in Cypress, however, it states that currently on the road map.
8. XPath Support: No built-in XPath support in Cypress. If you want to use XPath you need to rely on downloading XPath libraries.
9. Community Support: Cypress provides considerably good documentation but when it comes to community support we are seeing average support, even in Git repo, StackOverflow there are many unanswered questions although it's popular.

Migrating From Protractor to Cypress

There is no quick and easy solution to migrate from Protractor to Cypress. The syntax looks similar, but internal working is different in both frameworks, so you can't just migrate with Cypress framework just by making few changes. There is no readymade tool to migrate tests from Protractor to Cypress. Protractor has announced the end of support 2022 recently, so those who are looking for migration of tests then need to create a Cypress framework and take care of migration manually.

Cypress has listed a Migration Guide on the official site, when you read it looks very simple to migrate from protractor to Cypress but practically it's difficult and time-consuming. So our advice is not to wait until 2022 to start your migration process today.

Should I Switch to Cypress? Is Cypress the Only Option?

This is the common question that mostly comes into mind for Protractor users: since the Protractor framework is no longer maintained or supported, which alternative should we choose? The simple answer is it depends on your organization and requirements. There are many tools available in the market such as WebdriverIO, TestCafe, Playwright, etc. Microsoft's Playwright is a new kid for the automation world, however, as of today it's not mature enough to handle large test suites and lacks frequent up-gradation of dependencies. 

So, if anyone wants to switch to Cypress ensure that you are aware of Cypress's Trade-offs and do not forget to explore other tools and carry out POC as per your organization's requirement. Just because one tool is booming doesn't mean you have to stick to that.

Just because Cypress is popular, it doesn't mean that it will fit each and every organization or project. Like any other tool, Cypress also has its own pros and cons. There are many other frameworks similar to Cypress which you can consider for Proof of Concept.

Frameworks that are worth exploring:

1. WebdriverIO: Selenium-based web testing framework.
2. TestCafe: An end-to-end testing tool with easy setup and built-in typescript integration.
3. Selenium Javascript: Pure vanilla flavor of Selenium JavaScript version.
4. Playwright: Microsoft's new open-source testing framework.

Encourage me to write more articles, buy a coffee for me.

If you are looking for any help, support, guidance contact me on LinkedIn|https://www.linkedin.com/in/ganeshsirsi