如何用Cypress实现卡牌游戏发牌及多标签页切换自动化测试？

针对卡牌游戏需要在父/子标签页间切换执行发牌操作的需求，以下是几种可行的实现方案，替代无效的cy.invoke('removeAttr', 'target')方法：

1. 拦截window.open模拟多标签页操作 #

Cypress原生对多标签页支持有限，拦截浏览器的window.open行为是最稳定的方案之一。通过获取新标签页的URL，在当前上下文访问该页面完成操作后回退：

let newTabUrl;

// 拦截window.open，记录新窗口URL
cy.window().then(win => {
  cy.stub(win, 'open').callsFake(url => {
    newTabUrl = url;
    return win.open.wrappedMethod.call(win, url);
  });
});

// 触发打开子标签页的操作（比如点击对应按钮）
cy.get('.open-user-game-btn').click();

// 访问子页面，执行发牌操作
cy.visit(newTabUrl);
cy.get('.deal-card-btn').click();

// 回退到父页面，执行发牌给用户的操作
cy.go('back');
cy.get('.send-card-to-user-btn').click();

2. 通过窗口句柄切换 #

如果需要保留真实的多窗口上下文，可以通过保存父窗口引用，切换焦点实现操作：

let parentWindow;

// 保存父窗口引用
cy.window().then(win => {
  parentWindow = win;
});

// 在新窗口加载子页面，标记子窗口方便识别
cy.visit('/user-card-game', {
  onBeforeLoad(win) {
    win.isChildWindow = true;
  }
});

// 子窗口执行发牌
cy.get('.deal-card-btn').click();

// 切回父窗口
cy.window({ log: false }).then(win => {
  if (win.isChildWindow) {
    parentWindow.focus();
    cy.window({ log: false }).its('top').as('parentWindow');
  }
});

// 父窗口执行发牌给用户的操作
cy.get('.send-card-to-user-btn').click();

3. 直接提取链接URL访问 #

如果触发新标签页的是<a>标签，直接提取其href属性值访问页面，规避target属性的问题：

// 获取链接的URL
cy.get('.open-user-tab-link').invoke('attr', 'href').then(href => {
  // 访问子页面执行发牌
  cy.visit(href);
  cy.get('.deal-card-btn').click();
  
  // 返回父页面完成后续操作
  cy.go('back');
  cy.get('.send-card-to-user-btn').click();
});

关于cy.invoke('removeAttr', 'target')无效的可能原因 #

• 元素是动态渲染的，执行removeAttr时元素尚未完全加载
• 点击事件绑定在父元素而非<a>标签本身，移除target后点击仍触发新标签页
• 页面有自定义JS逻辑阻止了target属性的修改

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