Evolution of Testing

In the past two decades, testing has changed its flavor along with the development of the web. During the initial years of the web and availability of the internet, testing was limited only to the user interface with very few resolutions and a limited number of browsers. Eventually, we started to see more browsers, availability of different device sizes like laptops, LCD and LED screens, mac books so on so forth. With all these changes on one side and on the other hand with the availability of APIs, UI frameworks like Angular and React, Vue, coming into the picture, converting legacy pages to responsive apps and pages. Testing has been so crucial at every stage of the growth of the web. A quality engineer has had to transform from manual testing to automation. UI testing to API testing to Visual testing to A/X testing to A/B testing etcetera. In this article, I would like to take the readers through the automation frameworks that started alongside web development including the latest one’s.

Selenium

Selenium is the first generation automation tool that came into the picture. During the initial stages, it seemed to be a browser extension for recording the tests. But the later parts of it looked more like a web development framework structure. That required quality engineers to learn programming with any of the programming languages like JAVA, .NET, PYTHON, C, or other languages that selenium had supported. Also, this was the first phase of transition to frameworks for web or UI test engineers. This purely supported the UI testing. However, now it has capabilities that support beyond UI. Here is my other article on web driver and how web driver works for more information on web driver and selenium.

More on Selenium: https://www.selenium.dev/

Protractor

This was my favorite automation framework among the web driver-based frameworks. Protractor has become popular with the spike in the usage of Angular for web application development. Protractor made waits easy. Unlike selenium, protractor gave default waits within the tool(waitForAngular()). waitForAngular method will instruct the web driver to wait until Angular has finished rendering and has no outstanding $http or $timeout calls before continuing. Protractor automatically applies this command before every WebDriver action

Anyone who has worked or used selenium will for sure love protractor. The commands are pretty simple and sound the same as selenium. Instead of driver browser” is used for protractor. During this phase add-on frameworks like BDD, Cucumber, Gherkin, Chai, Mocha came into the limelight.

More on Protractor: https://www.protractortest.org/#/

Cypress

Finally, there is something that is brand new. And, what’s new in it? We never need to know what is a web driver, what is selenium? what is protractor? what is TestNg? what command is used to enter information in the input field?

100% BRAND NEW

So what is cypress? cypress.io says

“Cypress is a next-generation front-end testing tool built for the modern web. We address the key pain points developers and QA engineers face when testing modern applications

Our mission is to build a thriving, open-source ecosystem that enhances productivity, makes testing an enjoyable experience, and generates developer happiness. We hold ourselves accountable to champion a testing process that actually works.

What is special with cypress?

→ Cypress does not need a server to start and to run the test. npx cypress open and npx cypress run are two simple commands to open and run the tests.

→ Cypress does not need to call multiple APIs to run the test. The tests are run in our own browser. Yes, it is true.

→ We neither don’t need to understand rocket science nor we don’t need to guess to understand the errors and test failures. Debugging is easy, human-friendly error messages.

→ Almost, no waits are needed. Never add waits or sleeps to your tests. Cypress automatically waits for commands and assertions before moving on.

How Fast is Cypress?

100x times fast when compared to any other available frameworks in the market.

How good is the documentation?

Every method and functionality we want to use has details in the documentation. And, how clear is the documentation? 100% crystal clear. Cypress doesn’t just provide documentation. It provides suggestions based on the kind of test or the component we want to test with the best approach Example?

Example :

What are the different types of test cypress will support?

  1. End to End
  2. Component
  3. API
  4. Visual Testing with Addon’s

This is the list of 1% of the advantages that cypress provides. 99% of the total advantages and practices can be found at

Also, there are some others out there Like Jest, webdriver.io, jasmine being used by some organizations.

Key Takeaway's

  1. Selenium IDE was a browser extension
  2. Later Selenium web driver and Grid gave full-fledge ability to write and run automation scripts
  3. Based on web driver, Protractor for Angular apps was built
  4. Jest for React-based applications
  5. Cypress for everything