如何解决Cypress点击按钮后自动打开新标签页的问题

针对你移除target属性后仍打开新标签页的情况，可能是跳转逻辑并非由target属性触发，或是定位元素不准确，以下是几种可行的解决办法：

1. 确认并定位实际触发跳转的元素 #

如果按钮内部嵌套了<a>标签，实际跳转由<a>标签的target属性控制，你之前移除的是按钮本身的target，自然无效。需要定位到实际的跳转元素：

// 假设按钮内有a标签，定位到a标签移除target
cy.get('button a').invoke('removeAttr', 'target').click()

2. 拦截JavaScript触发的新窗口打开 #

如果跳转是通过window.open()这类JS代码实现的，直接移除target没用，需要拦截window.open调用：

// 拦截window.open并保存为别名
cy.window().then(win => {
  cy.stub(win, 'open').as('openNewTab')
})

// 点击按钮
cy.get('button').click()

// 验证拦截到调用，然后直接访问目标URL
cy.get('@openNewTab').then(stub => {
  const targetUrl = stub.args[0][0]
  cy.visit(targetUrl)
})

3. 确保target属性确实被移除后再点击 #

有时页面会动态设置target属性，需要确认属性移除成功后再执行点击：

cy.get('button')
  .invoke('removeAttr', 'target')
  .should('not.have.attr', 'target') // 断言属性已移除
  .click()

4. 阻止点击的默认行为 #

如果跳转是浏览器默认行为，可在点击时阻止默认事件：

cy.get('button').click({ preventDefault: true })

// 或者手动绑定阻止默认事件后再点击
cy.get('button').then($btn => {
  cy.wrap($btn).on('click', e => e.preventDefault())
  $btn.click()
})

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