Selenium Java如何点击仅鼠标悬停可见的元素？Angular图表场景

核心实现思路 #

依赖Selenium的Actions类模拟鼠标悬停动作，触发Angular的动态元素渲染/显示，再执行点击操作，配合显示等待适配Angular的异步渲染特性。

具体实现步骤 #

1. 定位目标元素 #

优先通过稳定的属性定位目标悬停区域（Angular动态生成的id多为随机值，不建议使用）：

• 可选定位依据：自定义data-testid属性、类名、ng-reflect-*业务属性、父元素层级关系
• 示例定位代码：
  WebElement chartHoverArea = driver.findElement(By.cssSelector("div.chart-container > .chart-header-right"));

如果目标区域悬停前不在DOM中，可先定位外层图表容器：
WebElement chartContainer = driver.findElement(By.cssSelector("div.chart-root"));

2. 执行悬停+点击操作 #

配合显示等待避免Angular异步渲染导致的元素不可交互错误：

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import java.time.Duration;

// 初始化工具类
Actions actions = new Actions(driver);
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(3));

// 方案A：目标区域默认存在于DOM中时使用
WebElement chartHoverArea = driver.findElement(By.cssSelector("替换为你的目标区域选择器"));
// 悬停触发元素可交互状态
actions.moveToElement(chartHoverArea).perform();
// 等待元素可点击
wait.until(ExpectedConditions.elementToBeClickable(chartHoverArea));
// 点击弹出下拉菜单
chartHoverArea.click();

// 方案B：目标区域悬停后才渲染到DOM中时使用
WebElement chartContainer = driver.findElement(By.cssSelector("替换为外层图表容器选择器"));
// 悬停在图表容器上触发子元素渲染
actions.moveToElement(chartContainer).perform();
// 等待目标区域渲染完成
WebElement chartHoverArea = wait.until(ExpectedConditions.presenceOfElementLocated(By.cssSelector("替换为目标区域选择器")));
// 悬停后点击
actions.moveToElement(chartHoverArea).click().perform();

特殊场景兼容 #

如果无法定位到明确的右上角空白区域元素，可通过坐标偏移直接操作：

// 获取图表容器宽度
int chartWidth = chartContainer.getRect().getWidth();
// 偏移到右上角位置（示例为距离右边缘10px、上边缘10px的位置，可根据实际页面调整数值）
actions.moveToElement(chartContainer, chartWidth - 10, 10).click().perform();

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