puppeteer - проверка POST-запроса, где полезной нагрузкой является FormData

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 для проверки содержимого запроса POST, где полезная нагрузка FormData состав?

При запуске процесса в Chrome, я вижу, как FormData отображается в сетевых запросах через Chrome devtools, поэтому я знаю, что данные отправляются, но я бы хотел это подтвердить.

Answer 1

Я сделал несколько тестов, request.postData() работал только на меня application/x-www-form-urlencoded формы (иначе "нормальные данные формы"). Как только вы загрузите файл, content-type является multipart/form-data и кукловод не сможет вернуть данные поста.

Альтернатива: проверьте заголовок Content-Type

Поскольку вы не можете проверить, отправляются ли данные поста, вы все равно можете проверить, действительно ли запрос multipart/form-data запрос. В этом случае content-type заголовок выглядит так 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;
  }
});