使用 Cypress 从文本文件上传多部分/表单数据

Question

我一整天都在做这件事，我真的需要朝正确的方向推动。

我的依赖是 -

  "dependencies": {
    "typescript": "^4.3.5",
    "cypress": "^8.1.0",
    "cypress-file-upload": "^5.0.8"
  } 

我有一个名为uploadBlob.txt

这就是它的样子 -

------WebKitFormBoundary7BhOPSS0NpEAppSA
Content-Disposition: form-data; name="UploadedFileName"

Prod_CA.ACI
------WebKitFormBoundary7BhOPSS0NpEAppSA
Content-Disposition: form-data; name="OrderId"

7815968_13735
------WebKitFormBoundary7BhOPSS0NpEAppSA
Content-Disposition: form-data; name="Options[orderid]"

7815968_13735
------WebKitFormBoundary7BhOPSS0NpEAppSA
Content-Disposition: form-data; name="Options[clientcode]"

1135
------WebKitFormBoundary7BhOPSS0NpEAppSA
Content-Disposition: form-data; name="Options[vendorserviceurl]"

[... 80+ More Items ...]

------WebKitFormBoundary7BhOPSS0NpEAppSA--

我想做的是这样的 -

Cypress.Commands.add("formRequest", (info: ReqInfo) => {
    cy.readFile("./fixtures/uploadBlob.txt", "utf-8").then(fixture => {
        const blob = Cypress.Blob.binaryStringToBlob(fixture, "application/text");
        const formData = new FormData();
        formData.append('file', blob, "uploadBlob.txt");

        return cy.request({
            url: info.url,
            method: info.method,
            headers: info.headers,
            form: true,
            body: formData
        })
    })
});

info看起来像这样 -

let info : ReqInfo = {
   method: "POST",
   url : 'https://uat-delivery.acisky.com/Delivery/bkfs/Start',
   headers: {
       'Authority': 'uat-delivery.acisky.com',
       'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary7BhOPSS0NpEAppSA',
       'Path': '/DeliveryUpload/bkfs/UploadFile',
       'sec-fetch-dest': 'empty',
       'sec-fetch-mode': 'cors',
       'sec-fetch-site': 'same-origin',
       }
 }

这是我收到的错误 -

From Node.js Internals:
  TypeError [ERR_INVALID_ARG_TYPE] [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received undefined
      at Function.from (buffer.js:333:9)
      at Object.sendPromise 

最后我尝试了XMLHttpRequest()基于这些的多次迭代 -

• 在 Cypress 中，使用 POST 请求发送表单数据不起作用
• 多部分 formdata POST 请求在 Cypress 中对我来说不起作用
• 如何使用 Cypress 上传 txt 文件进行 API 测试 - XMLHTTPRequest？

例如 -

Cypress.Commands.add("formRequest", (info: ReqInfo) => {
    cy.readFile("./fixtures/uploadBlob.txt", "utf-8").then(fixture => {
        const blob = Cypress.Blob.binaryStringToBlob(fixture, "application/text");
        const formData = new FormData();
        formData.append('file', blob, "uploadBlob.txt");

        const xhr = new XMLHttpRequest();
        xhr.responseType = 'text';
        xhr.onload = function () {
            if (xhr.readyState === xhr.DONE) {
                if (xhr.status === 200) {
                    console.log(xhr.response);
                    console.log(xhr.responseText);
                }
            }
        };

        xhr.open(info.method, info.url);
        xhr.setRequestHeader("accept", "application/json");
        xhr.setRequestHeader("content-Type", "multipart/form-data");
        xhr.setRequestHeader('Authority', 'uat-delivery.acisky.com'),
        xhr.send(formData);

    })

但在这里我收到错误 -

{"errors":["No file found in request"]}

即使我可以看到它ReadFile工作正常。

我使用 readFile/fixture 路线的原因WebKitBoundry是因为有超过 80 个“字段”，并且将来我们将需要该文件的 20-30 个变体。

如果有人对如何完成这项任务有任何想法，我会很乐意提供帮助。

谢谢

Answer 1

下面的例子可以帮助你：

    cy.fixture("xml.xml", 'binary')
        .then((file) => Cypress.Blob.binaryStringToBlob(file))
        .then((blob) => {

            var formdata = new FormData();
            formdata.append("file", blob, "xml.xml");

            cy.request({
                url: "/api",
                method: "POST",
                headers: {
                    Authorization: `bearer ${token}`,
                    'content-type': 'multipart/form-data'
                },
                body: formdata
            }).its('status').should('be.equal', 200)
        })

为了在 cypress 中使用 multipart/form-data，我们需要创建FormData上面调用的实例。