如何在Cypress中捕获鼠标悬停时的提示框文本？

已实现的悬停操作 #

• 已成功通过两种方式触发元素悬停：
  • cy.get('div').contains('Another Sample KPI').next('*[name="info"]').trigger('mouseenter')
  • cy.get('div').contains('Another Sample KPI').next('*[name="info"]').realHover()

当前核心问题 #

悬停后无法捕获提示框文本，提示框元素未出现在DOM结构中

针对性解决方案 #

1. 确认是否为原生title提示框 #

如果提示框是通过元素的title属性生成的原生浏览器提示，直接获取属性值即可：

cy.get('div').contains('Another Sample KPI').next('*[name="info"]')
  .invoke('attr', 'title')
  .should('include', '你要验证的提示文本')

2. 检查是否在Shadow DOM内 #

若提示框被封装在Shadow DOM中，需通过.shadow()穿透访问：

// 先定位到包含Shadow DOM的宿主元素，再查找内部提示框
cy.get('宿主元素选择器').shadow().find('提示框元素选择器')
  .invoke('text')
  .should('contain', '目标提示文本')

3. 添加渲染等待时间 #

可能悬停后提示框渲染有延迟，增加显式等待：

cy.get('div').contains('Another Sample KPI').next('*[name="info"]').realHover()
// 自定义超时时间，等待提示框出现
cy.get('提示框的CSS选择器', { timeout: 5000 })
  .invoke('text')
  .should('not.be.empty')

4. 排查是否为CSS伪元素实现的提示 #

如果提示框是通过::after/::before伪元素生成的，通过计算样式获取内容：

cy.get('div').contains('Another Sample KPI').next('*[name="info"]')
  .realHover()
  .then($element => {
    const tooltipContent = window.getComputedStyle($element[0], '::after').content
    expect(tooltipContent).to.contain('预期的提示内容')
  })

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