Fatal编程技术网
  • csharp/
  • C# WebDriver将子div报告为；“不可见”；在父div向上移动过远后，在滚动SPA时

C# WebDriver将子div报告为；“不可见”；在父div向上移动过远后，在滚动SPA时

c# javascript selenium selenium-webdriver

C# WebDriver将子div报告为；“不可见”；在父div向上移动过远后，在滚动SPA时,c#,javascript,selenium,webdriver,selenium-webdriver,C#,Javascript,Selenium,Webdriver,Selenium Webdriver,讨论中的网页是一个SPA，我可以将其描述为一个大的div，其中包含几个div“board”，我们通过在父div上应用webkit转换来滚动到视图中 不幸的是，一旦滚动太远，WebDriver返回的元素将被“禁用”-WebElement属性“Displayed”为false，Text属性为空，并且我无法对元素执行任何单击/操作。然而，它在当时的页面上是可见的，并且功能完善 在调查这个问题时，我创建了一个小的测试网页，看看在什么情况下会发生这种情况 注意，我们在这个网站中没有使用iframe，JS

讨论中的网页是一个SPA，我可以将其描述为一个大的div，其中包含几个div“board”，我们通过在父div上应用webkit转换来滚动到视图中

不幸的是，一旦滚动太远，WebDriver返回的元素将被“禁用”-WebElement属性“Displayed”为false，Text属性为空，并且我无法对元素执行任何单击/操作。然而，它在当时的页面上是可见的，并且功能完善

在调查这个问题时，我创建了一个小的测试网页，看看在什么情况下会发生这种情况

注意，我们在这个网站中没有使用iframe，JSFiddle只是为了演示功能

<html><head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style type="text/css">
    .board-nav {
        font-size: 12px;
        color: #1b1a1a;
        margin-right: 10px;
        vertical-align: middle;
    }

    .scroller{
        -webkit-transition: -webkit-transform 0ms; transition: -webkit-transform 0ms; 
        -webkit-transform-origin: 0px 0px; 
        -webkit-transform: translate(0px, 0px) scale(1) translateZ(0px);
        transition-property: transform; 
        transform-origin: 0px 0px 0px; 
        transform: translate(0px, 0px) scale(1) translateZ(0px);
        height: 4000px;
    }
</style>
<script type="text/javascript">
 var boardPositions = [0, -878, -1748, -2598, -3468];
var $scroller = null;
function changeBoard(event) {
    var newValue = 'translate(0px, ' + boardPositions[event.target.id] + 'px) scale(1) translateZ(0px)';
    
    $('.scroller').css('-webkit-transform',newValue);
    $('.scroller').css('transform', newValue);
}

$(document).ready( function(){
    var $boards = $('.board-nav'); 
    $boards.on('click', changeBoard);
});

</script>
</head><body>
<div>
    <div class="board-nav" id="0">Info</div>
    <div class="board-nav" id="1">Board1</div>
    <div class="board-nav" id="2">Board2</div>
    <div class="board-nav" id="3">Board3</div>
    <div class="board-nav" id="4">Board4</div>
</div>
<div id="content" style="width:1612px; height:864px; position:absolute; left:58px;         overflow:hidden">
    <div class="scroller">
        <ul class="vertical">
            <li class="v" id="li0">
                <div class="target"><span>Info</span></div>
            </li>
        <li class="v" id="li1">
            <div class="target"><span>Board1</span></div>
        </li>
        <li class="v" id="li2">
            <div class="target"><span>Board2</span></div>
        </li>
        <li class="v" id="li3">
            <div class="target"><span>Board3</span></div>
        </li>
        <li class="v" id="li4">
            <div class="target"><span>Board4</span></div>
        </li>
    </ul>
    </div>
</div>
</body></html>
Firefox处理得最好——在放弃之前，它至少会显示Info/Board1/Board2。Chrome不处理任何电路板，返回所有电路板相同的显示=false空白文本

所以我的问题是，有没有办法绕过这个问题？当Board1/Info显示时，我可以测试其他板上的文本是否正确，但无法与最后两块板交互

答复: 刚刚通过向父div“scroller”元素添加一个height属性解决了我的问题-我的猜测是WebDriver无法确定父div的高度，因此假设超出某个位置它就不再可见

我已经用解决方案更新了上面的代码和JSFIDLE

我猜这会发生在Firefox和IE上，但不会发生在Chrome上？如果是这样，那么我们也遇到了类似的问题。我怀疑Chrome并不关心WebDriver W3C标准，而是以稍微不同的方式确定可见性

如果这个答案与你的问题无关，我希望它对那些通过搜索引擎找到这个问题的人仍然是有益的

我面临的问题是，Selenium以不可见的形式返回元素，但真正的最终用户可以看到并执行操作，而不会出现任何问题。这里最好的解决方案是更改站点的源代码，使Selenium的
FirefoxDriver
和
InternetExplorerDriver
开心。因为这与元素的位置和重叠有关，这似乎很难复制和修复

然而，除此之外，这里有一些变通方法，通过Selenium进行的黑客攻击可能会有所帮助

  • 对于那些不可见的元素，使用
    element.GetAttribute（“textContent”）
    而不是
    element.Text
返回元素[3]。FindElement（按.TagName（“span”））.GetAttribute（“textContent”）；
  • 使用操作单击或JavaScript单击，而不是普通单击。例如，如果您多次需要此方法，您可能希望为
    IWebElement
    或
    IWebDriver
    创建扩展方法
//IWebDriver的JavaScriptClick扩展方法示例
//用作驱动程序。JavaScriptClick（元素）；
//或者，您可以将其设为IWebElement的扩展并传入IWebDriver
//或者只是创建一个普通方法并传入驱动程序和元素
公共静态void JavaScriptClick（此IWebDriver驱动程序，IWebElement元素）{
IJavaScriptExecutor executor=驱动程序作为IJavaScriptExecutor；
executor.ExecuteScript（“参数[0]。单击（）；”，元素）；
}
公共静态无效操作单击（此IWebDriver驱动程序，IWebElement元素）{
新操作（驱动程序）。单击（元素）。执行（）；
}
相关阅读：

我想这会发生在Firefox和IE上，而不是Chrome上？如果是这样，那么我们也遇到了类似的问题。我怀疑Chrome并不关心WebDriver W3C标准，而是以稍微不同的方式确定可见性

如果这个答案与你的问题无关，我希望它对那些通过搜索引擎找到这个问题的人仍然是有益的

我面临的问题是，Selenium以不可见的形式返回元素，但真正的最终用户可以看到并执行操作，而不会出现任何问题。这里最好的解决方案是更改站点的源代码，使Selenium的
FirefoxDriver
和
InternetExplorerDriver
开心。因为这与元素的位置和重叠有关，这似乎很难复制和修复

然而，除此之外，这里有一些变通方法，通过Selenium进行的黑客攻击可能会有所帮助

  • 对于那些不可见的元素，使用
    element.GetAttribute（“textContent”）
    而不是
    element.Text
返回元素[3]。FindElement（按.TagName（“span”））.GetAttribute（“textContent”）；
  • 使用操作单击或JavaScript单击，而不是普通单击。例如，如果您多次需要此方法，您可能希望为
    IWebElement
    或
    IWebDriver
    创建扩展方法
//IWebDriver的JavaScriptClick扩展方法示例
//用作驱动程序。JavaScriptClick（元素）；
//或者，您可以将其设为IWebElement的扩展并传入IWebDriver
//或者只是创建一个普通方法并传入驱动程序和元素
公共静态void JavaScriptClick（此IWebDriver驱动程序，IWebElement元素）{
IJavaScriptExecutor executor=驱动程序作为IJavaScriptExecutor；
executor.ExecuteScript（“参数[0]。单击（）；”，元素）；
}
公共静态无效操作单击（此IWebDriver驱动程序，IWebElement元素）{
新操作（驱动程序）。单击（元素）。执行（）；
}
相关阅读：

感谢您的回答-GetAttribute确实可以在我的案例中获取文本。我正在使用操作尝试单击，但不幸的是，这不起作用（引发了元素不可用的异常）。但是-我设法解决了我添加到问题中的原始问题。感谢您的回答-GetAttribute确实有效 
 var driver = new FirefoxDriver();
 driver.Manage().Window.Maximize();
 driver.Navigate().GoToUrl("testpage.html");

 var elements = driver.FindElements(By.ClassName("v"));
 return elements[3].FindElement(By.TagName("span")).Text;