Cypress拦截POST请求时JSON输入异常，如何用变量传JSON数据？

错误原因分析 #

你的代码存在两个核心问题：

1. cy.intercept的fixture参数使用错误：fixture选项仅接受fixture文件的路径字符串（比如'percentage.json'），用来让Cypress自动读取对应文件并解析为JSON响应。你直接传入${case1}会把对象转成字符串[object Object]，Cypress会尝试查找这个不存在的文件，最终抛出JSON解析错误。
2. 异步命令执行顺序问题：Cypress命令是异步队列执行的，cy.fixture()的then回调会晚于后续的cy.visit()和cy.intercept()执行，导致执行拦截时case1还是初始的空数组，根本没拿到期望的测试数据。

正确解决方案 #

将页面访问、请求拦截逻辑放在cy.fixture()的回调内，确保拿到数据后再执行后续操作，同时直接用body选项返回JSON对象作为响应体：

it('displays game over screen when user cannot make at least 63%', () => {
  cy.fixture('percentage.json').then((testData) => {
    const case1 = testData[0]
    
    // 先拿到数据，再访问页面
    cy.visit('http://localhost:5173/game_finished')
    
    // 用body直接返回测试数据对象
    cy.intercept("POST", "http://localhost:3000/api/visitantes/sumuserpoints", {
      body: case1
    })
    
    // 注意：这里需要添加触发POST请求的操作（比如页面按钮点击）
    // cy.get('#submit-score').click()
  })
})

补充说明 #

• 如果需要复用fixture数据，也可以使用别名方式：

  it('displays game over screen when user cannot make at least 63%', () => {
    cy.fixture('percentage.json').as('testData')
    
    cy.get('@testData').then((testData) => {
      const case1 = testData[0]
      cy.visit('http://localhost:5173/game_finished')
      cy.intercept("POST", "http://localhost:3000/api/visitantes/sumuserpoints", {
        body: case1
      })
      // 触发请求的操作
    })
  })
  

• 若需要修改fixture中的数据，可在回调内直接修改后再传入body，比如调整percentage的值：

  const case1 = {...testData[0], percentage: 60}
  

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