We are using routeFromHAR(har, {update: true}) to record network traffic while testing an application that makes a series of REST calls (GETs and POSTs). We are doing the recording for the purposes of later running the tests offline using mocked data (i.e. {update: false}).

This works fine except for POSTs that use multipart/form-data, i.e. those that are made by calling fetch() with method:POST and body:formData.

While recording, there is no issue, and in fact the recorded HAR file contains the decoded FormData, something like

"postData": {
  "mimeType": "multipart/form-data; boundary=----WebKitFormBoundaryodbswUmZkXgG8qgY",
  "text": "------WebKitFormBoundaryodbswUmZkXgG8qgYrnContent-Disposition: form-data; name="Param1"rnrnValue1rn------WebKitFormBoundaryodbswUmZkXgG8qgY--rn",
  ...
}

which seems correct.

The problem occurs when running the same test against the recorded HAR file (i.e. routeFromHAR(har, {update: false}). In that case, it seems that Playwright does not find the matching entry in the HAR file, causing the test to fail.

I think the problem is because Playwright is not accounting for the fact that the browser generates a new “boundary” each time. That is, the boundary used when running against the recorded HAR file will not be the same as when the HAR file was recorded, and therefore the postData will not strictly match.

To prove this to myself, I hacked the data I am passing to fetch() so that the boundary generated by the browser matches the one in the recorded HAR file. When I do that, then Playwright locates the entry in the HAR file and the test succeeds.

For example:

// Normally we would fetch() with this:
let request = new Request(url, {
  'method': 'POST',
  'body': formData,
  ...
});

// But now, rebuild the request using boundary stored in recorded HAR file
let body: string = new TextDecoder('utf-8').decode(await request.arrayBuffer());
const boundary = body.substring(2, 40); // get boundary from browser
const boundaryInHar = '----WebKitFormBoundaryodbswUmZkXgG8qgY'; // copied from HAR
body = body.replaceAll(boundary, boundaryInHar);

request = new Request(url, {
  'method': 'POST',
  'body': body,
  'headers': {
    'Content-Type': `multipart/form-data; boundary=${boundaryInHar}`,
  },
  ...
});

Can the Playwright team please confirm that there is an issue with POSTing multipart FormData using recorded HAR files?