Home
Blog >
How to start end-to-end testing with Cypress?

17 minutes to read

How to start end-to-end testing with Cypress?

July 31, 2025

Mykhailo Ralduhin

Senior QA Engineer

Summarize with:

Have you ever had a web application perfectly designed, developed, and launched, only to discover it crumbled under real-life conditions? Even if the answer for now is no, many companies have. Such a scenario is common in web and app development. The ugly truth is that what looks good on paper does not necessarily work in real life.

To bring your product as close as possible to real conditions, you need end-to-end testing. The key idea of this testing method is to mimic what a user would do when using your product.

Yet, to get what E2E testing has to offer, you need to choose among different E2E testing tools. While traditional E2E testing frameworks are often slow, complicated in terms of setup, and hard to maintain, you can use several options on the market. Cypress is one of them.

Cypress automation testing should not come with the hardships of traditional E2E testing.

With our guide to starting your end-to-end testing journey and a kind of Cypress tutorial you can start using the tool without too much hassle

Propel your software towards success with end-to-end testing services.

Understanding end-to-end testing with Cypress

To get the bigger picture, we need to start uncovering some smaller details. In other terms, before starting with Cypress as a tool of your choice, it is important to understand what you will be using it for. To give you a bit of a context, we will focus on three subtopics in this section:

An explanation of what and when to use end-to-end testing?

The most common challenges end-to-end testing faces.

How Cypress overcomes these challenges.

What is E2E testing all about?

To best describe the approach, let’s compare it to some traditional testing methods as well as use an analogy.

Imagine your software developing as a relay race. In the race, each runner represents a certain part of the system. One is a login page, another one is a payment gateway, and the final one is a shopping cart. The overall goal is to pass the baton across all runners with all of them finishing the race in time. With such an analogy in mind, here’s how different testing methods fit into the picture:

Unit testing. Each runner practices their individual sprint, ensuring they can run their part of the track without obstacles or tripping. Similarly, unit testing focuses on individual components in isolation, verifying that each one works correctly on its own.

Integration testing. This stage ensures that runners can successfully hand off the baton to the next runner. Similarly, integration testing verifies that different system components communicate correctly.

System testing. Now, the entire relay team runs together, testing whether all runners can complete the race as a unit. System testing evaluates the entire application as a whole, ensuring that all components function correctly when combined.

End-to-end testing. This is the full race, from start to finish, with all runners passing the baton in sequence. E2E tests mimic real-world usage, putting testers in the user’s shoes to uncover any issues that might affect the overall experience.

9 most common challenges in end-to-end testing automation

End-to-end testing is crucial for validating the complete functionality of applications from a user's perspective. However, implementing E2E testing faces several challenges:

Challenge #1. Facing complex test environments

Modern solutions are a combination of different parts and interconnected services. Because software products are not standalone, it means replicating the full-cycle environment can be problematic. You need to have enough capacity to account for many factors.

Challenge #2. Maintenance difficulties without additional resources

As software products evolve, they get new updates, iterations, and features. Naturally, you will have more aspects to test for each new upgrade. In such a case, E2E tests can become a bit cumbersome, resulting in broken or outdated tests.

Challenge #3. Experiencing slow execution time

Doing E2E testing from start to finish can be time- and resource-consuming. This is especially true when you deal with large and comprehensive apps with many running elements. The more time you spend on testing, the slower the development pipeline will be.

Challenge #4. Test flakiness in high-pressure conditions

There is some evidence indicating E2E test suites can be unstable. Of course, it all depends on the test suite you are using. However, while there is a chance of instability, some tests might pass day one while failing the next without code changes.

Challenge #5. Data consistency issues and discrepancies

When you have different test data across different environments on your hands, ensuring reliability and consistency can be difficult. Differences between testing and production environments setups can lead to various issues. In other words, doing tests does not necessarily fully capture the real-world usage. With multiple environments included in the testing process, the chance of false positives and false negatives increases.

Challenge #6. Dependencies on third-party services

Some E2E testing tools come with an inherent need to rely on external APIs. In such a case, any external reliance means higher unpredictability. If you don’t control the entire process yourself, you get more and more factors beyond your control.

Challenge #7. Limited test coverage of the product

Comprehensive test coverage is challenging. If done incorrectly, user scenarios will be overlooked. As a result, you get potential issues that remain undetected and will come later and can potentially cost your reputation.

Challenge #8. Resource and time constraints

E2E testing can be resource-intensive. Naturally, to cover the entire user workflow and test all the processes, your team needs significant computational power and a lot of time on their hands. If you don’t have enough skilled QA testers, comprehensive end-to-end testing will be complicated to deliver.

Challenge #9. Tooling and framework complexities

Selecting the right testing tool and picking the right testing framework is a major problem in itself. This is even more challenging when you deal with an elaborate tech stack and different platforms.

Want to know how to avoid common challenges in end-to-end testing? Here’s the answer.

How Cypress end-to-end testing helps overcome QA challenges

How does Cypress help with common end-to-end testing challenges? Cypress testing framework is open-source and most often used for front-end testing. It is a perfect fit for web apps. With Cypress, QA engineers can write, run, and debug tests directly in the browser.

Here are top ways test automation services with Cypress can help deal with the end-to-end testing challenges:

Fast and reliable execution. Running directly in the browser, Cypress offers rapid test execution providing faster execution, instant feedback, and automatic reloading whenever code changes, significantly improving testing efficiency.

Maintainable tests. With its intuitive and developer-friendly syntax, writing and maintaining tests become more straightforward, reducing the learning curve.

Excellent debugging support. Cypress provides detailed error messages and stack traces, along with the ability to time-travel through tests, making debugging a seamless experience.

Automatic waiting and retries. Cypress intelligently waits for commands and assertions, reducing the need for manual waits and ensuring tests are less flaky.

Consistent test environments. By controlling the entire test lifecycle, Cypress ensures consistent and isolated test environments, minimizing discrepancies between test runs.

Network traffic control. Cypress allows mocking and stubbing of network requests, enabling tests to run independently of third-party services and ensuring data consistency.

Comprehensive documentation along with community support. Cypress comes with extensive documentation and a vibrant community, aiding in tool adoption and troubleshooting.

QA testing with Cypress framework

Cypress end-to-end testing is a JavaScript-based open-source framework. It is used for web apps in most cases. Unlike older end-to-end testing tools and frameworks that use external drivers outside the browser, Cypress runs directly inside the browser.

Cypress testing key features and benefits

Cypress's advantages come a long way. Here is a list of the key features and benefits Cypress brings:

Use the tool in your browser in real-time. With Cypress, you can examine your tests as they run in your browser in real-time. You get almost instant visual feedback. With such transparency, a tester can see how each action unfolds. In this manner, stopping and resolving all the issues on the fly is easier.

No more manual timeouts, and welcome automatic retries. Say goodbye to flaky tests. With Cypress in your toolkit, you can see how the tool waits for every element to appear as soon as each action is complete. The framework will also automatically retry commands until they succeed or face a time-out. You get a reduction in test instability with these features.

Effortless setup without hiccups. Cypress integrates seamlessly into your project with a straightforward installation process (just a quick npm install cypress). It does not matter whether you are using React, Angular, Vue, or another JavaScript framework. You’ll be writing tests in minutes, not hours.

Flexible, powerful, and easily integrated APIs. Cypress’s APIs are user-friendly and versatile. They enable precise interactions with your app. From simulating user actions like clicks and form submissions to verifying DOM states, Cypress gives you the control to craft reliable tests.

Time-travel debugging. Cypress comes with a “time-travel” feature. You can hover over the command line in the test runner and view snapshots of your app's state at each step. As a result, you can pinpoint issues without the need to dig deep into the logs. This makes debugging a breeze.

Comprehensive network control. Test edge cases with built-in tools. Stub network requests, mock APIs, or manipulate server responses. These aspects deliver fast, repeatable tests without depending on external services.

These features make Cypress an approachable yet powerful option, reducing the complexity of testing while boosting its effectiveness for developers and dedicated QA teams alike.

With Cypress testing you need fewer people on your testing team to handle Cypress and less budget to deal with end-to-end testing.

How Cypress test automation tool differs from other tools

When stacked against traditional frameworks like Selenium, Cypress testing brings distinct advantages:

Runs where it counts. Selenium uses WebDriver for external browser control. This often results in lags, sync issues, and shaky tests. In turn, Cypress dives straight into the browser. The tool shares your app’s runtime. The result? Fast execution, rock-solid tests, and user interaction matching real-world conditions.

Minimum assembly required. Cypress rolls up with features like automatic waiting, real-time reloading, “time-travel,” and snapshot/video recording. For Selenium, to get even close to Cypress, you need plugins and custom configurations. With Cypress it is all about less setup and more action.

Debugging that does not bring headaches. Selenium debugging is a slog. You can get cryptic error messages and almost zero visibility. With Cypress, you get detailed command logs, interactive test runners, and failure snapshots. Besides, Cypress’s “time-travel” debugging feature allows you to inspect the state of your app at any given moment.

No need for driver hassles. Selenium fully depends on browser-specific drivers. Their maintenance can be a nightmare. In contrast, Cypress handles every aspect internally. The tool frees up your drive management and offers a smoother experience.

Cypress is JavaScript to the bone. It is plugged into npm, ESLint, and CI/CD. The syntax at Cypress flows naturally. There is almost no learning curve included.

Overall, we can see that Cypress offers more benefits compared to Selenium. However, you need to understand that each tool out there comes with its advantages and disadvantages.

Why choose Cypress end-to-end testing? 4 key reasons

Cypress deals with the pain points of traditional E2E testing head-on. It offers some compelling reasons to make it your go-to framework:

Reason #1. Speed

Running directly in the browser gets rid of the need to find and install any third-party plugins and services. With Cypress, you get fast test execution and fast feedback.

Reason #2. Reliability

An intelligent waiting feature and DOM access ensure that tests are not flaky. In the end, with Cypress, you get reliable and, most importantly, consistent test results.

Reason #3. Ease of use

A straightforward setup. An intuitive API. Real-time feedback and insights. These aspects lower the learning curve and make tests easier to maintain.

Reason #4. Versatility

From cross-browser testing (Chrome, Firefox, Edge) to comprehensive network stubbing, Cypress covers all bases for modern web testing.

Whether you’re a solo developer or part of a large team, Cypress helps you catch bugs early. With the tool in your toolkit, you can improve application quality and confidently streamline your development workflow.

How to set up Cypress end-to-end testing environment

The foundation of adequate testing is all about establishing a proper setting. The same is true for Cypress. In the following section, we will go through setting up a Cypress environment. We have chosen a simple illustration to get you started.

Cypress testing framework installation

The starting point of the Cypress environment is installation and configuration. As mentioned, Cypress is an open-source JavaScript-based framework you work with directly in your browser. Follow these steps to complete installation and configuration:

Install Cypress. Add Cypress to your project using npm or yarn. Run the following command in your terminal:

npm install cypress --save-dev

Or, if you prefer yarn:

yarn add cypress --dev

This installs Cypress as a development dependency.

Open Cypress. After installation, launch the Cypress Test Runner by running:

npx cypress open

This opens an interactive interface where you can manage and execute tests.

Configure your project.

Customize Cypress settings by editing the cypress.config.js (or cypress.json, depending on the version) file in your project root. Here, you can configure options such as:

Base URL - define the default website URL for tests.

Timeouts - adjust waiting times for elements or responses.

Test file locations - specify where Cypress should look for test files.

Cypress test automation folder structure

Cypress organizes its files in a specific structure. Here’s what each folder does:

cypress/integration: This is where you write your test files. Name them descriptively (e.g., login.spec.js) and group them by feature or page for clarity.

cypress/support: Store reusable utilities here. The commands.js file is automatically loaded and ideal for custom commands.

cypress/fixtures: Use this folder for static test data, such as JSON files for mocking API responses. This allows you to run tests with predefined datasets.

cypress/plugins: Extend Cypress functionality here with plugins, like adding custom tasks. This folder is used to extend Cypress functionality with plugins, such as custom tasks, database setup, or API mocking.

Familiarizing yourself with this structure keeps your tests organized and maintainable.

Cypress test automation configuration tips

A few tweaks here and there can make your Cypress setup more efficient:

Tip #1. Set base URL

In cypress.json, add:

json
"baseUrl": "http://localhost:3000"

This lets you use relative paths in tests (e.g., /login) instead of full URLs.

Tip #2. Adjust timeouts

If your app is slow, increase the default timeout in cypress.json:

json
"defaultCommandTimeout": 6000

This sets the timeout to 6 seconds (6000 milliseconds), ensuring Cypress waits longer for elements or commands to complete before throwing an error.

Tip #3. Environment variables

Store sensitive data securely in cypress.config.js:

json
"env": { "API_KEY": "your-key" }

This allows you to securely access sensitive data during test execution. You can then access these environment variables in your test files like so you can access these in tests with Cypress.env('API_KEY').

This way, your sensitive information remains outside the test files and is kept secure.

How to write your first Cypress E2E test

With your Cypress environment set up, you're ready to start writing your first End-to-End (E2E) test.

Start simple to build confidence with Cypress.

Step 1. Choosing a test case

Pick a straightforward, critical feature to test:

Core feature. Focus on a key user flow, like logging into your app with valid credentials.

Keep it focused. Test one behavior at a time. For example, “User can log in successfully” is a single, clear test that is easier to debug and maintain.

Step 2. Running and analyzing the test

Here’s how to write, run, and review your test:

Write the test. Create a file in cypress/integration, such as login.spec.js, and add the following code:

js
describe('Login Page', () => {
 it('should log in with valid credentials', () => {
  cy.visit('/login');       // Navigate to login page
  cy.get('#username').type('user'); // Enter username
  cy.get('#password').type('pass'); // Enter password
  cy.get('button').click();     // Submit the login form  cy.url().should('include', '/dashboard'); // Verify the redirect to dashboard
 });
});

This test visits a login page, enters credentials, submits, and checks the resulting URL.

Run the test. Open the Cypress Test Runner with the following command:

npx cypress open

Once the Test Runner is open, click on login.spec.js to run the test. You will see the test executing in a browser window.

Click on login.spec.js to run it. You’ll see the test execute in a browser window.

Analyze results. If the test passes: great, you have verified the login flow works. If it fails, Cypress provides tools to help you debug:

Check error messages in the Test Runner.

Review screenshots in cypress/screenshots or cypress/videos (recorded automatically on failure).

With these steps, you’ll have a working Cypress environment and a solid first test. Keep your setup clean and your tests focused to make the most of Cypress’s powerful features.

3 best practices for end-to-end testing with Cypress

Cypress is a powerful tool for E2E testing, and it is loved for its simplicity and real-time feedback. To maximize its potential, adopt these best practices for cleaner code, seamless CI integration, and faster test runs.

Best practice #1. Writing clean and maintainable code

Writing tests that are easy to read and maintain is key to a sustainable testing strategy. Clean code saves time and reduces headaches down the road.

Follow coding standards. Use consistent naming, spacing, and structure across your test files. For example, name tests clearly – like it('logs in with valid credentials'). So anyone can understand their purpose at a glance.

Keep tests readable. Break tests into small, focused blocks with descriptive assertions. Avoid cramming too much logic into one test; clarity trumps complexity.

Make tests reusable. Create custom commands (e.g., Cypress.Commands.add('submitForm', () => {...})) for repeated actions like form submissions. Pair this with a Page Object Model to separate UI selectors from test logic, making updates easier when the app changes.

Best practice #2. Integrating Cypress with Continuous Integration (CI)

Automating your Cypress tests in a CI pipeline ensures consistent quality checks without manual effort. It’s a game-changer for team workflows.

Use CI tools. Cypress integrates effortlessly with tools like Jenkins, GitLab CI, or GitHub Actions. Set up your pipeline to run tests automatically on every code push or pull request.

Streamline automation. Configure your CI to execute cypress run in headless mode for speed. Use environment variables to manage test configurations (e.g., base URLs) across different setups.

Scale with parallelization. For larger test suites, split tests across multiple CI runners using Cypress’s parallel feature. This cuts down total run time significantly.

Best practice #3. Optimizing test performance

Fast, reliable tests keep your development cycle moving. Here’s how to optimize Cypress for efficiency and stability.

Reduce test flakiness. Use cy.wait() smartly – tie it to specific network requests (e.g., cy.wait('@loginAPI')) instead of arbitrary delays like cy.wait(3000). Cypress’s automatic retries also help stabilize tests without extra work.

Minimize unnecessary steps. Skip slow UI interactions where possible by setting up test conditions directly, such as logging in via API calls instead of clicking through forms. Use cy.intercept() to mock responses and avoid real network delays.

Boost execution speed. Run tests in headless mode with cypress run --headless to skip browser rendering. Focus tests on critical paths rather than over-testing every edge case.

When you stick to the aforementioned practices, you’ll get all Cypress's advantages. Remember, clean code equals more manageable tests, CI integration directly automates your workflow, and performance updates bring dependable results.

Following these practices to the letter makes your end-to-end testing team successful.

Conclusion

With its speed, intuitive design, and robust features, Cypress empowers you to ensure your web applications perform reliably.

Ready to bring your testing game to a whole other level?

Start implementing Cypress today and experience the difference. For expert support or comprehensive testing solutions, consider partnering with DeviQA, a trusted name in software testing services, to guarantee your application’s success.

Team up with an award-winning software QA and testing company

Trusted by 300+ clients worldwide