Geek Answers Handbook

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

EDIT: I think there is already a problem with this: http://code.google.com/p/selenium/issues/detail?id=5717

So, basically I use the Firefox driver, and a div with id="page-content" causes my selenium test to crash with the error mentioned in the mentioned question: The item is not visible at the moment and therefore cannot interact with "but there is still ? I was able to trace the problem to the point that this identifier has the css overflow: hidden style. Is this an error, or am I doing something wrong?

I am 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 who are not familiar with angular, all its execution displays the html fragment as modal, when 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>
+6
angularjs c # selenium-webdriver selenium-firefoxdriver
source share
1 answer

According to the Selenium WebDriver source code, an element should not have overflow: hidden as a style. ( ref ) ( UPDATE I just realized that the maintainers updated the code in the link I'm connected to, but this is the 2.33 source code that included overflow: hidden checking. It was just reworked for the supposed 2.34.)

So it seems that if the developers do not solve this, you are SOL. But the first step so that those accompanying you can notice the problem is to add the problem to the official repository, which you think you did.

One possible solution at the same time, if you cannot get developers to help you use Javascript to remove the overflow attribute:

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

And try to run the tests from there.

+1
source share

More articles:


All Articles