Selenium WebDriver MoveToElement - 隐藏元素、悬停和切换类

Posted 2023-02-26

【中文标题】Selenium WebDriver MoveToElement - 隐藏元素、悬停和切换类

【英文标题】：Selenium WebDriver MoveToElement - hidden element, hover and toggleClass

【发布时间】：2013-11-24 08:15:03

【问题描述】：

Selenium 网络驱动程序：2.35。 火狐：25.0

我想将鼠标移到一个 div 上，这将使隐藏的图像变得可见，然后单击该图像。我已经阅读了here、here、here 等帖子。一般的答案是做一些形式：

action.moveToElement(we).moveToElement(webdriver.findElement(By.xpath("/expression-here")).click().build().perform();

但是，这在下面的示例中不起作用：

html:

<div id="bb_testDiv">
    <img class="bb_matchImgTest bb_standardHidden" src='@Url.Content( "~/images/match.png" )' alt='Match'/>
</div>

javascript/jquery：

 $( document ).on( 'hover', '#bb_testDiv', function ()
            
     $( this ).find( '.bb_matchImgTest' ).toggleClass( 'bb_standardHidden' );
  )        
 $( document ).on( 'click', '.bb_matchImgTest', function ()
 
     alert('here');
  )

CSS：

.bb_standardHidden

    visibility:hidden;

C#测试代码：

IWebElement testDiv = WebDriver.FindElement( By.Id( "bb_testDiv" ) );            
Actions builder = new Actions( WebDriver );
Actions hoverClick = builder.MoveToElement( testDiv ).MoveToElement( testDiv.FindElement( By.ClassName( "bb_matchImgTest" ) ) ).Click();
hoverClick.Build().Perform();

问题是点击事件没有被触发。此外，该元素是可见的，因此任何后续的鼠标悬停都会隐藏它。当然，这一切都适用于手动测试。

问题似乎与悬停事件有关。如果我将其分解为两个事件 - mouseenter 和 mouseleave（而不是 hover）与 addClass 和 removeClass（而不是 toggleClass），那么它可以工作。只是想知道是否可以通过悬停来实现这一点？

【参考方案1】：

由于元素 .bb_standardHidden 被隐藏，这可能是原因，因为 MoveToElement 没有按您的需要工作。

IWebElement testDiv = WebDriver.FindElement( By.Id( "bb_testDiv" ) );            
Actions builder = new Actions( WebDriver );
Actions hoverClick = builder.MoveToElement( testDiv ).MoveByOffset( x, y ).Click();
hoverClick.Build().Perform();

用 x 和 y 确保鼠标将在隐藏的图片上。

【讨论】：

感谢您的想法，但没有帮助。移动到 testDiv 时会显示隐藏的图像，但未单击。这似乎与悬停事件有关，因为如果我将悬停更改为 mouseenter/mouseleave 则一切正常。