Cypress点击提交按钮后无法打开搜索结果页面求助

你的问题核心在于type="submit"的按钮会触发表单的默认提交行为，在Cypress的点击操作中，这个默认行为可能先于Vue的submitForm()方法执行，导致页面提前刷新，而actionUrl还未被正确更新，最终无法跳转到预期的搜索结果页。手动操作时浏览器的事件执行顺序与Cypress中存在差异，因此手动正常但自动化测试异常。

解决方案1：临时修改按钮类型，避免默认提交 #

将按钮的type从submit改为button后再点击，这样就不会触发表单的默认刷新，确保Vue的submitForm()方法优先执行：

cy.get('groupui-button[icon="search-24"]')
  .invoke('attr', 'type', 'button') // 临时修改type属性
  .click({force: true})

// 若submitForm()更新actionUrl后需要手动触发表单提交，可继续执行：
cy.get('groupui-button[icon="search-24"]').closest('form').submit()

解决方案2：直接调用Vue组件的submitForm方法 #

跳过按钮点击，直接获取Vue实例并调用submitForm()，再触发表单提交，确保actionUrl先更新：

// 先确保搜索输入已填写（如果需要）
cy.get('input[type="text"]').type('你的搜索内容')

cy.get('groupui-button[icon="search-24"]').then($btn => {
  // 获取Vue组件实例（Vue 2中元素暴露__vue__属性，Vue 3可能需要调整）
  const vueInstance = $btn[0].__vue__
  // 执行submitForm更新actionUrl
  vueInstance.submitForm()
})

// 触发表单提交跳转
cy.get('groupui-button[icon="search-24"]').closest('form').submit()

解决方案3：阻止表单默认提交事件 #

先给按钮所在的表单添加submit事件拦截，防止页面提前刷新，再点击按钮执行Vue逻辑：

// 拦截表单默认提交行为
cy.get('groupui-button[icon="search-24"]').closest('form').on('submit', e => {
  e.preventDefault()
})

// 点击按钮执行submitForm
cy.get('groupui-button[icon="search-24"]').click({force: true})

// 手动提交表单（此时actionUrl已更新）
cy.get('groupui-button[icon="search-24"]').closest('form').submit()

验证步骤 #

执行上述方案后，可添加断言验证actionUrl是否正确生成：

cy.get('groupui-button[icon="search-24"]').then($btn => {
  const vueInstance = $btn[0].__vue__
  cy.wrap(vueInstance).its('actionUrl').should('include', 'elpmSearchString=你的搜索内容')
})

内容的提问来源于stack exchange，提问作者Sorbon I.