点击按钮时Cypress抛出POST 400 XHR错误的技术求助

手动点击跳转按钮时，浏览器网络面板无任何错误；用Cypress打开浏览器加载应用也正常，但运行自动化脚本点击该按钮后，始终抛出POST 400错误，参考过类似问题仍未解决。

Test.js 代码 #

describe ('Test', function()
{

 it('Login', function(){

 cy.url().should('include', '<url goes here>');
 cy.wait(3000)
 cy.get('h1').should('have.text', "WELCOME")  

 cy.get('button').contains("submit").click() ////执行到此处正常，点击后出现POST 400错误

 })
}
)

HTML 按钮代码 #

<button class="MuiButtonBase-root MuiButton-root MuiButton-contained" tabindex="0" type="button">
  <span class="MuiButton-label"> submit</span>
</button>

自动化脚本运行错误信息 #

(xhr) POST 400 : <api-url> 
This is the response on the network tab => Failed to load response data : No resource with given identifier found.

排查方向 #

• 对比请求参数差异：手动操作和Cypress脚本执行时，检查POST请求的参数（表单数据、请求头、Cookie等）是否一致。用cy.intercept拦截请求并打印详情，和手动请求对比：

  cy.intercept('POST', '<api-url>').as('submitRequest');
  cy.get('button').contains("submit").click();
  cy.wait('@submitRequest').then((interception) => {
    console.log('请求体:', interception.request.body);
    console.log('请求头:', interception.request.headers);
  });
  

• 确保页面完全就绪：替换固定等待cy.wait(3000)为等待必要的异步请求完成或元素状态就绪，比如等待某个关键XHR请求结束后再点击按钮。
• 同步存储状态：手动操作时浏览器的Cookie、localStorage等状态，可能和Cypress运行环境不一致。可以在脚本中手动设置必要的存储值，或确保登录状态正确传递。
• 精准定位按钮：页面可能存在多个含"submit"的按钮，尝试用更精确的定位器，比如结合class：cy.get('button.MuiButton-contained').contains("submit").click()，确认点击的是目标按钮。
• 查看后端错误日志：网络面板无法加载响应数据时，直接查看后端日志，确认400错误的具体原因（比如参数缺失、格式不合法等）。

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