Cypress点击表单submit按钮重定向至baseurl登录页 提交数据未生效

核心原因&对应解决手段 #

• 鉴权状态失效
  Cypress 默认开启测试上下文隔离，若前置登录步骤未正确缓存登录态，表单提交时后端校验鉴权失败会直接重定向到登录页，不会执行数据写入逻辑。
  操作步骤：

  1. cypress.config.js 中开启跨域登录态支持：

  module.exports = defineConfig({
    e2e: {
      experimentalSessionAndOrigin: true,
    }
  })
  

  2. 登录逻辑用 cy.session() 封装，确保整个测试流程登录态持久化
  3. 提交表单前增加登录态校验断言：cy.getCookie('你的业务登录态Cookie名称').should('exist')

• 请求未完成就终止用例
  点击提交按钮后用例直接结束，Cypress 会中断未完成的异步请求，导致后端未接收到完整的表单提交参数。
  操作步骤：
  用 cy.intercept 监听提交接口，等接口返回后再结束用例：

  // 提前监听表单提交的POST接口
  cy.intercept('POST', '/api/你的表单提交路径').as('formSubmit')
  // 点击提交按钮
  cy.get('button[type="submit"]').click()
  // 等待接口返回200后再执行后续断言
  cy.wait('@formSubmit').its('response.statusCode').should('eq', 200)
  // 校验跳转路径不是登录页
  cy.url().should('not.contain', '/login')
  

• 表单值未同步到提交参数
  主流前端框架的封装表单组件（如Ant Design Form、Element Plus Form）需要触发change事件才会把输入值同步到表单模型，Cypress 默认type()输入可能未触发对应事件，导致提交空参数被后端拦截。
  操作步骤：
  输入后主动触发change事件：

  cy.get('input[name="字段名"]').type('测试数据').trigger('change')
  

• 提交事件未正确触发
  若业务逻辑绑定的是form标签的submit事件而非按钮的click事件，直接点击按钮可能不会触发表单提交逻辑。
  操作步骤：
  直接触发表单的提交事件：

  cy.get('form#你的表单ID').submit()
  

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