How do I use Playwright to send requests to a server API and inspect the full request before it is sent?

Answer

Inspect and Send Requests with Playwright

To inspect a request before sending it, use the page.route() method in Playwright. This method intercepts network requests matching a specific pattern and allows you to modify or inspect them before they are sent. Here's an example:

import { test, expect } from '@playwright/test';

test('Inspect and modify request', async ({ page }) => {
  // Intercept requests to ray.run API
  await page.route('https://ray.run/api/*', async (route, request) => {
    // Inspect the request headers
    const headers = request.headers();
    console.log('Request headers:', headers);

    // Modify the request headers
    const newHeaders = {
      ...headers,
      'User-Agent': 'Custom User Agent',
      'Authorization': 'Bearer your_token',
    };

    // Continue the request with the modified headers
    await route.continue({ headers: newHeaders });
  });

  // Navigate to the page and perform actions
  await page.goto('https://ray.run/landing');
  // ... perform actions to get required cookies

  // Send a request to the API
  const response = await page.evaluate(async () => {
    const result = await fetch('https://ray.run/api/data', {
      method: 'GET',
    });
    return result.json();
  });

  // Check the response
  expect(response).toHaveProperty('data');
});

In this example, we intercept requests to the ray.run API, inspect the request headers, modify them by adding a custom User-Agent and Authorization header, and then continue the request with the modified headers. After performing the necessary actions on the landing page, we send a request to the API and check the response.