Getting started with Cypress: a modern E2E testing framework

Many of our projects include web applications here at Osedea, and so of course we’ve leveraged various End-to-End (E2E) testing frameworks in our work. Cypress is a modern, JavaScript-based testing framework designed to make E2E testing of web applications simple, reliable, and fast. Unlike traditional testing tools, Cypress runs directly inside the browser, giving it unique insight into how applications behave. In this post, we’ll explore what Cypress is, why you might want to use it, and how to configure it for your projects.

What is Cypress?

As already mentioned, Cypress is an E2E testing framework primarily focused on testing web applications. Its primary strength lies in its ability to execute tests in a real browser environment, which provides developers with an accurate representation of how users interact with their application. This makes it an excellent choice for testing React, Angular, Vue, and other modern frameworks. Its tight integration with the browser allows developers to write tests that are both intuitive and highly reliable.

Configuring Cypress

Cypress runs as a JavaScript application through npm, which makes it highly customizable and extendable. It comes with powerful built-in tools, but you can also easily integrate various libraries and tools to enhance your testing experience. Here’s a quick rundown of some common tools that we’ve used:

• Executing Database Queries and Scripts: pg-promise is an example library you can use for interacting with Postgres databases during tests.  Other JS libraries also exist for other popular DBs.
• Backend API Calls: Cypress provides built-in support for making requests to your backend with Cypress requests and Cypress promises.
• Mocking Routes: You can use Cypress fixtures to mock API responses and test edge cases without relying on a live server.
• Creating Dummy Test Data: Regular JavaScript files can be used to create mock data for testing.
• Test Reporters: You can use built-in reporters like Mochawesome, jUnit XML, or even create your own custom reporter for tailored results.
• Dedicated Testing Environment: Create a separate testing environment (e.g., "ATest Dev") to run your tests without affecting production.

Why use Cypress?

There are several compelling reasons to integrate Cypress into your testing pipeline:

1. Seamless CI/CD Integration: Cypress integrates well with CI/CD tools given its headless CLI execution functionality, enabling automated testing as part of your development pipeline.

2. CLI Execution with Headless Browser: Cypress can be run from the command line in a headless mode which is always a plus for the developer experience.

3. Simple, Promise-based Commands: Its easy-to-understand syntax allows you to write tests in a JavaScript "promise" style, making them both powerful and intuitive.

4. Local Dynamic Execution: Cypress allows you to execute tests dynamically in your local environment, making debugging and local test runs easier.

5. Integration with Other QA Tools: Cypress can be linked with tools like TestRails for better test management and reporting.

6. Customizable Test Reporters: Cypress gives you the flexibility to create or use existing test reporters to match your team's reporting standards.

7. Browser-based Test Runner: It runs tests directly inside the browser, which makes it easier to debug and provides better visibility into test execution.

8. Comprehensive Documentation: Cypress offers well-documented guides that make it easy to get started, even for beginners.

9. Anti-Flakiness Philosophy: Cypress was designed to minimize "flaky" tests by automatically handling retries and waiting for elements to be ready, making tests more stable.

How Cypress handles synchronization

One of the standout features of Cypress is its ability to understand and handle everything that happens within your application. For example, Cypress:

• Detects when a page is loaded and unloaded.
• Waits for animations to stop before moving on.
• Automatically waits for elements to become visible, enabled, or uncovered.
• Pauses commands until page transitions or specific network requests are complete.
• This synchronization eliminates the need for manual waiting or complex handling of asynchronous events, ensuring that your tests run smoothly.

When might you not want to use Cypress?

While Cypress offers many advantages, it’s not without its limitations:

1. Chaining Commands: The use of chains in commands might become cumbersome for larger test suites.

2. Browser Support: Currently, Cypress only officially supports Google Chrome. This can be restrictive if your application needs testing across other browsers.

3. Cypress Cloud Costs: While Cypress itself is free, Cypress Cloud (which provides features like parallel test execution) comes at a cost.

4. Complex Conditional Logic: Handling advanced logic, like if/else statements, can be tricky within Cypress tests.

5. Limited “Page” Configurations: Unlike some other testing tools, Cypress doesn’t have built-in support for “page object models” or complex configurations.

Conclusion

Cypress is truly an excellent choice for modern web application testing due to its ease of use, reliability, and powerful features. It’s particularly well-suited for JavaScript-based applications, with its built-in support for modern frameworks and libraries. While it’s not perfect for all situations, its speed, accuracy, and robust documentation make it a tool worth considering for your next E2E testing project. If you’re looking to simplify and streamline your testing workflow, we would recommend Cypress as the solution you might need.