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

问题

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>

回答1:

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.

来源：https://stackoverflow.com/questions/17624312/why-does-the-selenium-firefox-driver-consider-my-modal-not-displayed-when-the-pa

标签

angularjs

selenium-webdriver

selenium-firefoxdriver