Component testing vs E2E in Cypress - Test Execution Compared

Test Overview

This test compares a simple component test and an end-to-end (E2E) test using Cypress. The component test checks if a button renders and responds to a click event. The E2E test verifies the full user flow of opening a page, clicking a button, and seeing a result.

Test Code - Cypress

Cypress

import { mount } from 'cypress/react';
import React, { useState } from 'react';

// Simple Button component
function Button() {
  const [clicked, setClicked] = useState(false);
  return (
    <button onClick={() => setClicked(true)} aria-label="click-button">
      {clicked ? 'Clicked!' : 'Click me'}
    </button>
  );
}

// Component Test
describe('Button Component Test', () => {
  it('renders and changes text on click', () => {
    mount(<Button />);
    cy.get('button[aria-label="click-button"]').should('contain.text', 'Click me');
    cy.get('button[aria-label="click-button"]').click();
    cy.get('button[aria-label="click-button"]').should('contain.text', 'Clicked!');
  });
});

// E2E Test
// Assume the app page renders the Button component
describe('Button E2E Test', () => {
  it('loads page and button changes text on click', () => {
    cy.visit('/button-page');
    cy.get('button[aria-label="click-button"]').should('contain.text', 'Click me');
    cy.get('button[aria-label="click-button"]').click();
    cy.get('button[aria-label="click-button"]').should('contain.text', 'Clicked!');
  });
});

Execution Trace - 8 Steps

Step	Action	System State	Assertion	Result
1	Test starts for Button Component Test	Cypress test runner initializes component mount environment	-	PASS
2	Mount Button component in isolation	Button renders with text 'Click me'	Check button text is 'Click me'	PASS
3	Click the button	Button state changes internally	-	PASS
4	Verify button text changed to 'Clicked!'	Button shows updated text	Button text is 'Clicked!'	PASS
5	Test starts for Button E2E Test	Browser opens and navigates to '/button-page'	-	PASS
6	Find button on page	Button visible with text 'Click me'	Button text is 'Click me'	PASS
7	Click the button	Button updates after click	-	PASS
8	Verify button text changed to 'Clicked!'	Button shows updated text	Button text is 'Clicked!'	PASS

Failure Scenario

Failing Condition: Button element not found or text does not update after click

Execution Trace Quiz - 3 Questions

What does the component test verify?

A Button renders and changes text on click

B Full page navigation and button click

C Database connection

D API response status

Key Result

Component tests focus on isolated UI parts quickly, while E2E tests cover full user flows including navigation and integration.