如何在Cypress中验证鼠标悬停后出现的tooltip文本？

你现有写法失效的核心原因有两个：一是不需要额外触发show事件，二是大部分前端UI库的Tooltip组件是独立挂载在<body>根节点下，不属于你选中的目标元素的子节点，直接在cy.get(ele)后断言文本自然匹配不到。

你可以按照以下步骤调整代码：

• 首先确保你已经正确安装配置了cypress-real-events插件，Cypress原生的hover()方法不支持触发真实悬停事件，必须依赖该插件实现相关能力。
• 触发目标元素的悬停，不需要额外调用trigger('show')：

  cy.get(ele).realHover()
  

• 手动触发一次Tooltip后打开浏览器开发者工具，找到Tooltip对应的DOM选择器，不同UI库的Tooltip类名有差异，比如Ant Design对应.ant-tooltip、Element UI对应.el-tooltip__popper，找到后单独选中Tooltip节点做断言：

  // 把.tooltip-selector替换成你实际查到的Tooltip元素选择器
  cy.get('.tooltip-selector')
    .should('be.visible')
    .and('contain.text', text)
  

• 如果你的Tooltip是挂载在目标元素内部的，也可以从目标元素向下查找：

  cy.get(ele).realHover()
    .find('.tooltip-selector')
    .should('be.visible')
    .and('contain.text', text)
  

• 如果Tooltip存在渲染延迟，可以给节点查询增加超时配置：

  cy.get('.tooltip-selector', { timeout: 3000 })
    .should('be.visible')
    .and('contain.text', text)
  

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