Cypress修改/移除target属性后链接仍在新标签页打开的问题

问题背景 #

目标元素为带空href和target="_blank"的链接：

<a href="" target="_blank" class="proof proofLink">
  <div class="lefticon-icon icon-proof">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle-thin fa-stack-2x"></i>
      <i class="fa fa-eye fa-stack-1x"></i>
    </span>
  </div>
</a>

点击该链接时，页面通过JS动态生成跳转链接，但以下尝试均失效：

• 修改target为_self或移除target属性后点击
• 拦截window.open的stub方案
• 无法直接使用cy.visit()（因href为空）
  环境：Cypress 13.6.4/13.12.0，Node.js 18.17.1

可行解决方案 #

1. 直接触发原生点击事件或内部元素点击

部分页面的跳转逻辑绑定在链接内部的子元素（如<div>/<span>），而非<a>标签本身，或通过自定义事件阻止了默认行为。尝试：

// 触发原生点击事件，绕过自定义事件拦截
cy.get('a.proof.proofLink').then($a => {
  const nativeClick = new MouseEvent('click', { bubbles: true, cancelable: true });
  $a[0].dispatchEvent(nativeClick);
});

// 或者直接点击内部子元素
cy.get('a.proof.proofLink > div.lefticon-icon').click({ force: true });

2. 提前拦截window.open并接管跳转

之前的stub时机可能滞后，需在页面加载前就拦截window.open，并将跳转导向当前标签页：

cy.visit('my app', {
  onBeforeLoad(win) {
    cy.stub(win, 'open').callsFake((url) => {
      // 拦截后直接在当前标签页访问生成的URL
      if (url) cy.visit(url);
      return null; // 阻止默认新窗口打开
    }).as('windowOpen');
  }
});

pageObject.myMethod();

// 验证是否触发了window.open
cy.get('@windowOpen').should('have.been.called');

3. 检查页面JS是否重置target属性

部分页面会在点击事件中动态重置target属性，可通过调试确认：

cy.get('a.proof.proofLink')
  .invoke('removeAttr', 'target')
  .should('not.have.attr', 'target') // 确认属性已移除
  .click()
  .then($a => {
    // 点击后打印属性，检查是否被页面JS重置
    console.log('点击后target属性:', $a.attr('target'));
  });

若发现属性被重置，可在点击前添加cy.intercept拦截修改属性的JS请求，或直接覆盖页面的事件处理函数。

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