[Bug]: Failure when POSTing multipart form data using recorded HAR files due to boundary mismatch

[ajssd]

Version

1.45.0

Steps to reproduce

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. In other words, if we let the browser choose its own (random) boundary -- which is the normal case -- then the test will always fail when running using the test.har file

Expected behavior

I expect the test to succeed and for Playwright to use the contents of the HAR file.

Actual behavior

The test fails because no match is found in the HAR file. It appears that the match is not found because of the Boundary mismatch in the multi part form data.

Additional context

I think Playwright should ignore the fact that the Boundary is different each time. When looking for a match in the HAR file, it should not consider the actual Boundary value.

Environment

System:
    OS: macOS 14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Memory: 4.02 GB / 32.00 GB
  Binaries:
    Node: 20.13.1 - /usr/local/bin/node
    npm: 10.5.2 - /usr/local/bin/npm
  Languages:
    Bash: 3.2.57 - /bin/bash
  npmPackages:
    @playwright/test: 1.45.0 => 1.45.0 
    playwright-merge-html-reports: 0.2.8 => 0.2.8