What’s up Guys! Welcome to automationcalling.com

Introduction

The purpose of this blog is to analyze and identify the list of the automation tools/node package manager available in the market to automate React, Angular JS, Vue.JS based UI framework. The idea is, instead of focus on Selenium or any legacy automation tool irrespective of open-source or license, it’s time to look at the modern JS framework or Non-Selenium based tool and give a try. The identified tools are purely based on the focus on JavaScript framework, and no intention of debating/proving Selenium, UFT, Ranorex or any other tool doesn’t support or not able to automate on modern UI framework.

Here are the following reason for not chosen Legacy Frameworks:

• Looking for a Non-Selenium based UI test framework (For this, Protractor and Webdriver IO are not qualified as they built wrapper on top of Webdriver).
• Looking for a tool that should be integrated with a combination of TDD and BDD.
• should be an end to end framework for UI test.
• Looking for the tools that will help developers to write functional tests in case QA Unavailability.
• How easily the UI test automation framework integrate part of the development repository.
• looking for the tool that supports Unit, Integration and e2e test.
• How flexible to integrate Visual Testing and Accessibility testing.
• One-Stop Solution for Developers and QA

Here are some Legacy Challenges

• Wait/Sync
  • For eg., Selenium library, we have to handle wait strategy like implicit or explicit, how about something handled/addressed by the JS library itself?
• Locator Strategy
  • Each tool has a specific locator strategy to handle, for eg., Shadow DOM, Virtual DOM in React JS, React Native Component, this is something hard to identify, how about something easy to use in JS Library?
• Driver Configuration
  • Download and configuring setup of browser drivers like Chrome, Firefox, Edge, Safari. How about this is something come by in-build?
• Writing Automation code in Java or Python using Selenium or any other tool is great for test automation and QA? Is it enough to cover only the UI Part? Does it support the Test Automation Pyramid for eg., One language with Unit, Integration, and e2e?
• Does the Current implementation of the Selenium Framework help to collaborate with the Development team? Are Dev, QA, and BA able to write Spec with one language to achieve TDD/BDD?
• Does the selenium automation library support backend call? No, it’s only for Browser automation, you need to include third-party library like Rest Assured, HTTP or Unirest to handle them

To address all these challenges, the following tools have been chosen for testing Modern UI Framework like Angular JS, React and Vue.JS.

• Cypress
• Test Cafe
• Puppeteer
• CodeCeptJS

NPM Trends:

NPM Trends in Last 6 Months:

NPM Statistics

Automation Tools and Comparison Matrix for Modern UI Framework

Note: Due to the current template issue, I’m not able to make it more visible, an option is either you zoom in the browser or refer the attached excel file JS_Tool_Comparison.

Conclusion

As mentioned in my title section, selecting the right tool based on what exactly is your requirement, each tool have some benefits and its own drawbacks. Although I listed the features and benefits of each tool, I personally recommend doing a POC for your application, which will get better output and clarity.

• In case you have a team that have less programming experience, please go ahead with CodeCeptJS, it’s quite easy. The amazing feature of CodeCeptJS is, you can write a wrapper script and switch to what tool you want.
• Cypress and Puppeteer is a good choice for React, Angular JS and Vue based framework and it’s a good option to support Unit, Integration and e2e test. Both tools don’t support Safari browser automation.
• Test Cafe is quite a good tool for cross-browser automation including the Safari browser. In case, if you want to cover a multi-browser with Parallel execution, I suggest to chose Test Cafe.