使用Cypress无法点击确认弹窗"Yes"按钮及相关自动化验证需求

首先得明确你的确认对话框是原生JavaScript的confirm弹窗还是自定义的模态对话框，这两种情况的处理方式完全不同，我分别给你针对性的解决方案：

情况1：自定义模态对话框（最常见场景） #

如果是开发团队自己实现的弹窗（比如用div、button组合的自定义组件），直接定位元素操作即可：

1. 解决无法点击"Yes"按钮的问题 #

先确保能精准定位到按钮，优先通过文本、类名或专属属性定位，同时等待元素处于可交互状态：

// 等待对话框完全加载可见
cy.get('.custom-confirm-modal').should('be.visible');
// 定位Yes按钮并点击（如果点击无响应，可加enabled校验或force参数）
cy.get('.custom-confirm-modal button').contains('Yes')
  .should('be.enabled')
  .click();
// 极端情况（元素被遮挡但确实需要点击）可使用force参数：.click({force: true})

2. 验证鼠标悬停时按钮颜色变化 #

需要先获取按钮默认状态的颜色，再触发悬停动作，对比颜色差异：

// 存储按钮默认背景色（根据需求可替换为color等其他样式属性）
cy.get('.custom-confirm-modal button').contains('Yes')
  .invoke('css', 'background-color')
  .as('defaultBtnColor');

// 触发鼠标悬停事件
cy.get('.custom-confirm-modal button').contains('Yes').trigger('mouseover');

// 对比悬停后的颜色与默认颜色不同
cy.get('.custom-confirm-modal button').contains('Yes')
  .invoke('css', 'background-color')
  .then((hoverColor) => {
    cy.get('@defaultBtnColor').should('not.equal', hoverColor);
  });

注意：CSS返回的颜色格式可能是rgb、hex或rgba，若格式不一致可手动统一转换后再对比（比如把rgb转成hex）。

3. 验证点击"Yes"后弹出另一个确认对话框 #

点击Yes后，等待新对话框出现并验证其存在：

// 点击第一个对话框的Yes按钮
cy.get('.custom-confirm-modal button').contains('Yes').click();

// 验证第二个对话框加载完成并可见
cy.get('.second-confirm-modal').should('be.visible');
// 可选：验证第二个对话框的内容（比如标题或提示文本）
cy.get('.second-confirm-modal').contains('Final confirmation required?').should('be.visible');

情况2：原生JavaScript confirm弹窗 #

如果是浏览器自带的原生confirm弹窗，需要通过监听Cypress的window:confirm事件来处理：

1. 解决无法点击"Yes"按钮的问题 #

用事件监听模拟点击确认操作：

// 监听confirm事件，返回true表示点击"Yes"
cy.on('window:confirm', (popupText) => {
  // 可选：验证弹窗文本是否符合预期
  expect(popupText).to.equal('Are you sure you want to continue?');
  return true;
});
// 触发弹出confirm的前置操作（比如点击某个触发按钮）
cy.get('#trigger-confirm-btn').click();

2. 验证鼠标悬停时按钮颜色变化（原生弹窗不支持） #

原生confirm弹窗的按钮样式由浏览器默认控制，无法通过Cypress直接操作和验证hover状态的样式变化。这种情况建议和开发沟通改成自定义模态框，或者放弃该验证项。

3. 验证点击"Yes"后弹出另一个确认对话框 #

若点击第一个confirm后会触发第二个confirm，需要连续监听事件：

// 处理第一个confirm：点击Yes
cy.on('window:confirm', (text) => {
  expect(text).to.equal('First confirmation prompt');
  return true;
});
// 触发第一个confirm弹窗
cy.get('#trigger-first-confirm').click();

// 处理第二个confirm：验证其出现并可操作
cy.on('window:confirm', (text) => {
  expect(text).to.equal('Second confirmation prompt');
  return true; // 若需点击Yes返回true，点击No返回false
});
// 无需额外触发，第一个confirm的Yes点击会自动触发第二个弹窗

常见排查小技巧 #

• 若定位不到元素，可打开Cypress DevTools，用cy.get('body').find('button').contains('Yes')逐步缩小范围，确认选择器正确性；
• 悬停验证失败时，检查按钮的hover样式是否通过:hover伪类实现，Cypress的trigger('mouseover')会正确触发伪类状态；
• 自定义模态框需等待完全渲染，务必用.should('be.visible')确保元素加载完成后再操作。

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