Answer

Matching Requests with HAR Files in @playwright/test

To match a request in your code with data in a HAR file, you need to ensure a few things.

URL Matching

First, the URL of the request must match exactly or follow a specified glob pattern. If the URL in your code differs from the one in the HAR file, the response won't be served.

// Example of URL matching in @playwright/test
const { test } = require('@playwright/test');

test('URL should match', async ({ page }) => {
  await page.goto('https://ray.run/');
  // rest of the code
});

HTTP Method Matching

Second, the HTTP method must match exactly. If the HAR file records a GET request but your code makes a POST request, they won't match.

// Example of HTTP method matching in @playwright/test
await page.goto('https://ray.run/');
const [response] = await Promise.all([
  page.waitForResponse('https://ray.run/api/data'),
  page.click('text=Submit'),  // this triggers a POST request
]);

POST Requests

For POST requests, the URL, HTTP method, and payload must all match. If any of these differ, the requests won't be considered identical.

// Example of POST request matching in @playwright/test
await page.goto('https://ray.run/');
await page.fill('input[name="data"]', 'payload');
await page.click('text=Submit');  // this triggers a POST request with payload

Multiple Recordings

If multiple recordings match a request, the one with the most matching headers is picked.

Remember, each response should have its own entry for different scenarios or variations of requests. If these attributes differ during the replaying from HAR process, it won't work as expected.