Problem in Playwright 1.45.0 when POSTing multipart FormData using recorded HAR files

Question

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": "------WebKitFormBoundaryodbswUmZkXgG8qgY\r\nContent-Disposition: form-data; name=\"Param1\"\r\n\r\nValue1\r\n------WebKitFormBoundaryodbswUmZkXgG8qgY--\r\n",
  ...
}

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?

UPDATE - MINIMAL TEST CASE

1. Starting with the playwright sample https://playwright.dev/docs/intro, modify tests/example.spec.ts as follows:

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

test('upload file', async({
  page
}) => {

  // When POSTing to this url, get response from test.har
  await page.context().routeFromHAR('test.har', {
    url: 'https://httpbin.org/post',
    update: false,
    updateContent: 'embed'
  });

  // Run the test (upload a file and click submit)
  await page.goto('http://localhost:80/');
  const [fileChooser] = await Promise.all([
    page.waitForEvent('filechooser'),
    page.locator('#file').click()
  ]);
  await fileChooser.setFiles('sample.txt');
  await page.locator('button').click();

  // If the response is served from the test.har file,
  // we should get a "success" response.
  await expect(page.locator('#status')).toContainText('success');

});

2. Put sample.txt and test.har in the top-level directory.

{
  "log": {
    "version": "1.2",
    "creator": {
      "name": "Playwright",
      "version": "1.45.0"
    },
    "browser": {
      "name": "chromium",
      "version": "127.0.6533.17"
    },
    "entries": [
      {
        "startedDateTime": "2024-06-27T17:25:48.829Z",
        "time": 2.478,
        "request": {
          "method": "POST",
          "url": "https://httpbin.org/post",
          "httpVersion": "HTTP/2.0",
          "cookies": [],
          "headers": [
            { "name": ":authority", "value": "httpbin.org" },
            { "name": ":method", "value": "POST" },
            { "name": ":path", "value": "/post" },
            { "name": ":scheme", "value": "https" },
            { "name": "accept", "value": "*/*" },
            { "name": "accept-encoding", "value": "gzip, deflate, br, zstd" },
            { "name": "accept-language", "value": "en-US" },
            { "name": "content-length", "value": "44" },
            { "name": "content-type", "value": "multipart/form-data; boundary=----WebKitFormBoundary0123456789ABCDEF" },
            { "name": "origin", "value": "http://localhost" },
            { "name": "priority", "value": "u=1, i" },
            { "name": "referer", "value": "http://localhost/" },
            { "name": "sec-ch-ua", "value": "\"Not)A;Brand\";v=\"99\", \"HeadlessChrome\";v=\"127\", \"Chromium\";v=\"127\"" },
            { "name": "sec-ch-ua-mobile", "value": "?0" },
            { "name": "sec-ch-ua-platform", "value": "\"Windows\"" },
            { "name": "sec-fetch-dest", "value": "empty" },
            { "name": "sec-fetch-mode", "value": "cors" },
            { "name": "sec-fetch-site", "value": "cross-site" },
            { "name": "user-agent", "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.6533.17 Safari/537.36" }
          ],
          "queryString": [],
          "headersSize": -1,
          "bodySize": -1,
          "postData": {
            "mimeType": "multipart/form-data; boundary=----WebKitFormBoundary0123456789ABCDEF",
            "text": "------WebKitFormBoundary0123456789ABCDEF--\r\n",
            "params": []
          }
        },
        "response": {
          "status": 200,
          "statusText": "",
          "httpVersion": "HTTP/2.0",
          "cookies": [],
          "headers": [
            { "name": "access-control-allow-credentials", "value": "true" },
            { "name": "access-control-allow-origin", "value": "http://localhost" },
            { "name": "content-length", "value": "1000" },
            { "name": "content-type", "value": "application/json" },
            { "name": "date", "value": "Thu, 27 Jun 2024 17:25:49 GMT" },
            { "name": "server", "value": "gunicorn/19.9.0" }
          ],
          "content": {
            "size": -1,
            "mimeType": "application/json",
            "text": "{\n  \"success\": {} }\n"
          },
          "headersSize": -1,
          "bodySize": -1,
          "redirectURL": ""
        },
        "cache": {},
        "timings": { "send": -1, "wait": -1, "receive": 2.478 }
      }
    ]
  }
}

3. At localhost:80, put this index.html file:

<html>

<body>
  <div class="container">
    <h1>Multipart File Upload</h1>
    <form id="form" enctype="multipart/form-data">
      <div class="input-group">
        <label for="files">Select files</label>
        <input id="file" type="file" multiple />
      </div>
      <button class="submit-btn" type="submit">Upload</button>
    </form>
    <div id="status"></div>
  </div>
  <script type="text/javascript">
    const form = document.querySelector('form');

    form.addEventListener('submit', async(event) => {
      event.preventDefault();

      // This is the request we would normally use.  But it does not
      // work when running against the test.har file, because Playwright
      // will not find a match in that file -- due to the fact that the
      // boundaries won't match (fetch uses random boundaries each time).
      let request = new Request('https://httpbin.org/post', {
        method: 'POST',
        body: new FormData(form)
      });

      // ### BEGIN WORKAROUND
      // As a clunky workaround, rebuild request using a fixed boundary
      // To demonstrate the Playwright bug, commenet out this workaround
      const body = new TextDecoder('utf-8').decode(await request.arrayBuffer());
      const currBoundary = body.substring(2, 40);
      const newBoundary = '----WebKitFormBoundary0123456789ABCDEF';
      request = new Request(request, {
        headers: {
          'Content-Type': `multipart/form-data; boundary=${newBoundary}`,
        },
        body: body.replaceAll(currBoundary, newBoundary)
      });
      // ### END WORKAROUND

      // Now make the request
      const response = await fetch(request);
      const json = await response.json();
      document.querySelector('#status').innerHTML = JSON.stringify(json, null, 2);
    });
  </script>
</body>

</html>

4. Run the test (npx playwright test tests/example.spec.ts).

The test will fail without the "WORKAROUND" in the index.html that hardcodes the boundary. If we let the browser choose its own (random) boundary, then the test will always fail when running against the test.har file.