多重表单数据POST请求对我而言在赛普拉斯中不起作用

问题描述

没有任何东西适合我.如果我使用cy.request()，则无法使用它发送包含文本和图像的formdata.因此，我必须通过XHR路线.因此，在我的command.js中，我使用了以下代码来创建命令:-

Nothing works for me. If I use cy.request(), I'm unable to send formdata with it which contains a text and an image. So I've to go via XHR route. So, in my command.js I've used the following code to create a command: -

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，然后在表单数据中使用它，以便稍后发送XHR请求.像这样:-

Now, when I'm calling it I will first construct a BLOB and then use it in my formdata to later send the XHR request. Like this: -

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.

Please note that cy.AppLogin() sets up the request headers like accesstoken, client, expiry, tokentype and uid.

请参考附件文件(XHRfromCypress.txt)，以检查使用上面提供的代码生成的XHR请求.另外还附有一个文件(XHRfromCypressUI.txt)，用于显示从应用程序UI运行cypress end-2-end测试时发出的XHR请求.

Kindly refer to the attached file (XHRfromCypress.txt) for checking the XHR request being generated using the code provided above. Also attached is a file (XHRfromCypressUI.txt) for showing XHR request being made when I did run my cypress end-2-end test from application UI.

我不断收到405，方法不允许错误.

I'm constantly getting 405, Method not allowed error.

用户界面的端到端测试

API测试

端到端测试有效，但是使用上述代码的API测试根本行不通.我也尝试了cy.request()，但是由于它没有显示在开发人员"选项卡中，因此我不确定自己是否正确完成了操作.另外，我对在那里使用formdata的方式表示怀疑.表示cy.request()是否甚至可以接受dormdata.

E2E test works but API test using above code simply doesn't work. I also tried cy.request() but as it is not shown in the developers tab I'm not sure I've done it correctly. Also, i'm doubtful about the way I used formdata in there. Means whether cy.request() can even accept dormdata.

我已经导出(E2E和API)XHR，以防万一.

I've both (E2E and API) XHR's exported, just in case those are needed.

我需要添加任何库来发出XHR请求吗?我只是在项目设置中添加了赛普拉斯库.

Do I need to add any libraries to make XHR request? I've aonly added Cypress library in my project setup.

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

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

将所有代码移入测试用例都无法解决任何问题

Moving all code into Test Case neither fixes anything

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);
      });
    });
  });

推荐答案

感谢Eric.它遵循github.com/javieraviles/cypress-upload-file-post-form

Thanks Eric. It works for me following Eric's advise and instructions mentioned at 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);
      }
    );
  });

这篇关于多重表单数据POST请求对我而言在赛普拉斯中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！