Complete Guide to End-to-End (E2E) Testing with Cypress: Enhance the Quality of Your Web Applications

Introduction:

There are several types of tests used in software development to ensure the quality of the final product. Among them are unit tests, integration tests, static tests, and end-to-end tests.

• End-to-End Tests (E2E): This test verifies the entire flow of an application from start to finish, simulating user behavior in a real scenario.
• Integration Tests: They verify the interaction and communication between different components and modules of an application.
• Unit Tests: They test individual units of code, such as functions or methods, in isolation from the rest of the application.
• Static Tests: They review the source code for errors and vulnerabilities without executing the program, through code reviews and static analysis.

In the application development phase, one of the fundamental practices to ensure software quality is testing. Among the different types of testing, End-to-End Testing (E2E) stands out for simulating real user behavior when interacting with the application. In this article, we will explore what E2E testing is, how it works, and how it can benefit application development.

For several years now, the Cypress library has been available. It is one of the most popular tools for performing this type of testing because it allows it to be done with the Chrome browser, which is widely used by developers and is known for being fast and secure.

What is End-to-End Testing (E2E)?

The distinctive feature of E2E testing is that it focuses on the functionality of the application from a global perspective, without worrying about the internal details of its implementation. It is not about testing individual functions or methods, as in Unit Testing, nor about verifying the integration between specific components, as in Integration Testing. Instead, E2E Testing concentrates on the final outcome, ensuring that all components work together effectively to meet user requirements and expectations.

The process of an End-to-End test involves simulating typical user actions, such as clicking buttons, filling out forms, navigating through different pages, or interacting with interface elements. These tests are run in an environment similar to that of a real user, using a web browser or graphical interface, and may involve interactions with databases, web services, and other external systems.

The main goal of E2E Testing is to ensure that the application works correctly in all its parts and that the different functionalities integrate smoothly. Additionally, these tests can also help identify potential performance, usability, and accessibility issues.

While E2E testing is essential to guarantee the quality and proper functioning of an application, it can also be more complex and take more time to set up and execute compared to other more focused types of tests. However, its importance lies in its ability to provide a global view of the product, allowing developers and quality teams to detect problems and ensure the application meets the needs of end users.

Advantages of E2E Testing in Cypress

• Time Travel: Cypress has a "Time Travel" feature that allows developers to see each step of the test as it runs. This unique feature facilitates debugging and test analysis, as developers can see exactly what is happening at every moment. They can inspect the state of the application at any point during the test execution, which simplifies error identification and understanding issues in the application.

• Debuggability: Cypress is easy to debug. It offers a visual interface that allows developers to examine the state of the application, variable values, and other important details. This facilitates problem identification and resolution, improving efficiency and productivity in development.

• Real time reloads: One of Cypress's most notable features is its real-time reload functionality. Whenever changes are made to the test or application code, Cypress automatically reruns the affected tests immediately. This allows developers to get instant feedback on the changes made and verify if they introduced any errors in the application.

• Automatic waiting: Built-in "automatic waiting," meaning it is not necessary to add explicit pauses or waits in the test to wait for page elements to load or actions to complete. Cypress automatically detects when an action is waiting for a response from the application and waits until elements are available and tasks are completed before continuing with the test. This prevents common issues with unstable tests and simplifies writing more robust and reliable tests.

Creating an E2E Test with Cypress

This document presents a practical example of how to create an E2E test using the Cypress tool. It shows how to set up the test environment, write the test, and run it to verify the functionality of a specific feature of the application.

1. To install Cypress in our project, we can use either yarn or npm. In this case, we will use npm throughout the process.

2. Before opening the project, we need to configure the scripts in our package.json, where we will add:

"scripts": {
		//...other scripts
		"cypress:open": "cypress open"
	},

⚠️If the scripts are not added, the project must be run with a longer command

3. To run the project, we need to execute the “open mode” which is the following command in the console:

A window will open, similar to the one shown in the image. It will allow configuring the e2e testing and will display the project we are working on and its current version.

4. After that, the browser will ask us to select where we want to run our project with E2E tests. From there, we can start seeing our tests in the folder where we placed them.

5. A Chrome browser window will open to run the tests in Cypress. The image shows the "cypress/e2e" folder where the projects are saved. In this case, there are three subfolders with code to run the tests.

At this same step, an example that comes integrated in Cypress will be presented. It shows that the tests passed successfully. If they had failed, it would indicate where the failure occurred.

We also have the "run mode" in which the test statuses are shown in the console. To run the tests in headless mode (in the command line), use the following command

Code examples

To be able to run Cypress e2e testing, some code will be briefly explained and it is for an app running locally; the code can be modified as desired.

Describe in Cypress is used to group a set of related tests within the same scope. It provides a way to organize tests and group them according to their functionality or specific area of the application they are testing.

BeforeEach is a block of code that runs before each test (or test case). In this particular case, it is used to only do the login once within the test code.

⚠️ The example given is the same code, but divided into two parts to better explain what each does.

Part 1:

// cypress/e2e/example.cy.tsx

describe('Login', () => {
beforeEach(() => {
		cy.visit('http://localhost:3000');
		cy.get('.btn-password').click();
		cy.get('.email').type('example@kranio.cl');
		cy.get('.password').type('ASdf1234');
		cy.get('.login-button').click();
});
//...it
//...it
});

⚠️ As a good practice, it is better to set a baseUrl and then call visit like this

📌 You can also directly search for the type of element you want in the DOM. For example:

For more information about the usability of "get", check https://docs.cypress.io/api/commands/get

Part 2:

it('Enter a number in the input and press search', () => {
		cy.origin('http://localhost:3000', () => {
			cy.contains('Accept').click();
				cy.get('Input[placeHolder="Container number"]').type('1234567');
				cy.get('button[type="submit"]').contains('Search').click();
		});
	});

Summarizing what the code does:

• First, it provides an overview of what the code will do. Then, in the cy.origin('<http://localhost:3000>'..) section, it ensures that the page we are viewing is localhost:3000.
• Next, it looks for a button that says "accept". In this example, it was an alert modal containing this button.
• Then, it shows that a container number is entered in an input and the search button is pressed, both found by their placeholder and type.

💡 cy.contains This command allows finding elements that contain specific text and then performing actions on them, such as clicking, typing in them, or verifying their presence.

💡 cy.get This command can be used to find elements by their selector (such as IDs, classes, tags, etc.) and then perform various actions on those elements, like clicking, typing in input fields, or verifying their properties.

Part 3:

it('Statistics are visible', () => {
		cy.origin('http://localhost:3000', () => {
			const totalContainerValue = 10; 
			const totalOsValue = 30;
			const totalPiecesValue = 20;

			cy.contains('Accept').click();
			cy.get('h3').should('be.visible'); 
			cy.get('h6').should('be.visible'); 

			cy.get('h6:contains("Total containers")').should('be.visible');
			cy.get('h6:contains("Total OS")').should('be.visible');
			cy.get('h6:contains("Total Pieces")').should('be.visible');

			cy.get(`h3:contains(${totalContainerValue})`).should('be.visible');
			cy.get(`h3:contains(${totalOsValue})`).should('be.visible');
			cy.get(`h3:contains(${totalPiecesValue})`).should('be.visible');

		});
	});

💡.should('be.visible') this line of code is used to ensure that certain elements on the page are visible as intended.

Summarizing what the code does:

• The props of the component we are testing were passed to this code. The data in them is the same as what the user sees. To verify this, we must first accept the alert modal and check if the h3 and h6 elements are on our webpage. Then, we can verify if the texts are also present.

.skip to be able to pause one or more specific tests. .

only only this test will run, and all other tests in that test file will be ignored.

✅For more information about Cypress E2E

Conclusion: To summarize the article, End-to-End (E2E) testing is a fundamental practice in software development to ensure the quality and proper functioning of an application from the end user's perspective. Unlike other tests that focus on individual components or their interaction, E2E testing verifies the complete flow of the application, simulating the actions of a real user.

Ready to improve the quality of your web applications with effective E2E testing?

At Kranio, we have testing experts who will help you implement End-to-End testing strategies using tools like Cypress, ensuring your applications work correctly in all scenarios. Contact us and discover how we can help you elevate the quality of your software.