В Cypress отправка данных формы с помощью POST-запроса не работает

Question

Новое в Cypress и попытка в качестве доказательства концепции для компании.Я сталкиваюсь с проблемой, когда через запрос POST я не могу протестировать приложение React.Ниже приведены сообщения об ошибках, полученные в приложении Cypress Electron:

Повторная попытка по тайм-ауту: Тайм-аут cy.wait () ожидал 5000 мс для первого запроса к маршруту: 'formRequest'.Ни одного запроса не было получено.

Ниже приведен фрагмент кода, используемый в Cypress commands.js:

    Cypress.Commands.add("form_request", (method, urlPathParam, formData) => {
  return cy
    .server()
    .route(method, "https://admin.teamapp.myhelpling.com" + urlPathParam)
    .as("formRequest")
    .window()
    .then(win => {
      const xhr = new XMLHttpRequest();
      xhr.open(method, "https://admin.teamapp.myhelpling.com" + urlPathParam);
      xhr.setRequestHeader("accept", "application/json");
      xhr.setRequestHeader("access-token", accesstoken);
      xhr.setRequestHeader("client", client);
      xhr.setRequestHeader("expiry", expiry);
      xhr.setRequestHeader("token-type", tokentype);
      xhr.setRequestHeader("uid", uid);
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send(formData);
    })
    .wait("@formRequest");
});

В файле спецификации теста ниже приведен код внутри Test case

cy.AppLogin();
let dataname = "Test FORMDATA API";
let formData = new FormData();
formData.append("client[name]", dataname);
formData.append(
   "client[client_logo_attributes][content]",
   cy.fixture("/images/clients/Golden JPEG.jpeg")
);


cy.form_request("POST", "/admin/clients", formData).then(response => {
  cy.log(response.status);
});

Также, если я комментирую код .wait("@formRequest"); из commands.js, указанный выше, отображается следующая ошибка:

POST https://admin.teamapp.myhelpling.com/admin/clients 405 (метод не разрешен)

На вкладке «Источники» в инструменте dev я вижу крестик (X) на строке xhr.send(formData), представленной ниже:

    xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=----WebKitFormBoundaryAGOGnFVPveAa8gfv");
    xhr.send(formData);
  }); //.wait("@formRequest");
});

Во-вторых, может кто-то также помочь поделиться некоторыми ссылками, какотладить фреймворк на моей машине?

---

Обновления

Это тестируемое приложение принимает данные формы в следующем формате:

client[name] = "Cypress TER Client"
client[client_logo_attributes][content] = Some_Blob

С cy.Request() Я предполагаю, что должен был преобразовать это в JSON как тело запроса.Это следующее преобразование FormData в JSON:

body: {
      client: {
        name: "Cypress TER Client",
        client_logo_attributes: {
          content: "fx:../images/clients/Bull Client.jpg"
        }
      }

Я полагаю, что я делаю это неправильно.Пожалуйста, предложите.

Я проверил, как POSTMAN отправляет этот запрос, и тоже попробовал, но безуспешно.Вот код, который я попробовал:

body: qs.stringify({
      mode: "formdata",
      formdata: [
        {
          key: "client[name]",
          value: "Cypress TER Client",
          type: "text"
        },
        {
          key: "client[client_logo_attributes][content]",
          type: "file",
          src: cy.readFile("cypress//fixtures//images/clients//Bull Client.jpg")
        }
      ]
    })

---

Спасибо, Эрик.На основании ваших отзывов ниже я изменил существующий код, чтобы он выглядел следующим образом:

Cypress.Commands.add("formrequest", (method, url, formData, done) => {
  const xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.setRequestHeader("accept", "application/json");
  xhr.setRequestHeader("access-token", accesstoken);
  xhr.setRequestHeader("client", client);
  xhr.setRequestHeader("expiry", expiry);
  xhr.setRequestHeader("token-type", tokentype);
  xhr.setRequestHeader("uid", uid);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send(formData);
  xhr.onload = function() {
    done(xhr);
  };
  xhr.onerror = function() {
    done(xhr);
  };
});

Код вызова теперь выглядит следующим образом:

it.only("Test", () => {
    cy.AppLogin();

    let blobObj = cy.create_blob(
      "/images/clients/Bull Client.jpg",
      "image/jpg"
    );

    dataname = "Test FORMDATA API";
    formData = new FormData();
    formData.append("client[name]", dataname);
    formData.append("client[client_logo_attributes][content]", blobObj);

    let url = "https://admin.teamapp.myhelpling.com/admin/clients";

    let method = "POST";

    cy.formrequest(method, url, formData, function(response) {
      expect(response.status).to.eq(200);
    });
  });

Не повезло.

Этотестируемое приложение принимает данные формы в следующем формате:

client[name] = "Cypress TER Client"
client[client_logo_attributes][content] = Some_Blob

Это следующее преобразование FormData в JSON:

body: {
      client: {
        name: "Cypress TER Client",
        client_logo_attributes: {
          content: "fx:../images/clients/Bull Client.jpg"
        }
      }

Я считаю, что я делаю это неправильно,Пожалуйста, предложите.

Я проверил, как POSTMAN отправляет этот запрос, и тоже попробовал, но безуспешно.Вот код, который я попробовал:

body: qs.stringify({
      mode: "formdata",
      formdata: [
        {
          key: "client[name]",
          value: "Cypress TER Client",
          type: "text"
        },
        {
          key: "client[client_logo_attributes][content]",
          type: "file",
          src: cy.readFile("cypress//fixtures//images/clients//Bull Client.jpg")
        }
      ]
    })