npm install --save-dev cypress
npx cypress open
cypress/
├── downloads/       ← where downloaded files go (e.g., during tests)
├── fixtures/        ← test data files (e.g., JSON for mocking)
├── support/
│   ├── commands.ts  ← custom Cypress commands go here
│   └── e2e.ts       ← runs before every E2E test (setup/global logic)
cypress.config.ts     ← main Cypress config file

E2E Testing

  • simulates how a user interacts with your actual website — navigating pages, clicking links, viewing blog posts, etc.
  • Perfect for testing:
    • Blog homepage loads
    • Clicking a post goes to the correct page
    • Contact form works
    • Admin login (if any)
    • Any navigation or layout behavior

Component Testing

  • for testing isolated UI components (e.g. a PostCard, Navbar, etc.) outside the full app
  • It’s more useful for React/Next.js apps with a component-based structure, but requires extra setup

Steps

  • create a folder e2e to store testing files there