Why does the Selenium Firefox Driver consider my modal not displayed when the parent has overflow:hidden?

Question

EDIT: I think there is an issue open on this already: http://code.google.com/p/selenium/issues/detail?id=5717

So basically I'm using the Firefox Driver and the div with id="page-content" is causing my selenium test to fail with the error listed in the referenced question: "Element is not currently visible and so may not be interacted with" but another is? I was able to trace the problem down to the fact that that ID has a css style of overflow: hidden Is this a bug, or am I doing something wrong?

I'm using Selenium WebDriver version: 2.33.0.0, Firefox version: 22

The source for the test and website is here: https://github.com/tonyeung/selenium-overflow-issue

For quick reference: the HTML below is my test page. For those of you not familiar with angular, all its doing is displaying an html fragment as a modal whenever you click on add or edit, you can see a live demo here: http://plnkr.co/edit/LzHqxAz0f2GurbL9BGyu?p=preview

<!DOCTYPE html>
<html data-ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Selenium Test</title>  

        <!-- // DO NOT REMOVE OR CHANGE ORDER OF THE FOLLOWING // -->
        <!-- bootstrap default css (DO NOT REMOVE) -->
        <link rel="stylesheet" href="css/bootstrap.min.css?v=1">
        <link rel="stylesheet" href="css/bootstrap-responsive.min.css?v=1">
    </head>
    <body>
        <div data-ng-controller="MyCtrl">
            <span id="added" data-ng-show="added">Added</span>
            <span id="edited" data-ng-show="edited">Edited</span>

            <div id="page-content" style="overflow:hidden">
            <!--<div id="page-content">-->
                <div class="employees view">
                    <button name="addNewEmployee" id="addNewEmployee" class="btn btn-primary" data-ng-click="add()">Add</button>
                    <button name="editEmployee" id="editEmployee" class="btn btn-primary" data-ng-click="edit()">Edit</button>

                    <div data-ng-controller="editCtrl" data-ng-include="'app/views/edit.html'"></div>
                    <div data-ng-controller="addCtrl" data-ng-include="'app/views/add.html'"></div>
                </div>
            </div>

        </div>  

        <!-- JS scripts -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>  
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script> 
        <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/0.7.2/angular-strap.min.js"></script>
        <script src="app/app.js"></script>

    </body>
</html>

I did some research on this myself using [this](http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow&preval=hidden). And what I think is happening is that them using `overflow: hidden` for the modal is only rendering whatever is captured in the snapshot of the modal. I would ask your front-end devs if using `overflow:hidden` is really necessary. — Brian, Jul 12 '13 at 22:24
Can we also see the code you are using? Also worth looking at the WebDriver spec, specifically the part about [visibilty.](http://www.w3.org/TR/webdriver/#determining-visibility) — Arran, Jul 12 '13 at 22:28
Actually this bugs me as well. For example, Google maps or other maps, they have all tiles `overflow:hidden`, for elements on the map, ChromeDriver works fine, but FirefoxDriver throws NotVisibleException. — Yi Zeng, Jul 12 '13 at 22:36
@ton.yeung: Is this happening to Chrome and IE? To me, Chrome's fine, IE untested. — Yi Zeng, Jul 12 '13 at 22:41
@user1177636 this is happening in the Firefox Driver, I'll try it in the Chrome and IE driver on Monday. — ton.yeung, Jul 13 '13 at 03:33
@Arran The code I'm using is in the github site I listed in the OP as the source. — ton.yeung, Jul 13 '13 at 03:34
@Brian The `overflow:hidden` is in fact necessary afaik. The `id="page-content"` is very wide, and without the extra css, will have horizontal scroll bars. Setting a width on the div is not an option, since the elements are set to wrap as part of the responsive css. — ton.yeung, Jul 13 '13 at 03:36
@Arran It looks like my link to the github was broken, but user1177636 fixed it for me, so you should be able to see the source now. Also, I think the webdriver spec #2 and #8 might be the reason why its broken. How would I confirm this? — ton.yeung, Jul 13 '13 at 03:44
@user1177636 It works fine in the chrome driver, but breaks under the Firefox driver. Do you think "switch to Chrome Driver" is an appropriate answer, or should I expand the question to ask why the Chrome driver works, but not the Firefox one? For practical purposes, i can move on by switching to the chrome driver, but it doesn't really answer the question of why it breaks, specifically in Firefox. — ton.yeung, Jul 15 '13 at 14:08
@ton.yeung: I'd suggest make this question more FF specific and leave this question open. Switching to other browser is not a solution. Remember to expand the question with your selenium/FF version. — Yi Zeng, Jul 15 '13 at 21:08
@user1177636 I've added a selenium issue ticket, not sure if its directly related — ton.yeung, Jul 16 '13 at 14:12
Found it in the code: https://github.com/SeleniumHQ/selenium/blob/d66d19890f10025ec81ae4ad68e247f64835ed1d/javascript/atoms/dom.js#L631 Elements with Overflow: hidden are not displayed :( — bbbco, Jul 16 '13 at 17:37

bbbco · Accepted Answer · 2013-07-17T04:24:10.747

According to the Selenium WebDriver source code, an element must not have overflow: hidden as a style. (ref) (UPDATE I just realized that the maintainers have updated the code in the ref I linked to, but that the original 2.33 code did include the overflow: hidden check. Its just been refactored for presumable 2.34.)

So, it looks like unless the maintainers decide against this, you are SOL. But the first step to getting the maintainers to notice the issue is to add an Issue to the official repository, which it looks like you have done.

One possible solution in the meantime if you can't get you developers to help you is to use Javascript to remove the overflow attribute:

driver.executeScript("arguments[0].setAttribute('style', 'overflow: none;')", page_content_element)

And try to run your tests from there.

I didn't think of that, thanks, I'm using the chrome driver for now, doesn't seem to affect my test execution time that much, but then I only have 10 test at the moment, when I get to 100 or so I'll do a comparison of the speed for the different drivers and this is good to know. — ton.yeung, Jul 16 '13 at 18:52

Why does the Selenium Firefox Driver consider my modal not displayed when the parent has overflow:hidden?

1 Answers1

Linked