如何在Cypress中断言点击按钮后弹出的popover是否可见？

你之前代码的问题 #

• 语法错误：两段代码都存在语法不完整（如缺少括号）、方法调用错误（如next未加括号）的问题。
• 断言逻辑错误：第一个代码中.action-btn是按钮元素，不存在value属性，断言have.value完全不符合场景；第二个代码中should('This popover shows up on click')用法错误，should的参数应为断言命令而非文本内容。
• 动态选择器失效：你使用的popover966184是动态生成的ID，每次页面加载都会变化，无法作为稳定的选择器。

正确的测试代码 #

针对example.cypress.io的actions页面（该popover组件所在页面），可以通过以下方式稳定验证弹出框：

it('点击按钮后验证弹出框显示', () => {
  // 进入目标页面
  cy.visit('/commands/actions');

  // 点击"click to toggle popover"按钮
  cy.contains('click to toggle popover').click();

  // 验证弹出框容器存在且可见
  cy.get('.popover').should('be.visible');

  // 可选：验证弹出框内的文本内容匹配
  cy.get('.popover-body').should('contain', 'This popover shows up on click');
});

关键说明 #

1. 选择器稳定性：使用.popover类定位弹出框容器，而非动态ID，确保每次测试都能找到目标元素。
2. 断言准确性：用be.visible断言弹出框已显示（而非仅exist，因为exist只能判断元素在DOM中，无法确认是否可见）。
3. 元素定位优化：用cy.contains('click to toggle popover')直接定位按钮，比类选择器.action-btn更具语义性，避免页面中多个同类按钮导致的定位错误。

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