当前位置: 首页 > 知识库问答 >
问题:

Selenium WebDriver MoveToElement-隐藏元素,悬停和toggleClass

姜淇
2023-03-14

Selenium WebDriver:2.35。火狐: 25.0

我想将鼠标移到一个div上,这将使隐藏的图像变得可见,然后单击该图像。我读过这里,这里,这里和其他的帖子。一般的答案是采取以下形式:

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();

问题是没有触发click事件。此外,该元素保持可见,因此任何后续鼠标悬停都会将其隐藏。当然,这一切都适用于手动测试。

问题似乎出在悬停事件上。如果我将其分为两个事件-mouseenter和mouseleave(而不是hover)以及addClass和removeClass(而不是toggleClass),那么它就可以工作了。只是想知道是否有可能让这个工作与悬停?

共有1个答案

扶开诚
2023-03-14

作为元素。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来确保鼠标会在隐藏的图片上。

 类似资料:
  • 问题内容: Google将忽略在CSS中设置为“显示:无”的元素内的单词吗? 例: 我想要隐藏这样的菜单可能看起来有些奇怪,但是有一个子菜单。并将用户激活它。但是我不希望它超越SEO。 问题答案: 在页面加载中使用javascript隐藏菜单。这样,谷歌仍然会分析您的文本。它会忽略元素以及textcolor与背景色相同的元素,从而使人眼看不到它

  • 问题内容: 我有一个HTML 标签,并且在div内有一个元素,当鼠标进入其边界时会出现在其中。现在,我要单击在鼠标进入或悬停时可见的元素。 问题:元素开始闪烁。浏览器:IE8 我正在使用下面的代码 有什么建议为什么它会闪烁吗? 问题答案: 由于IE驱动程序的一个称为“永久悬停”的功能,该元素闪烁。此功能的价值可疑,但由于IE(浏览器,而非驱动程序)在使用API 时对消息做出反应的大脑失效方式,因此

  • 问题内容: 我有一个HTML 标签,并且在div内有一个元素,当鼠标进入其边界时会出现在其中。现在,我要单击在鼠标进入或悬停时可见的元素。 问题:该元素开始闪烁。浏览器:IE8 我正在使用下面的代码 有什么建议为什么它会闪烁吗? 问题答案: 由于IE驱动程序的一个称为“永久悬停”的功能,该元素闪烁。此功能的价值可疑,但是由于IE(浏览器,而不是驱动程序)在使用API 时响应消息的大脑失效方式,因此

  • 问题内容: 我的页面布局涉及很多绝对位置和z索引位置,因此有很多元素相互重叠。 元素之一仅包含文本,它悬停在许多其他事物之上。 在该元素下方,有几个应用了CSS悬停伪类的元素。 当鼠标经过包含文本的元素时,我想以某种方式使下面的Element响应鼠标的存在并激活伪类样式。 有没有什么样式的元素,以便它允许悬停通过它传递给下面的任何元素? 使用JavaScript并不是很难,但是为了使事情尽可能简单

  • 如果孩子在焦点中(已被点击),我怎么能失去父母的悬停状态?我有一个菜单箭头(用OPEN代替了它,以减少代码),它在悬停状态下打开我的菜单和菜单项,当我单击它们时,菜单项就会聚焦。在菜单项点击后,我希望能够失去对我父母的关注,这样菜单就会消失。 如果可能的话,我会尽量避免使用javascript,这是我最好的尝试... 这是我的html null null 编辑 我在一个单页应用程序上使用Angul

  • 本文向大家介绍jQuery控制元素隐藏和显示,包括了jQuery控制元素隐藏和显示的使用技巧和注意事项,需要的朋友参考一下 1、jQuery隐藏和显示效果 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: 2、jQuery淡入淡出效果 通过 jQuery,您可以实现元素的淡入淡出效果。 jQuery 拥有下面四种 fade 方法: fadeIn()