Principle:Getgauge Taiko Response Mocking
Overview
Response Mocking is the technique for returning fabricated HTTP responses without making actual network requests, enabling controlled testing of application behavior with predetermined data in Taiko.
Description
Response mocking intercepts requests matching a URL pattern and returns pre-defined responses with specified status codes, headers, and body content. The mocked response is fulfilled directly by the browser using the CDP Fetch.fulfillRequest method, without any actual network activity occurring. This enables testing of application behavior with precisely controlled data.
Response mocking is essential for several testing scenarios:
- Testing error states — Return 500, 404, 403, or other error status codes to verify error handling UI and logic
- Testing empty states — Return empty arrays or null values to verify empty state rendering
- Testing specific data scenarios — Return carefully crafted response data to test specific UI rendering paths
- Testing edge cases — Return malformed data, extremely large payloads, or unusual character encodings
- Testing without backend — Run frontend tests when the backend API is unavailable or not yet implemented
- Deterministic testing — Ensure tests always receive the same data regardless of backend state
The mock response supports configuring:
- Status code — HTTP status code (defaults to 200)
- Headers — Custom response headers
- Content type — MIME type of the response body
- Body — Response body as a string or JSON object
Usage
Response mocking is used when the test needs to control exactly what data the application receives from a network request. The mock response object is provided as the second parameter to intercept(). Object bodies are automatically serialized to JSON, and all response bodies are base64-encoded for transmission through the CDP protocol.
Theoretical Basis
The mocking mechanism constructs and delivers a complete HTTP response through the CDP:
intercept(url, { status, headers, contentType, body }) called with object action
│
▼
Interceptor registered with action = response object
│
▼
Matching request is paused by Fetch.requestPaused
│
▼
handleInterceptor checks action → typeof object
│
▼
mockResponse() processes the response object:
├── If body is object → JSON.stringify(body)
├── Base64-encode the body string
├── Set content-type header (default: text/plain)
├── Set content-length header
└── Merge with any custom headers
│
▼
Fetch.fulfillRequest({
requestId,
responseCode: status || 200,
responseHeaders: [...headers],
body: base64EncodedBody
})
│
▼
Browser receives fabricated response (no network activity)
The mockResponse function handles the transformation of the user-provided response object into the format required by the CDP Fetch.fulfillRequest method. Key transformations include:
- Body serialization — If the body is a JavaScript object, it is automatically converted to a JSON string using
JSON.stringify() - Base64 encoding — The response body is base64-encoded as required by the CDP protocol for binary-safe transmission
- Header construction — Content-type and content-length headers are automatically calculated and set, with user-provided headers taking precedence
- Status defaulting — If no status code is specified, 200 (OK) is used as the default