Selenium中如何实现鼠标悬停并校验Tooltip提示文本？

问题描述 #

• 测试需求：对Tooltip控件执行鼠标悬停操作，获取控件展示的提示文本
• 故障现象：悬停操作未正常触发，无法获取到提示文本，导致对应测试用例执行失败

已尝试的实现方式 #

方式1：调用actions的mouseMove方法移动鼠标到目标元素触发操作 #

对应实现代码：

browser.actions()
.mouseMove(
  element(by.xpath('/html/body/app-root/div/main/ng-component/ngb-tabset/div/div/view-concepts-tab/div[1]/concept-view/div/dl/mat-accordion/mat-expansion-panel/div/div/div[4]/term-view/div/div[3]/div[1]/dl/mat-accordion/mat-expansion-panel/mat-expansion-panel-header/span[1]/mat-panel-description/dd/span')))
.click()
.perform();

text('On mouse hover')

该方式未成功触发Tooltip显示，无法拿到目标文本。

方式2：直接通过XPath定位元素后断言文本值 #

对应实现代码：

expect(element.all(by.xpath('/html/body/app-root/div/main/ng-component/ngb-tabset/div/div/view-concepts-tab/div/concept-view/div/dl/mat-accordion/mat-expansion-panel/div/div/div[2]/term-view/div/div[3]/div[1]/dl/mat-accordion/mat-expansion-panel/mat-expansion-panel-header/span[1]/mat-panel-description/dd/span'))).toEqual('On mouse hover');

该方式未触发悬停动作，Tooltip节点未完成渲染，无法匹配到目标文本。

问题进展与新报错 #

改用CSS选择器定位元素后仍未解决问题，运行时抛出错误：Expected [ ] to equal 'On mouse hover'.，对应代码如下：

expect(element.all(by.css('dd#A>span'))).toEqual('On mouse hover');

报错说明定位返回了空元素集合，未匹配到持有目标文本的DOM节点。

修复方案 #

1. 修正悬停触发逻辑
   Tooltip为悬停触发的动态渲染元素，原有代码中多余的.click()操作会打断悬停状态，需移除；另外使用的绝对XPath路径层级过深，DOM节点索引轻微变动就会定位失效（两次编写的XPath中div索引分别为[1]、[2]，已经出现层级不匹配问题），优先给Tooltip触发元素加专属定位标记（如data-testid="tooltip-trigger"）提升定位稳定性。悬停逻辑参考：

   const tooltipTrigger = element(by.css('[data-testid="tooltip-trigger"]'));
   // 移动鼠标到触发元素，移除多余的click操作
   await browser.actions().mouseMove(tooltipTrigger).perform();
   // 加显式等待，等Tooltip渲染完成后再执行后续断言，避免取数时机过早
   await browser.wait(
     ExpectedConditions.textToBePresentInElement(element(by.css('.mat-tooltip')), 'On mouse hover'),
     3000,
     'Tooltip 3秒内未正常渲染'
   );
   

2. 修正元素定位与断言逻辑
   原有代码使用element.all()获取元素集合，无法直接和字符串做相等断言，需取单个元素后读取文本再断言；另外Angular Material组件库的Tooltip默认渲染在body根节点下，并非嵌套在触发元素的子节点中，这是之前定位返回空数组的核心原因。断言逻辑参考：

   // 直接定位全局渲染的Tooltip节点（默认携带mat-tooltip类名）
   const tooltipContent = element(by.css('.mat-tooltip'));
   expect(await tooltipContent.getText()).toEqual('On mouse hover');
   

3. 边缘场景兼容
   如果鼠标移动后仍未触发Tooltip，可以给mouseMove方法加元素内坐标偏移，确保鼠标落在触发元素的有效范围内，避免移动到元素边缘不触发交互：

   await browser.actions()
     .mouseMove(tooltipTrigger, {x: 5, y: 5}) // 偏移到元素内距边缘5px位置
     .perform();
   

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