求助：Selenium如何获取无属性的悬浮提示框（Tooltip）内容

问题背景 #

目标按钮在鼠标悬浮时会添加is-hover类，但按钮的title属性为空，调用.getText()、直接获取属性均无法捕获屏幕显示的提示文本，页面基于React开发。相关HTML结构如下：

<div class="taxButton">
    <span class="calculateButton">
        <button tabindex="0" aria-disabled="false" title=""
                class="v-Button danger was-active is-hover tax-flag-banner tax-btn  TaxFlags flagStyle"
                role="button">
            <i class="icon"></i>
            <span class="label">Tax</span>
        </button>
    </span>
</div>

可行解决方案 #

• 查找动态生成的独立Tooltip DOM元素
  多数React组件库（如Ant Design、Material UI）的Tooltip是悬浮时动态插入到body下的独立容器，并非按钮的子元素。操作步骤：

  1. 鼠标悬浮按钮，打开浏览器开发者工具的Elements面板，查找新增的DOM节点（通常类名包含tooltip、popover、tip等关键词）
  2. 定位到该元素后，通过对应的CSS选择器获取其文本内容
  3. 若使用自动化测试工具（如Playwright、Cypress），需先模拟hover操作，再等待该元素出现后获取文本

• 检查ARIA关联的隐藏元素
  部分Tooltip会通过aria-describedby属性关联一个隐藏的文本节点：

  1. 查看按钮元素是否存在aria-describedby属性，比如<button aria-describedby="tooltip-123">
  2. 查找页面中对应ID的元素，直接读取该元素的textContent

• 等待Tooltip异步渲染完成
  React的Tooltip渲染是异步的，hover后需等待DOM更新完成再获取：

  • 手动调试时，hover后等待1-2秒再查找元素
  • 自动化测试中，使用工具内置的等待方法（如Playwright的waitForSelector、Cypress的cy.wait()），确保Tooltip元素已渲染

• 查看React组件的内部状态/Props
  若为自研React组件，可通过React DevTools：

  1. 选中目标按钮组件，查看其Props或状态中是否包含Tooltip文本（如tooltipContent、tipText等字段）
  2. 直接读取该字段值作为提示文本

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