Cypress拦截reply中无法设置Fixture文件类型的问题

问题根源在于Cypress默认将Fixture文件以UTF-8文本格式读取，而MIDI属于二进制文件，转码后会破坏原有字节结构，导致浏览器解析时出现文件损坏报错。要解决这个问题，需要手动读取二进制格式的Fixture文件，再在拦截响应中返回原始字节数据。

解决方案代码 #

const fs = require('fs');
const path = require('path');

cy.intercept("**/MIDI/*", (req) => {
  const fixtureName = get_last_part_of(req.url); // 获取目标MIDI文件名，如1.mid
  // 拼接Fixture文件的完整路径
  const fixtureFullPath = path.join(Cypress.config('fixturesFolder'), 'midi', fixtureName);
  // 以二进制格式读取文件（encoding: null会返回原始Buffer）
  const midiBinary = fs.readFileSync(fixtureFullPath, { encoding: null });
  
  req.reply({
    headers: {
      'content-type': 'audio/sp-midi',
      'content-length': midiBinary.length.toString() // 必须设置正确的内容长度，确保完整传输
    },
    body: midiBinary // 返回原始二进制Buffer数据
  });
});

关键说明 #

• 放弃使用fixture字段：该字段默认按UTF-8解析文件，会直接损坏二进制MIDI数据，导致解析错误。
• 用Node.js原生模块读取文件：Intercept的处理函数运行在Node环境中，可直接使用fs.readFileSync同步读取文件，通过encoding: null获取未转码的原始Buffer。
• 完善响应头：除了指定正确的content-type，必须添加content-length，确保浏览器能完整接收二进制数据。

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