多部分 formdata POST 请求在 Cypress 中对我来说不起作用

Question

没有什么对我有用。如果我使用 cy.request()，我无法使用它发送包含文本和图像的表单数据。所以我必须走XHR路线。因此，在我的 command.js 中，我使用以下代码来创建命令：-

Cypress.Commands.add("formrequest", (method, url, formData, done) => {
  cy.window().then(win => {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open(method, url, false);
      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("Accept-Encoding", null);
      xhr.onload = function() {
        done(xhr);
      };
      xhr.onerror = function() {
        done(xhr);
      };
      xhr.send(formData);
    });
  });
});

现在，当我调用它时，我将首先构造一个 BLOB，然后在我的 formdata 中使用它以稍后发送 XHR 请求。像这样： -

it.only("Test XHR", () => {
    cy.AppLogin();
    cy.fixture("/images/clients/Golden JPEG.jpeg", "binary").then(imageBin => {
      // File in binary format gets converted to blob so it can be sent as Form data
      Cypress.Blob.binaryStringToBlob(imageBin, "image/jpeg").then(blob => {
        // Build up the form
        const formData = new FormData();

        formData.set("client[name]", "Test TER"); //adding a plain input to the form

        formData.set(
          "client[client_logo_attributes][content]",
          blob
          //"Bull Client.jpg"
        ); //adding a file to the form

        // Perform the request
        cy.formrequest(method, url, formData, function(response) {
          expect(response.status).to.eq(201);
        });
      });
    });
  });

请注意，cy.AppLogin() 设置请求标头，如 accesstoken、client、expiry、tokentype 和 uid。

请参阅附件（XHRfromCypress.txt）来检查使用上面提供的代码生成的 XHR 请求。还附加了一个文件 (XHRfromCypressUI.txt)，用于显示当我从应用程序 UI 运行 cypress end-2-end 测试时发出的 XHR 请求。

我不断收到 405、方法不允许错误。

从 UI 进行 E2E 测试

API测试

E2E 测试有效，但使用上述代码的 API 测试根本不起作用。我还尝试了 cy.request() 但由于它没有显示在开发人员选项卡中，我不确定我是否正确完成了它。另外，我对我在那里使用 formdata 的方式感到怀疑。意味着 cy.request() 是否可以接受宿舍数据。

我已经导出了（E2E 和 API）XHR，以防万一需要。

我需要添加任何库才能发出 XHR 请求吗？我只在项目设置中添加了 Cypress 库。

////////////////////////////////

将所有代码移入测试用例并不能解决任何问题

it.only("POSTing", () => {
    cy.fixture("/images/clients/Golden JPEG.jpeg", "binary").then(imageBin => {
      Cypress.Blob.binaryStringToBlob(imageBin, "image/jpeg").then(blob => {
        data.set("client[name]", "Test TER fails");
        data.set("client[client_logo_attributes][content]", blob);
        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.send(data);
      });
    });
  });

Answer 1

谢谢埃里克。遵循埃里克的建议和说明，它对我有用 github.com/javieraviles/cypress-upload-file-post-form

Cypress.Commands.add(
  "Post_Clients",
  (imagePath, imageType, attr1, attr2, attr1Val, done) => {
    cy.fixture(imagePath, "binary").then(imageBin => {
      Cypress.Blob.binaryStringToBlob(imageBin, imageType).then(blob => {
        const xhr = new XMLHttpRequest();
        xhr.withCredentials = true;
        const data = new FormData();
        data.set(attr1, attr1Val);
        data.set(attr2, blob);
        xhr.open("POST", "https://api.teamapp.myhelpling.com/admin/clients");
        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.onload = function() {
          done(xhr);
        };
        xhr.onerror = function() {
          done(xhr);
        };
        xhr.send(data);
      });
    });
  }
);


it.only("API POSTing TEST", () => {
    cy.Post_Clients(
      "/images/clients/Golden JPEG.jpeg",
      "image/jpeg",
      "client[name]",
      "client[client_logo_attributes][content]",
      "Test Attr 1 Value is Hi!!!",
      response => {
        cy.writeFile(
          "cypress/fixtures/POST API OUTPUT DATA/Client.json",
          response.
        );
        expect(response.status).to.eq(201);
      }
    );
  });