puppeteer

Question

我在 React 中有一个看起来像这样的过程：

handleButtonClick() {
  const payload = new FormData();
  payload.append('foo', someFileBlobContent);
  axios.post('/my-api/', payload);
}

单击按钮时，一些数据被编译为 FormData，然后作为 POST 请求中的有效负载发送到 API。

在我的 Jest/Puppeteer 测试中，我试图确认请求包含它应该包含的数据：

page.click('.my-button');

await page.waitForRequest(request => {
  if (request.url().match(/my-api/) && request.method() === 'POST') {
    expect(request.postData()).toBeDefined();
    return true;
  }
});

在这种情况下 request.postData() 是 undefined。 Puppeteer 中是否有某种方法可以检查负载为 FormData 结构的 POST 请求的内容？

当运行进程在Chrome时，我可以通过Chrome devtools看到网络请求中显示的FormData，所以我知道数据正在发送，但是我'我想断言。

Answer 1

我做了一些测试，request.postData() 只适用于 application/x-www-form-urlencoded 表格（又名 "normal form data"）。上传文件后，content-type 为 multipart/form-data，puppeteer 将无法 return post 数据。

备选方案：检查 Content-Type header

由于您无法检查 post 数据是否已发送，您仍然可以检查该请求是否实际上是 multipart/form-data 请求。在那种情况下，content-type header 看起来像这样 multipart/form-data; boundary=...，所以你可以这样检查它：

await page.waitForRequest(request => {
  if (request.url().match(/my-api/) && request.method() === 'POST') {
    const headers = request.headers();
    expect(headers['content-type'].startsWith('multipart/form-data')).toBe(true);
    return true;
  }
});

puppeteer - 检查负载为 FormData 的 POST 请求

puppeteer - Inspecting POST request where payload is FormData

axios

form-data

jest-puppeteer

备选方案：检查 Content-Type header