Testing Types

info

What you'll learn

• The differences between end-to-end and component tests
• The benefits and considerations for each type of test
• Common scenarios for each type of test

End-to-End or Component Tests?

One of the first decisions you will need to make on your testing journey is what type of test to create. Cypress offers two options: end-to-end and component tests. There are benefits and considerations for each choice, and the decision will depend on the needs of what you are currently trying to accomplish. In the end, you will probably have a combination of both types of tests for your app, but how do you choose right now?

Let's go over each of these test types, the benefits they bring, things to consider, and scenarios for each.

tip

Cypress is adaptable to many different types of tests outside of end-to-end and component tests, including API Testing, Visual Testing, Unit Testing, Accessibility Testing and more. Our plugins provide many more tools to help you extensively test your app.

What is E2E Testing?

E2E Testing is a technique that tests your app from the web browser through to the back end of your application, as well as testing integrations with third-party APIs and services. These types of tests are great at making sure your entire app is functioning as a cohesive whole.

Cypress runs end-to-end tests the same way users interact with your app by using a real browser, visiting URLs, viewing content, clicking on links and buttons, etc. Testing this way helps ensure your tests and the user's experience are the same.

Writing end-to-end tests in Cypress can be done by developers building the application, specialized testing engineers, or a quality assurance team responsible for verifying an app is ready for release. Tests are written in code with an API that simulates the steps that a real user would take.

End-to-end tests are great at verifying your app runs as intended, from the front end to the back end. However, end-to-end tests can be more difficult to set up, run, and maintain. There are often infrastructure needs in setting up a backend for testing purposes. Your team will need to develop a strategy on how to handle this complexity.

tip

Benefits of end-to-end tests:

• Ensure your app is functioning as a cohesive whole
• Tests match the user experience
• Can be written by developers or QA Teams
• Can be used for integration testing as well

info

Considerations for end-to-end tests:

• More difficult to set up, run, and maintain
• Provision testing infrastructure in CI
• Testing certain scenarios require more setup

note

Common scenarios for end-to-end tests:

• Validating critical workflows like authentication and purchasing
• Ensuring data is persisted and displayed through multiple screens
• Running Smoke Tests and System Checks before deployment

To learn more about end-to-end testing in Cypress, visit our guide on Writing Your First End-to-end Test.

What is Component Testing?

Modern web frameworks provide ways to write applications by breaking them into smaller logical units called components. Components can range from fairly small (like a button) to more complex (like a registration form).

Because of their nature, components tend to be easily testable, which is where Cypress Component Testing comes into play.

Component tests differ from end-to-end tests in that instead of visiting a URL to pull up an entire app, a component can be "mounted" and tested on its own. This allows you to focus on testing only the component's functionality and not worrying about other nuances with testing a component as part of the larger application.

Typically, a component test is written by the developers working on the component. The code for the test lives alongside the component code, and it is common for tests to be coded simultaneously with the component, helping developers verify the required functionality while building it.

One thing to consider, though, is even if all your component tests pass, it does not mean your app is functioning properly. Component tests do nothing to ensure that all the layers of your app are working well together. Therefore, a well-tested app has a combination of end-to-end and component tests, with each set of tests specializing in what they do best.

tip

Benefits of component tests:

• Easier to test components in isolation
• Fast and reliable
• Easy to set up specific scenarios in tests
• Don't rely on any external system to run

info

Considerations for component tests:

• Do not ensure overall app quality
• Do not call into external APIs/Services
• Usually written by developers working on the component

note

Common scenarios for component tests:

• Testing a date picker works properly for a variety of scenarios
• That a form shows and hides specific sections based on input
• Testing components coming out of a design system
• Testing logic not tied to a component (like unit tests!)

To learn more about component testing in Cypress, visit our guide on Testing Your Components with Cypress.

Testing Type Comparison

Attributes	E2E	Component
What's Tested	All app layers	Individual component
Characteristics	Comprehensive, slower, more susceptible to flake	Specialized, quick, reliable
Used For	Verifying app works as a cohesive whole	Testing functionality of individual component
Written By	Developers, QA Team, SDETs	Developers, Designers
CI Infrastructure	Often requires complex setup	None needed
Initialization Command	cy.visit(url)	cy.mount(<MyComponent />)