页面底部的触摸元素出错:元素当前不可见,因此可能无法与之交互

时间:2013-08-01 04:02:02

标签: popup webdriver watir

我有一个很长的html页面,里面有很多可编辑的元素。单击元素时,将弹出一个编辑对话框。奇怪的是,如果元素位于页面顶部,则可以成功访问其编辑对话框,同时无法访问底部和某些中间位置元素的编辑对话框。打印出的错误是:“元素当前不可见,因此可能无法与之交互”。对失败的编辑对话框进行的一些检查是:

  

p dialog.exist? ==>成真

     

p dialog.visible? ==>得到假

     

将dialog.attribute_value('style')==>得到“”

(firebug显示样式属性值为'display:block;'并且top元素的成功对话框上的检查具有完全相同的值,可见'false'也是!!!所以weired !!为什么可以访问它?)

然后我尝试了:

  

browser.execute_script("document.getElementById('dialogDiv').style.display='block'; ")

将对话框样式属性值设置为'display:block;'希望它变得可见,但失败了。

在这个长页面上,弹出元素的编辑对话框时,没有滚动条。因此底部元素的部分对话框有可能被掩盖。这是一个原因吗? 所以我试过了:

  

bottom_element.wd.location_once_scrolled_into_view

在单击之前滚动到底部元素,当弹出对话框时,对话框的所有部分都显示但仍然无法访问。

最后一次尝试:

编辑对话框打开后

,使用javacript滚动

  

browser.execute_script( “window.scrollBy(0,-100)”)

对话框位于浏览器窗口的中间位置,没有被任何内容覆盖,但仍然有

  

元素目前不可见,因此可能无法与

进行交互

当我移动到类似的长页面但在对话框加速后有滚动条时,可以成功访问底部元素的对话框。任何人都对此有任何想法吗?请与我分享,谢谢提前。

html是:

<div id="dialogDiv" style="display: block;">
    <div class="sage_dialog ui-draggable" style="top: 322px; display: block; margin-bottom: 1000px; left: 542px;">

对话框的位置和大小为:

 <struct Selenium::WebDriver::Point x=0, y=1576> 
 <struct Selenium::WebDriver::Dimension width=800, height=0>

我从How to force Selenium WebDriver to click on element which is not currently visible?

得到了线索

height = 0是个问题,我怎么能改变它?

1 个答案:

答案 0 :(得分:1)

咨询了html设计师后,我得到了问题的关键,正文html是:

<body class="float_guide_parent" style="width: 800px; overflow: hidden; cursor: auto;">

溢出的值是'隐藏',它阻止显示滚动条,所以我修改了它:

browser.execute_script("$('.float_guide_parent').css('overflow',''); ") 

问题被铲除。