End-to-End Testing in Angular
Overview
Manual testing is insufficient to guarantee that our program is error-free. Unit tests are a great way to improve the quality of the application. That is also insufficient. This manual is prone to errors, it is simple to overlook scenarios or tests. End-to-end testing can therefore be introduced to help tackle this issue more completely.
Introduction to End-to-End Testing Process
The two basic types of testing are vertical testing and horizontal testing. The entire application is covered via horizontal e2e testing. It necessitates that software development teams adhere to established dedicated test environments and well-defined user procedures. The program is divided into smaller components so that you may test each one separately using vertical e2e testing. Vertical end-to-end tests often precede their horizontal counterparts because of this granularity. Both sorts assist you in achieving the same objective, but they each have unique benefits and drawbacks.
Horizontal End-to-End Testing
Horizontal End-to-End checks to see if the user can finish all workflows or not. It aids in finding any problems that impede users from using the software as intended.
Consider a web application for purchasing tickets, horizontal E2E testing could determine whether users should complete the following steps.
- User can register or login into the application
- Select a specific movie to watch
- Ought to pay a debt
- After payment has been made, a ticket should be booked.
Vertical End-to-End Testing
Vertical End-to-End testing is carried out in tiers of the application, which means that either a hierarchical or sequential order is used to carry out the tests. These are a combination of unit tests, integration tests, and user interface tests being run. It needs a testing or development strategy to support it.
Example :
Vertical E2E testing a whole application with individual submodule tests, such as
- A full set of UI tests
- Testing API Integration
- Unit tests
How to Perform End-to-End Testing?
Here, our main emphasis is on confirming customer journeys. Follow the steps below :
- Examine every detail of a user journey that needs to be thoroughly tested. Before starting, compile all edge cases, worse-case scenarios, and happy path situations.
- Create test environments by the analysis.
- Make a note of the appropriate responses for each case for the system.
- Construct every specification into a test.
- Start executing the test case code's required activities.
- Carry out the exam and record the outcomes.
Benefits of E2E Testing
Reduced Risks
With this deployment workflow mostly in place, any stage release of the application will be tested. Any issues with a specific functionality ought to have been found sooner.
Increased Confidence
Real user actions were taken into account when these tests were carried out while considering actual user activities. We would be more confident in making our release public if an issue were found early on.
Reduced Cost and Time
Pushing a buggy application into production doesn't demonstrate a positive user experience. And to fix the bug, we might need to apply a fix and set aside time for debugging. Having this additional layer of e2e testing security might cost us a lot of money and effort.
Difference between Unit & E2E Testing
| End-to-end Testing | Unit Testing |
|---|---|
| Emphasis on behavioral flow testing | Emphasis on Functional flow of the system. |
| It simultaneously tests the software system and all associated systems. | Software modules are individually tested during unit testing. |
| End-to-end testing is not cost efficient. | Unit testing is cost efficient. |
| End-to-end testing is performed at the end of testing processes. | Unit testing is performed at the beginning of the testing process. |
| Defects are identified easily | Defects are not identified easily |
| Tests complete flow or scenario | Tests independent / small modules |
| Awareness about downstream/upstream systems is needed. | Knowledge of dependent systems is not needed. |
| Comparatively less execution speed than unit testing. | Execution speed is faster compared to End-to-end testing. |
| More efforts and thought to maintain. | Less effort and easy to maintain. |
| End-to-end tests are black-box. | Unit tests are white-box. |
| Real test environment is needed to perform End-to-end tests. | Any isolated environment is used for performing unit tests. |
| Sequential execution required. | parallel execution can be done. |
End-to-End Testing Frameworks
The system is built around user flows, often known as the customer-user journey. A set of e2e tests is written to validate these CUJs. End-to-end testing frameworks are used to ensure that all the moving parts of an application are configured correctly. Some of the more well-known ones are listed below :
Protractor
In the e2e test world, multiple frameworks are written on top of selenium. WebDriverJS is one of the JS implementations over selenium. Protractor is a WebDriverJS wrapper that offers some more tools for testing Angular applications. The Protractor tests execution flow is shown in the following figure.
End-to-end test scripts are typically written using the Jasmine framework. Launching Protractor offers Jasmine control over running your tests (using Mocha / Cucumber). Based on the actions defined in Jasmine's tests, Protractor uses WebDriverJS to send the proper commands to the Selenium Server.
Protractor provides Selenium Server commands via WebDriverJS, and the latter controls the browser as needed using vendor-specific browser drivers.
Note :
- It's crucial to keep in mind that your tests are running inside a Node.js process (Protractor) while the Angular application runs on a browser. The tests and the Angular application interact using Selenium Standalone Server and the WebDriver protocol.
- It is not recommended to use Protractor for brand-new projects; it is going to be deprecated by the end of 2022.
Cypress
Another well-liked E2E testing framework, i.e. effective for apps created using other frameworks, such as Angular, React, Vue, etc., is Cypress. Cypress tests can be written in vanilla Javascript, making it very simple to debug and execute tests. Cypress enables you to run tests, make changes, and see those changes reflected in real time, which boosts the end-to-test development.
Benefits of End-to-End Testing
We will try to understand the benefits of End-to-End testing point by point.
-
Reduced Risks :
End-to-end testing includes testing the application at the conclusion of each software development cycle. The likelihood of dangers in the future is greatly decreased as an outcome. -
Increased Confidence :
Each layer of the application is extensively tested for functionality and performance. The fact that this testing is conducted from the viewpoint of the user boosts the application's readiness for public release. -
Reduced Cost and Time :
This indicates that the application won't need to go through additional testing since it has already been completely tested from beginning to end. This helps to increase efficiency in other operations and considerably lowers the costs and time software development cycle.
E2E Testing Using Protractor with Example
Suppose we need to check the loaded page title is correct.
E2E Testing Using Cypress with Example
The same page title check can be done in Cypress.
Conclusion
- End-to-end testing emphasizes more functional flow.
- It can help to find out issues before public release.
- Protractor, Cypress, Playwright, etc. tools can be used for e2e testing
- Protractor tools are not recommended to use (deprecating soon by the end of 2022).
- Cypress is quite an easy and newer way to perform e2e testing.