Cypress移除target属性仍弹新窗口问题及连续移除属性方案

一、移除target后仍弹窗的原因分析 #

• 元素定位错误：你用的选择器tbody > :nth-child(1) > :nth-child(1)大概率选中的是<td>单元格，而非内部带target属性的<a>标签。移除父元素的属性根本不影响子链接的跳转行为，点击时自然还是弹出新窗口。
• 动态属性被重写：页面可能通过JS脚本动态给元素重新添加了target属性，你刚移除就被覆盖了。硬写cy.wait(5000)不可靠，不如用断言确保元素稳定后再操作。
• 命令链触发对象偏差：如果元素嵌套层级深，click()可能没触发你修改过属性的元素，而是触发了子元素的默认跳转行为。

修正后的单元素操作代码 #

cy.visit('https://staging.robo.academy/customers')
cy.url().should('eql','https://staging.robo.academy/customers')

// 直接定位到带target的<a>标签，确保修改的是目标元素
cy.get('tbody tr:first-child td:first-child a')
  .invoke('removeAttr', 'target')
  .should('not.have.attr', 'target') // 断言属性已移除，确保操作生效
  .click()

二、连续移除多个元素属性的解决方案 #

不要依赖硬等待，针对每个元素做精准定位+断言验证，确保每一步操作生效后再执行下一步：

cy.visit('https://staging.robo.academy/customers')
cy.url().should('eql','https://staging.robo.academy/customers')

// 第一个元素：表格第一行第一列的链接
cy.get('tbody tr:first-child td:first-child a')
  .invoke('removeAttr', 'target')
  .should('not.have.attr', 'target')
  .click()

// 第二个元素：card-actions下的链接，Cypress会自动等待页面跳转后元素加载完成
cy.get('.card-actions > a')
  .invoke('removeAttr', 'target')
  .should('not.have.attr', 'target')
  .click()

额外优化建议 #

• 避免用nth-child这类易变选择器，尽量用元素文本、data属性等稳定标识定位，比如cy.contains('客户详情').invoke('removeAttr', 'target')。
• 如果元素是动态渲染的，可增加cy.get(selector).should('be.visible')确保元素就绪后再操作。

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