移动端汉堡菜单下拉元素点击异常：如何等待下拉完全展开？

我在iOS移动模拟Chrome窗口中执行Selenium测试，尝试点击移动端汉堡菜单下拉列表中的第二个元素。该下拉列表仅有两个选项，且我的XPath已明确指定目标元素，但测试执行过快，导致误点第一个元素。

经排查，问题源于下拉菜单的平滑滑动动画：展开时两个元素会短暂重叠，WebDriver尝试点击第二个元素时，其实际被第一个元素遮挡，最终误触发第一个元素的点击事件。

页面元素结构 #

<ul class="hamburger-menu">
<li>Menu Item</li>
<li>Dropdown Menu
  <div class="mobile-dropdown">
    <div class="dropdown-element-1"></div>
    <div class="dropdown-element-2"></div>
  </div>
</li>
<li>Menu Item</li>
</ul>

测试代码实现 #

public static Main()
{   
    By hamburgerMenu = By.XPath("Not important, but the xpath to the menu here");
    By hamburgerMenuButton = By.ClassName("hamburger-menu");
    By dropdownMenuButton = By.XPath("//ul[@class='hamburger-menu']/li[2]");
    By dropdownElement1 = By.XPath("//div[@class='dropdown-element-1']");
    By dropdownElement2 = By.XPath("//div[@class='dropdown-element-2']");   

    IWebDriver driver = new ChromeDriver();
    driver.Navigate().GoToUrl("http://sample.com");

    // Click to open hamburger menu
    driver.FindElement(hamburgerMenuButton).Click();
    //Here I implement a selenium Explicit wait that waits for the hamburger menu to be fully open
    _ = Extensions.WaitForVisible(driver.FindElement(hamburgerMenu), 10);

    // Click to open dropdown menu
    driver.FindElement(dropdownMenuButton).Click();
    //Here I assert that the two elements are present
    Assert.True(driver.FindElement(dropdownElement1).Displayed);
    Assert.True(driver.FindElement(dropdownElement2).Displayed);

    //I need some type of wait here?

    //Then I click on the second element
    driver.FindElement(dropdownElement2).Click();
}

核心困境：由于目标元素已存在于DOM中，隐式等待和显式等待均无法生效，且元素无状态变化属性可用于等待条件。请问是否有解决此类问题的方法，如何等待下拉菜单完全展开后再点击菜单项？

解决方案 #

方法1：等待元素位置稳定 #

动画过程中元素的坐标会持续变化，我们可以等待目标元素的位置不再变动，以此确认动画结束：

// 获取目标元素初始位置
IWebElement targetElement = driver.FindElement(dropdownElement2);
Point initialLocation = targetElement.Location;
Thread.Sleep(100); // 先等待一小段时间，避免初始位置未更新
Point newLocation = targetElement.Location;

// 循环等待位置稳定，最长等待2秒
int waitTime = 0;
while (!initialLocation.Equals(newLocation) && waitTime < 2000)
{
    Thread.Sleep(100);
    waitTime += 100;
    initialLocation = newLocation;
    newLocation = targetElement.Location;
}

// 位置稳定后执行点击
targetElement.Click();

方法2：使用JavaScript点击绕过遮挡 #

直接通过JavaScript触发元素的点击事件，不依赖页面视觉层面的元素位置，彻底避免被遮挡的问题：

IWebElement targetElement = driver.FindElement(dropdownElement2);
IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
js.ExecuteScript("arguments[0].click();", targetElement);

方法3：等待元素可见区域无遮挡 #

自定义等待逻辑，检查目标元素的中心位置是否被其他元素覆盖，直到无遮挡再执行点击：

WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(2));
wait.Until(driver => 
{
    IWebElement target = driver.FindElement(dropdownElement2);
    Rectangle targetRect = target.Rect;
    // 获取目标元素中心位置的顶层元素
    IWebElement coveringElement = (IWebElement)((IJavaScriptExecutor)driver).ExecuteScript(
        "return document.elementFromPoint(arguments[0], arguments[1]);",
        targetRect.X + targetRect.Width / 2,
        targetRect.Y + targetRect.Height / 2
    );
    // 确认顶层元素就是目标元素
    return coveringElement.Equals(target);
});

driver.FindElement(dropdownElement2).Click();

方法4：禁用页面动画（测试环境推荐） #

如果可以修改测试环境的页面行为，直接注入CSS禁用所有动画，从根源解决动画导致的元素重叠问题：

// 在页面加载完成后注入禁用动画的样式
IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
js.ExecuteScript(@"
    var style = document.createElement('style');
    style.innerHTML = '* { transition: none !important; animation: none !important; }';
    document.head.appendChild(style);
");

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