Component testing vs E2E in Cypress - Automation Approaches Compared

Test a Button Component and Full Login Flow

Preconditions (3)

Step 1: Open the Button component in isolation

Step 2: Verify the button renders with text 'Submit'

Step 3: Click the button and verify the click handler is called

Step 4: Navigate to the login page of the application

Step 5: Enter '[e-mail]' in the email input field

Step 6: Enter 'Password123' in the password input field

Step 7: Click the login button

Step 8: Verify the URL changes to '/dashboard'

Step 9: Verify the dashboard page contains the text 'Welcome, user!'

✅ Expected Result: The Button component renders correctly and responds to clicks. The login flow completes successfully, redirecting to the dashboard with welcome text.

Automation Requirements - Cypress

Assertions Needed:

Button text is 'Submit'

Click handler is called on button click

URL changes to '/dashboard' after login

Dashboard page contains 'Welcome, user!' text

Best Practices:

Use Cypress component testing for the Button component

Use Cypress E2E testing for the login flow

Use data-cy attributes for selectors

Use explicit assertions for visibility and content

Avoid hardcoded waits; use Cypress commands that wait automatically

Automated Solution

Cypress

/// <reference types="cypress" />

// Component Test for Button
import Button from '../../src/components/Button.vue';

describe('Button Component Test', () => {
  it('renders with text and responds to click', () => {
    const onClick = cy.stub();
    cy.mount(<Button onClick={onClick}>Submit</Button>);
    cy.get('[data-cy=button]').should('be.visible').and('have.text', 'Submit');
    cy.get('[data-cy=button]').click().then(() => {
      expect(onClick).to.have.been.calledOnce;
    });
  });
});

// E2E Test for Login Flow
describe('Login Flow E2E Test', () => {
  it('logs in and redirects to dashboard', () => {
    cy.visit('/login');
    cy.get('[data-cy=email-input]').type('[e-mail]');
    cy.get('[data-cy=password-input]').type('Password123');
    cy.get('[data-cy=login-button]').click();
    cy.url().should('include', '/dashboard');
    cy.get('[data-cy=welcome-text]').should('contain.text', 'Welcome, user!');
  });
});

The solution has two parts: component test and E2E test.

In the component test, we mount the Button component using Cypress component testing. We pass a stub function to track clicks. We check the button text and simulate a click, then verify the click handler was called once.

In the E2E test, we visit the login page URL. We fill the email and password fields using selectors with data-cy attributes. We click the login button, then verify the URL changed to the dashboard. Finally, we check the dashboard page shows the welcome message.

This separation shows how component testing focuses on a small piece in isolation, while E2E tests the full user flow in the real app.

Common Mistakes - 4 Pitfalls

Using CSS selectors like classes or IDs that may change

Using hardcoded waits like cy.wait(5000)

Mixing component testing code with E2E testing code in one test

Not verifying the click handler was called in component test

Bonus Challenge

Now add data-driven testing for the login flow with 3 different user credentials

Show Hint