Absolutely! WebdriverIO has two robust, built-in ways to capture API responses during browser testing—no extra tools needed. Let’s break down the most practical approaches for your use case:

1. Use WebdriverIO’s Request Interception (Simplest, Recommended) #

This is the go-to method for most scenarios since it’s tightly integrated with WebdriverIO’s API and requires minimal setup. Here’s how to implement it:

Step-by-Step Example #

// 1. Enable request interception before navigating to the page
browser.setupInterceptor();

// 2. Trigger the action that loads your target API (e.g., navigate to the page)
browser.url('/page-that-fetches-data');

// 3. Fetch all captured requests
const allRequests = browser.getRequests();

// 4. Filter to find your target API call
const targetApiRequest = allRequests.find(req => 
  req.url.includes('/api/your-target-endpoint') && req.method === 'GET'
);

// 5. Validate the response
expect(targetApiRequest.response.statusCode).toBe(200); // Check status code
expect(targetApiRequest.response.headers['content-type']).toContain('application/json'); // Verify header

// Parse and validate the response body
const responseBody = JSON.parse(targetApiRequest.response.body);
expect(responseBody.data).toHaveLength(5); // Ensure correct number of items
expect(responseBody.data[0]).toHaveProperty('id', 1); // Validate specific field

Bonus: Mock and Validate Request Details #

If you need to check request parameters or mock responses (for isolated testing), use the mock API:

// Intercept all calls to your API endpoint
const apiMock = browser.mock('https://your-domain.com/api/**');

// Validate incoming request details
apiMock.onRequest().call((request) => {
  expect(request.method).toBe('POST');
  expect(request.body).toEqual(expect.objectContaining({
    userId: 'test-user-123',
    action: 'load-data'
  }));
});

// Trigger the action that sends the request
browser.click('#load-data-btn');

// Verify the mock was called exactly once
expect(apiMock.calls.length).toBe(1);

2. Use Chrome DevTools Protocol (CDP) for Advanced Control #

If you need deeper network insights (e.g., capturing request timings, headers at every stage), use WebdriverIO’s built-in CDP support. This works with Chrome, Edge, and Firefox DevEdition:

Step-by-Step Example #

// 1. Enable Network monitoring via CDP
await browser.cdp('Network', 'enable');

// 2. Listen for the "responseReceived" event to capture API responses
let targetResponse;
await browser.cdp('Network', 'responseReceived', (params) => {
  // Filter for your target API endpoint
  if (params.response.url.includes('/api/your-target-endpoint')) {
    targetResponse = params.response;
  }
});

// 3. Trigger the page action that loads the API
await browser.url('/page-with-api-call');

// 4. Fetch the full response body (requires a separate CDP call)
if (targetResponse) {
  const responseBodyData = await browser.cdp('Network', 'getResponseBody', {
    requestId: targetResponse.requestId
  });
  
  // Parse and validate
  const parsedBody = JSON.parse(responseBodyData.body);
  expect(parsedBody.success).toBe(true);
  expect(parsedBody.results).not.toBeNull();
}

// 5. Disable Network monitoring when done
await browser.cdp('Network', 'disable');

Key Notes to Keep in Mind #

• Browser Support: Both methods work with modern browsers (Chrome, Edge, Firefox DevEdition). For Firefox stable, ensure you’re using the latest WebdriverIO version.
• Wait for Requests: For SPAs where API calls load asynchronously, use browser.waitUntil() to wait for your target request to appear:

  browser.waitUntil(() => {
    return browser.getRequests().some(req => req.url.includes('/api/your-target'));
  }, { timeout: 5000, timeoutMsg: 'API request never loaded' });
  

• HTTPS Certificates: If testing against self-signed HTTPS endpoints, ensure your browser is configured to trust the certificate (use --ignore-certificate-errors in Chrome args).

Either approach will let you reliably capture and validate API responses during your browser automation tests. Start with Request Interception for most cases—it’s simpler and more aligned with WebdriverIO’s workflow.

内容的提问来源于stack exchange，提问作者Kandarp Gandhi