Imagine you are testing a car dashboard. You want to check if the speedometer moves, the fuel gauge works, the warning lights turn on. Do you need an actual running engine for that? No. You connect some wires, send fake signals, and test the dashboard in isolation.
API mocking is exactly the same idea. Your frontend is the dashboard. The backend API is the engine. When you mock APIs, you send fake signals to the frontend and test how it reacts. No real backend needed.
When Mocking Helps
Backend is not ready yet -- frontend team is ahead, you cannot wait
Backend is flaky -- staging server goes down every Friday evening
You need specific data -- an empty cart, exactly 100 products, a user with expired subscription
You need error states -- 500 errors, timeouts, rate limiting. Good luck getting the real API to do that on demand
Speed -- real API calls take 200-500ms each. Mocked calls return in under 5ms
CI/CD -- your pipeline should not depend on external services being up
When NOT to Mock
Do not mock everything. You still need some end-to-end tests that hit the real API. Mocking tells you "the UI works correctly IF the API returns X." End-to-end tests tell you "the API actually returns X." You need both.
Mock When
✓Testing UI logic and rendering
✓Testing error handling paths
✓Testing edge cases (empty, huge data)
✓Backend is unstable or unavailable
✓You need fast, repeatable tests
✓Testing loading states
Use Real API When
●Testing actual data flow end-to-end
●Verifying API contract compliance
●Testing authentication flows
●Smoke tests in production-like env
●Integration testing with third-party APIs
●Performance/load testing
How API Mocking Works in Playwright
Browser
Makes API request
→
Playwright Route Handler
Intercepts request before it leaves
→
Mock Response
Returns fake data instantly
→
Real Server
Never receives the request
Key Point: API mocking lets you test the dashboard without the engine. You control what data the UI sees, every single time, in milliseconds.
Key Point: API mocking is like testing a car dashboard without the engine -- you control the signals the UI receives.