Mastering Web Automation Testing with Cypress | Part 1: A Guide for Software Engineers

Introduction

In the world of web development, ensuring the reliability and performance of web applications is fundamental. Automated testing emerges as a cornerstone in this process, offering a systematic approach to validate the functionality, usability, and security of web systems without the extensive time and effort required for manual testing. By automating repetitive tasks, developers can not only identify defects early but also enhance the quality of their software products, leading to more stable releases and satisfied users.

Among several tools available for automated testing, Cypress has carved out a notable niche for itself. It has gained popularity in the software development community due to its user-friendly interface, automation capabilities, and robust features.

Join us in this 3-part article series where we will discuss 3 of the key aspects to mastering web automation testing with Cypress.

Cypress was created in 2014 as an alternative to Selenium and other existing front-end testing tools at the time. Since then, the tool has gone through several iterations and updates, becoming a popular choice for developers seeking a more modern and efficient approach to web application testing. Unlike traditional testing frameworks that operate outside the browser, Cypress runs directly inside the browser. This unique approach allows it to deliver more consistent results and interact with elements in the same way that users do.

Understanding Cypress

Cypress is an end-to-end automated testing framework that uses the JavaScript/Typescript language and runs on several browsers, such as Chrome, Firefox, and Edge, among others.

With Cypress, it is possible to automate testing of any application that can be accessed via a browser, be it a REST API, a website, a web application, or a system.

Key Features that Distinguish Cypress from Other Testing Frameworks

1. Real-Time Reloads: Cypress offers a real-time reload feature that automatically reruns tests as you modify them, providing instant feedback. This feature significantly speeds up the development and testing cycle.
2. Direct Access to Native Elements: Unlike Selenium and other testing frameworks that use remote commands, Cypress operates directly within the browser. This direct access allows it to work synchronously with elements, reducing the chances of encountering timing issues.
3. Automatic Waiting: Cypress automatically waits for commands and assertions before moving on. There’s no need to define explicit waits or sleeps in your tests, making the tests more readable and less flaky.
4. Network Traffic Control: Cypress can control and monitor all the network traffic coming in and out of the browser, allowing for easy stubbing and testing of network failures without involving the server.
5. Consistent Results: By running in the browser and alongside the application, Cypress provides more consistent results, closely mimicking what users would experience.

On the left side, we can see the execution of the tests, showing all the steps and validations.

On the right side, we can see the automation execution in real-time, it is also possible to capture the elements on this page.

Overview of the Cypress Architecture and How It Operates Directly in the Browser

Cypress’s architecture is fundamentally different from that of other testing tools. Operating directly within the browser allows it to execute commands in the context of the application it is testing. This design eliminates the need for a Selenium or WebDriver server, sidestepping the complexities and instabilities associated with remote control.

When a test runs, Cypress works within the browser’s native event loop, capable of listening to and modifying the behavior of the browser and the network layer in real time. It uses a bundled Electron browser by default but can also run tests in full versions of Chrome, Firefox, and Edge, which are crucial for cross-browser testing. This direct interaction with the browser not only ensures that Cypress tests are as close as possible to how an end-user would interact with an application but also provides the power to intercept and alter network requests and responses, manipulate DOM elements directly, and maintain state across tests.

Cypress Architecture

Setting Up Your Environment for Cypress

Setting up Cypress in your development environment is straightforward, allowing you to start writing tests in no time. Below is a step-by-step guide, details on required dependencies, and some helpful tips on integrating Cypress with popular web development frameworks.

Step-by-step Guide on Setting Up Cypress

1. Install Node.js: Before installing Cypress, ensure that you have Node.js installed on your machine. Cypress requires Node.js version 12 or above.
2. Installing Cypress via npm:

• Open your terminal or command prompt.
• Navigate to your project directory.
• Run the following command to install Cypress as a dev dependency.
• npm install cypress — save-dev
• This command will download Cypress and add it to your project’s node_modules directory, along with its binary

3. Opening Cypress:

• After installation, you can open Cypress by running
• npx cypress open
• This command launches the Cypress Test Runner, which is a graphical user interface that allows you to run your tests and view results

Cypress Test Runner with a list of all tests split by test scenarios

4. Create Your First Test:

• Cypress automatically creates an e2e folder in your project directory when you open it for the first time. Inside, you will see the spec file with a test sample: spec.cy.js
• Create a new file named sample_spec.js in the cypress/integration folder and add your tests.

Required Dependencies and Initial Configuration

• Node.js and npm: As mentioned, ensure you have the latest version of Node.js and npm installed.
• package.json: Cypress should be added to your project’s package.json file. This ensures that anyone working with the project can install all necessary dependencies using just the npm install command. And it’s possible to add some scripts to be used to start the Cypress Test Runner with cy:open. Cypress can be easily integrated into CI/CD pipelines, just configure your CI server to run npm run cy:run to execute tests headlessly

• cypress.env.json: Cypress looks for a configuration file named cypress.env.json in your project’s root directory. You can specify various configuration options here, such as the base URL for your tests, default timeout periods, and custom test file locations.

By following these steps and considerations, you can successfully set up Cypress in your development environment, allowing you to focus on writing meaningful tests that enhance your application’s quality and reliability.

Conclusion:

Cypress revolutionizes web system automation with its efficient and user-friendly testing framework, directly interacting within the browser for more accurate and reliable results. Key advantages include faster test execution due to real-time reloads and automatic waiting, reduced test flakiness thanks to direct access to native elements, simplified debugging processes, and a superior developer experience.

Call to Action:

Embrace Cypress in your next project to leverage these benefits and elevate the quality of your web applications. Dive into its comprehensive documentation, engage with the community, and utilize its plugins to fully exploit this powerful tool. By incorporating Cypress, you position yourself at the forefront of efficient and effective web development, delivering products that stand out in the competitive digital landscape.