Network Mocking
Replace real backend calls with fast fake ones during a test.
What you'll learn
- Block or change network calls.
- Make tests faster and less flaky.
- Test empty, error, and happy paths.
Playwright AutomationlessonsJump to another lesson
Network Mocking
Replace real backend calls with fast fake ones during a test.
Big Picture
One small picture can make this idea easier to hold.
Real network
- Can be slow.
- Can fail for reasons outside the test.
- Uses live data.
- Good for true end-to-end checks.
Mocked network
- Very fast.
- Test controls the response.
- Uses fake data.
- Good for stable feature tests.
VerdictMocking is best when you want speed and control.
How It Moves
Short steps make the flow easier to see.
Watch the request
Find the API call the page makes.
Choose a reply
Pick the data or error you want to send back.
Intercept it
Swap the real call for your fake response.
Run the test
Check the page with the controlled data.
Step By Step
This is the same idea, stretched across time.
- 1
Observe traffic
See which request the page sends.
- 2
Replace the response
Send fake data back from the test.
- 3
Assert the UI
Check what the user sees.
- 4
Test more states
Try error and empty cases too.
One Small Model
Think of this like a tiny card you can keep in your pocket.
MockRoute
5 fieldsQuick Check
Why mock network calls in tests?
Map It
One more picture helps you see where this lesson matters most.
Mocking choices
Live and loose
Slow and flaky test
Best balance
Mock only one call
Heavy realism
Almost full app flow
Full lab mode
All data comes from the test