Javascript 使用请求正文中的文件进行HTTP POST时出现Cypress错误

我从Cypress 6.8.0升级到7.0.1。升级后，当某个Cypress测试调用此函数时

async saveTask (task, file) {
  const requestBody = new FormData()
  requestBody.append('file', file)

  return await http.post('/api/endpoint', requestBody, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
},

我得到以下错误

TypeError [ERR_INVALID_ARG_TYPE] [ERR_INVALID_ARG_TYPE]: 
The first argument must be of type string or an instance of Buffer or Uint8Array. Received type number (45)
    at write_ (_http_outgoing.js:696:11)
    at ClientRequest.write (_http_outgoing.js:661:15)
    at Request.write (/Users/donal/Library/Caches/Cypress/7.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/request/request.js:1496:27)
    at /Users/donal/Library/Caches/Cypress/7.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/request/request.js:546:20
    at Array.forEach (<anonymous>:null:null)
    at end (/Users/donal/Library/Caches/Cypress/7.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/request/request.js:545:23)
    at Immediate._onImmediate (/Users/donal/Library/Caches/Cypress/7.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/request/request.js:578:7)
    at processImmediate (internal/timers.js:461:21)
 {
  code: 'ERR_INVALID_ARG_TYPE'
}

因此，我想我需要将

文件

对象转换为其他对象，这样这个函数既可以在应用程序本身中工作，也可以在Cypress运行时工作

在服务器端（Spring Boot应用程序），此文件绑定到一个

多部分文件

public void handlePost(
    RequestPart(value = "file") MultipartFile file) {

    // controller action body       
}

如果我的理论认为

文件

类型是问题所在，那么我应该使用什么来代替，我应该如何进行转换

该错误仅在通过Cypress测试运行函数时发生。 Cypress使用Node.js，从上面的错误消息来看 不允许使用该文件类型。此外，Axios请求配置 文档表明，当Axios在节点下运行时，不允许使用文件

  // `data` is the data to be sent as the request body
  // Only applicable for request methods 'PUT', 'POST', 'DELETE , and 'PATCH'
  // When no `transformRequest` is set, must be of one of the following types:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browser only: FormData, File, Blob
  // - Node only: Stream, Buffer
  data: {
    firstName: 'Fred'
  },

默认情况下，

Cypress

以无头模式启动

Electron

，即测试始终可以访问浏览器API。您可以控制要在哪个浏览器上运行测试。更多细节

现在让我们看看文件上传的解决方案

假设您在函数

saveTask

中引用的

文件

是

类型=文件

和

名称=文件

的

输入

字段

比如说，你需要上传一个名为

email.png

的png图像，它位于

cypress/fixtures/images/email.png

使用以下代码块上载文件

 cy.fixture('images/email.png').as('emailImage')
   cy.get('input[name=file]').then(function (el) {
     const blob = Cypress.Blob.base64StringToBlob(this.emailImage, 'image/png')
     const file = new File([blob], 'email.png', { type: 'image/png' })
     const list = new DataTransfer()
     list.items.add(file)
     el[0].files = list.files
     el[0].dispatchEvent(new Event('change', { bubbles: true }))
 })
 

现在，您可以触发调用上载api（/api/endpoint）所基于的操作，并最终验证上载是否成功

 // Trigger the action which causes the upload api to be invoked e.g. clicking on a button
 cy.get('input[type=button]').click();
 
 // Verify the api invocation is successful (The below code checks a div with id result to have the String 'Success')
 cy.get('#result').should('contain', 'Success');

---

您可以上传任何类型的文件，而不必是图像。有关更多信息，请参阅和。这个答案是基于Blob文档的。

看起来这个问题你可以把它放到你的表单中

你知道这在Cypress 7.X中是否有效吗？它在Cypress 7.X中有效。我使用“版本”进行了测试：“7.0.1”。@Dónal这里有一个示例项目，它使用GitHub操作在CI上运行测试，服务器是一个Spring boot应用程序（作为CI服务器上的Docker容器运行），其代码位于