为什么 Selenium Firefox 驱动程序认为我的模式在父级溢出时未显示:隐藏? [英] Why does the Selenium Firefox Driver consider my modal not displayed when the parent has overflow:hidden?

查看：22
本文介绍了为什么 Selenium Firefox 驱动程序认为我的模式在父级溢出时未显示:隐藏?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我认为已经存在一个问题:http://code.google.com/p/selenium/issues/detail?id=5717

所以基本上我使用的是 Firefox 驱动程序，并且带有 id="page-content" 的 div 导致我的 selenium 测试失败，并出现引用问题中列出的错误:"元素当前不可见并且所以可能不会与互动"但另一个是?我能够将问题归结为该 ID 具有 overflow: hidden css 样式的事实，这是一个错误，还是我做错了什么?

我使用的是 Selenium WebDriver 版本:2.33.0.0，Firefox 版本:22

测试和网站的来源在这里:https://github.com/tonyeung/selenium-overflow-issue

供快速参考:下面的 HTML 是我的测试页.对于那些不熟悉 angular 的人，它所做的就是在您单击添加或编辑时将 html 片段显示为模态，您可以在此处查看实时演示:http://plnkr.co/edit/LzHqxAz0f2GurbL9BGyu?p=preview

<html data-ng-app="myApp"><head lang="zh-cn"><meta charset="utf-8"><title>硒测试</title><!--//请勿删除或更改以下顺序//--><!-- 引导默认 css(不要删除)--><link rel="stylesheet" href="css/bootstrap.min.css?v=1"><link rel="stylesheet" href="css/bootstrap-responsive.min.css?v=1"><身体><div data-ng-controller="MyCtrl"><span id="已添加" data-ng-show="已添加">已添加</span><span id="edited" data-ng-show="edited">已编辑</span><div id="page-content" style="overflow:hidden"><!--<div id="page-content">--><div class="员工视图"><button name="addNewEmployee" id="addNewEmployee" class="btn btn-primary" data-ng-click="add()">添加</button><button name="editEmployee" id="editEmployee" class="btn btn-primary" data-ng-click="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>

<!-- JS 脚本--><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></html>

解决方案

根据 Selenium WebDriver 源代码，元素不能有 overflow: hidden 作为样式.(ref)(更新 我刚刚意识到维护者已经更新了我链接到的 ref 中的代码，但原始 2.33 代码确实包含了 overflow: hidden 检查.它刚刚被重构为可推测的 2.34.)

因此，除非维护人员决定反对，否则您就是 SOL.但是让维护者注意到这个问题的第一步是向官方存储库添加一个问题，看起来你已经完成了.

在此期间，如果您无法让开发人员帮助您，一种可能的解决方案是使用 Javascript 删除溢出属性:

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

并尝试从那里运行您的测试.

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>

解决方案

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.

这篇关于为什么 Selenium Firefox 驱动程序认为我的模式在父级溢出时未显示:隐藏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆