赛普拉斯错误在请求正文中使用文件进行 HTTP POST

Question

我从 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'
}

在http我使用，使POST请求是爱可信实例和对象file，我追加到请求主体对象是文件。文件对象是问题的原因，因为如果我不将其附加到请求正文中，则不会发生错误。

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

  // `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'
  },

所以我想我需要将File对象转换为别的东西，这样这个函数就可以在应用程序本身中工作，也可以在赛普拉斯运行时工作。

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

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

    // controller action body       
}

如果我认为File类型是问题的理论，我应该使用什么，我应该如何进行转换？

Answer 1

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

默认情况下以无头模式Cypress启动Electron，即测试始终可以访问浏览器 API。您可以控制要在哪个浏览器上运行测试。更多详细信息请参见此处。

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

假设file您在函数中引用的saveTask是和input的字段。type=filename=file

假设您需要上传一个名为 的 pngemail.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');

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

此存储库使用 GitHub Actions https://github.com/GSSwain/file-upload-cypress-test在 CI 上运行测试，服务器是 Spring boot 应用程序（在 CI 服务器上作为 Docker 容器运行）代码位于https： //github.com/GSSwain/file-upload-ajax-sample