如何用Cypress测试带文件上传的Web Service(API)及报错排查

当然可以用Cypress测试支持文件上传的Web Service API，你的代码里有几个关键错误导致请求返回404，下面是具体修正方案：

问题分析 #

你提到Postman用body->binary方式上传正常，但你的Cypress代码请求格式完全不符合API预期：

• 错误地将FormData包裹在对象中作为body，导致请求体被序列化为JSON
• fixture未指定二进制编码，获取的文件内容是字符串而非原始二进制数据
• 手动设置了无效的content-type: binary，API无法识别

方案一：对应Postman的Binary上传模式 #

如果API接受原始二进制数据，直接上传文件Blob即可：

cy.fixture('exampleTsv.tsv', 'binary').then((tsvExmp) => {
  // 将二进制字符串转为Blob，指定TSV对应的MIME类型
  const blob = Cypress.Blob.binaryStringToBlob(tsvExmp, 'text/tab-separated-values');
  
  cy.request({
    url: 'API-URL',
    method: 'POST',
    auth: {
      username: 'username',
      password: 'password',
    },
    body: blob, // 直接传Blob作为请求体
    headers: {
      // 用TSV专属MIME类型，或通用二进制类型application/octet-stream
      'Content-Type': 'text/tab-separated-values',
    },
  }).as('details');
  
  cy.get('@details').its('status').should('eq', 204);
  cy.get('@details').then((response) => {
    cy.log(JSON.stringify(response.body));
  });
});

方案二：如果API接受Multipart/Form-Data #

若API实际是通过表单上传（比如Postman用form-data模式），修正代码如下：

cy.fixture('exampleTsv.tsv', 'binary').then((tsvExmp) => {
  const blob = Cypress.Blob.binaryStringToBlob(tsvExmp, 'text/tab-separated-values');
  const formData = new FormData();
  formData.append('file', blob, 'exampleTsv.tsv');
  
  cy.request({
    url: 'API-URL',
    method: 'POST',
    auth: {
      username: 'username',
      password: 'password',
    },
    body: formData, // 直接传FormData对象，不要额外包裹
    // 不要手动设置content-type，Cypress会自动添加带boundary的multipart/form-data头
  }).as('details');
  
  cy.get('@details').its('status').should('eq', 204);
  cy.get('@details').then((response) => {
    cy.log(JSON.stringify(response.body));
  });
});

关键注意点 #

1. Fixture编码：必须添加'binary'参数，确保获取原始二进制文件内容
2. 请求体格式：严格匹配API的预期格式（Binary或Multipart）
3. Content-Type：手动设置时必须用正确的MIME类型，Multipart模式下让Cypress自动处理

内容的提问来源于stack exchange，提问作者Jonas