Docs
20.2-Integration-E2E-Testing
20.2 Integration & E2E Testing
Overview
Integration and End-to-End (E2E) testing verify that different parts of your application work together correctly. While unit tests focus on isolated components, integration tests check how components interact, and E2E tests validate entire user workflows.
Learning Objectives
By the end of this section, you'll understand:
- •Difference between unit, integration, and E2E testing
- •Writing effective integration tests
- •E2E testing strategies and tools
- •Testing API endpoints
- •Database testing patterns
- •Browser automation testing
Testing Pyramid
▲
/│\
/ │ \ Fewer E2E tests (slow, expensive)
/ │ \ Full system validation
/ E2E│ \
/─────│────\
/ │ \ More integration tests
/ Integ│ \ Component interaction
/────────│───────\
/ │ \
/ Unit Tests \ More unit tests (fast, cheap)
/───────────│──────────\ Isolated functionality
▼────────────▼───────────▼
Speed: Fast ────────────────► Slow
Cost: Low ─────────────────► High
Coverage: Component ───────────► System
Testing Levels Comparison
| Aspect | Unit Tests | Integration Tests | E2E Tests |
|---|---|---|---|
| Scope | Single function/class | Multiple components | Entire application |
| Speed | Very fast (ms) | Medium (seconds) | Slow (minutes) |
| Dependencies | Mocked | Some real, some mocked | All real |
| Maintenance | Low | Medium | High |
| Confidence | Component works | Components integrate | System works |
| Debugging | Easy | Moderate | Difficult |
| Flakiness | Low | Medium | Higher |
Integration Testing
What to Test
┌─────────────────────────────────────────────────────────────┐
│ Integration Testing │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Service │ ──────► │ Service │ ──────► │ Service │ │
│ │ A │ │ B │ │ C │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ Database │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ Test Points: │
│ ├── Service A → Service B communication │
│ ├── Service B → Database operations │
│ ├── API endpoint → Service → Response │
│ └── Event flow through multiple services │
│ │
└─────────────────────────────────────────────────────────────┘
Integration Test Patterns
┌────────────────────────────────────────────────────────────────┐
│ Integration Test Patterns │
├────────────────────────────────────────────────────────────────┤
│ │
│ 1. Bottom-Up Integration │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ┌─────┐ Start here, move up │ │
│ │ │ DB │ ◄────────────────────── │ │
│ │ └──▲──┘ │ │
│ │ │ │ │
│ │ ┌──┴──┐ Then test this layer │ │
│ │ │ DAL │ ◄────────────────────── │ │
│ │ └──▲──┘ │ │
│ │ │ │ │
│ │ ┌──┴──┐ Finally test this │ │
│ │ │ API │ ◄────────────────────── │ │
│ │ └─────┘ │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ 2. Top-Down Integration │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ┌─────┐ Start here, move down │ │
│ │ │ UI │ ◄────────────────────── (with stubs) │ │
│ │ └──┬──┘ │ │
│ │ ▼ │ │
│ │ ┌─────┐ Replace stubs progressively │ │
│ │ │ API │ ◄────────────────────── │ │
│ │ └──┬──┘ │ │
│ │ ▼ │ │
│ │ ┌─────┐ Until all real │ │
│ │ │ DB │ ◄────────────────────── │ │
│ │ └─────┘ │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
E2E Testing Flow
┌────────────────────────────────────────────────────────────────┐
│ E2E Test Scenario │
│ "User Checkout Flow" │
├────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Visit │──►│ Login │──►│Add Item │──►│Checkout │ │
│ │ Site │ │ │ │to Cart │ │ │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │ │
│ ┌───────────────────────┘ │
│ ▼ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │Complete │◄──│ Payment │◄──│Shipping │◄──│ Review │ │
│ │ │ │ Info │ │ Info │ │ Cart │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Verify: │ │
│ │ ✓ Order confirmation displayed │ │
│ │ ✓ Email sent │ │
│ │ ✓ Inventory updated │ │
│ │ ✓ Payment processed │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
API Testing Patterns
┌────────────────────────────────────────────────────────────────┐
│ API Testing Approach │
├────────────────────────────────────────────────────────────────┤
│ │
│ Request Response Validation │
│ ┌───────────────────────┐ ┌────────────────────────┐ │
│ │ POST /api/users │ │ Status: 201 Created │ │
│ │ Headers: │ │ Headers: │ │
│ │ Content-Type: json │──────►│ Content-Type: json │ │
│ │ Body: │ │ Body: │ │
│ │ { name: "John" } │ │ { id: 1, name: ... } │ │
│ └───────────────────────┘ └────────────────────────┘ │
│ │
│ Test Categories: │
│ ├── Happy Path: Valid inputs, expected success │
│ ├── Error Cases: Invalid inputs, proper error handling │
│ ├── Edge Cases: Boundary values, empty inputs │
│ ├── Security: Authentication, authorization │
│ └── Performance: Response time, load handling │
│ │
└────────────────────────────────────────────────────────────────┘
Browser Automation
┌────────────────────────────────────────────────────────────────┐
│ Browser Automation Tools │
├────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Test Runner │ │
│ │ (Playwright / Puppeteer) │ │
│ └────────────────────────┬─────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Browser Instance │ │
│ │ ┌────────────────────────────────────────────────┐ │ │
│ │ │ Page │ │ │
│ │ │ ┌──────────────────────────────────────────┐ │ │ │
│ │ │ │ DOM Elements │ │ │ │
│ │ │ │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │ │
│ │ │ │ │ Button │ │ Input │ │ Form │ │ │ │ │
│ │ │ │ └────────┘ └────────┘ └────────┘ │ │ │ │
│ │ │ └──────────────────────────────────────────┘ │ │ │
│ │ │ │ │ │
│ │ │ Actions: click, type, select, wait, assert │ │ │
│ │ └────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ Capabilities: │
│ ├── Navigate to URLs │
│ ├── Interact with elements │
│ ├── Take screenshots │
│ ├── Record videos │
│ ├── Network interception │
│ └── Multi-browser support │
│ │
└────────────────────────────────────────────────────────────────┘
Test Data Management
┌────────────────────────────────────────────────────────────────┐
│ Test Data Strategies │
├────────────────────────────────────────────────────────────────┤
│ │
│ 1. Fixtures (Static Test Data) │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ fixtures/ │ │
│ │ users.json ← Static user data │ │
│ │ products.json ← Static product data │ │
│ │ orders.json ← Static order data │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ 2. Factories (Dynamic Data Generation) │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ const user = UserFactory.create({ │ │
│ │ name: 'John', │ │
│ │ role: 'admin' │ │
│ │ }); │ │
│ │ // Creates unique user with defaults + overrides │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ 3. Seeding (Database Population) │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ beforeAll → seed database with test data │ │
│ │ afterAll → clean up / reset database │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ 4. Transactions (Isolation) │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ beforeEach → start transaction │ │
│ │ test → make changes │ │
│ │ afterEach → rollback transaction │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
Test Environment Architecture
┌────────────────────────────────────────────────────────────────┐
│ Test Environments │
├────────────────────────────────────────────────────────────────┤
│ │
│ Development Staging Production │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ │ │ │ │ │ │
│ │ Unit │ │ Integr- │ │ E2E │ │
│ │ Tests │ │ ation │ │ Tests │ │
│ │ │ │ Tests │ │ (Smoke) │ │
│ │ │ │ │ │ │ │
│ └────┬─────┘ └────┬─────┘ └────┬─────┘ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Local │ │ Test │ │ Prod │ │
│ │ DB │ │ DB │ │ DB │ │
│ │ (Mock) │ │ (Real) │ │ (Real) │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ CI/CD Pipeline: │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Push → Unit → Integration → Deploy Staging → E2E │ │
│ │ │ Tests Tests → Deploy Prod → Smoke │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
E2E Test Best Practices
| Practice | Description | Example |
|---|---|---|
| Page Objects | Encapsulate page interactions | loginPage.login(user, pass) |
| Stable Selectors | Use data-testid attributes | [data-testid="submit-btn"] |
| Explicit Waits | Wait for specific conditions | await page.waitForSelector() |
| Retry Logic | Handle flaky tests | { retries: 2 } |
| Test Isolation | Each test independent | Fresh state per test |
| Parallel Execution | Run tests concurrently | Reduce total time |
| Visual Regression | Compare screenshots | Catch UI changes |
Key Takeaways
┌────────────────────────────────────────────────────────────────┐
│ Testing Strategy │
├────────────────────────────────────────────────────────────────┤
│ │
│ ✓ Use testing pyramid - more unit, fewer E2E │
│ ✓ Integration tests catch component interaction bugs │
│ ✓ E2E tests validate critical user journeys │
│ ✓ Use appropriate tools for each testing level │
│ ✓ Manage test data effectively │
│ ✓ Make tests reliable (not flaky) │
│ ✓ Run tests in CI/CD pipeline │
│ │
│ Balance: Confidence vs Speed vs Maintenance Cost │
│ │
└────────────────────────────────────────────────────────────────┘
Navigation
- •Previous: 20.1 Unit Testing Fundamentals
- •Next: 20.3 Mocking & Test Doubles