Touch elements at bottom of page got error: Element is not currently visible and so may not be interacted with

1
votes

I have a very long html page with lots of editable elements. When click on a element, an edit dialog for it will pop up. The strange thing is if the element is at the top of the page, its edit dialog can be accessed successfully while the bottom and some middle positon elements' edit dialog cann't be accessed. the error prints out is: "Element is not currently visible and so may not be interacted with". Some checks on the failed edit dialog is:

p dialog.exist? ==>got true

p dialog.visible? ==>got false

puts dialog.attribute_value('style') ==>got ""

(firebug shows the style attribute value is 'display: block;' and the checks on success dialog of top element has exactly the same value, visible is 'false' too !!! so weired!! why it can be accessed?)

Then I tried:

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

to set the dialog style attribute value to 'display: block;' wish it become visiable, but failed.

On this long page, when the edit dialog of element pops up, there isn't scroll bar. So there is a chance that part of the dialog of bottom element is covered up. Is this a reason? so I tried:

bottom_element.wd.location_once_scrolled_into_view

to scroll to the bottom element before click it, when the dialog pops up, all part of the dialog showed but still fail to access.

last trying:

after the edit dialog opend, use javacript to scroll

browser.execute_script("window.scrollBy(0,-100)")

the dialog is in middle of the browser window and isn't coverd up by anything, but still got

Element is not currently visible and so may not be interacted with

When i moved to a similar long page but has scroll bar after dialog poped up, the dialog of bottom element can be accessed successfully. Dose anyone has any idea about this? Please share with me, Thank advance.

the html is:

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

the location and size of the dialog are:

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

I got a clue from How to force Selenium WebDriver to click on element which is not currently visible?

height=0 is a problem, how can i change it?

1
popupwebdriverwatir
Can you try creating a test page that reproduces the problem? – Justin Ko
Thank you for your comments, the problem was under the body html and has been sovled. See my below answer. Thank you anyway. – user2256777

1 Answers

1
votes

After consulting the html designer, I got the key of the probelm, the body html is:

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

The value of overflow is 'hidden', It blocks showing of scroll bar, so i modified it by:

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

Problem soveled.