在滚动SPA上，父div在移动太远之后，WebDriver将子div报告为“不可见”

Question

有问题的网页是一个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>

看来，只要父div Y位置变得小于-2000左右，所有子元素就会以这种方式变为“禁用”。 在此之前（例如，大约-1900），返回的元素包含所有有效信息。 我可以从Board 3切换回Board 2，然后再次正确返回所有元素。 回到第3板 - 所有板“禁用”。 所以这似乎是浏览器WebDriver的限制。

WebDriver C＃测试代码：

 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;

Firefox处理这个问题最好 - 至少在放弃之前显示Info / Board1 / Board2。 Chrome无法处理任何主板，为所有主板返回相同的Displayed = false，空白文本。

所以我的问题是 - 有什么方法可以解决这个问题吗？ 我可以测试其他主板上的文本是否正确，而Board1 / Info正在显示，但无法与最后2个主板进行交互。

回答：

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

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

Answer 1

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

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

我面临的问题是Selenium将元素返回为不可见，但真正的最终用户可以毫无问题地查看和执行操作。 这里最好的解决方案是改变网站的源代码，使Selenium的FirefoxDriver和InternetExplorerDriver满意。 因为这与元素的位置和重叠有关，这似乎很难重现和修复。

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

对于那些不可见元素，请使用element.GetAttribute("textContent")而不是element.Text

 return elements[3].FindElement(By.TagName("span")).GetAttribute("textContent");

使用操作点击或JavaScript单击，而不是正常点击。 例如，如果您需要多次使用此方法，则可能需要为IWebElement或IWebDriver创建扩展方法。

// example of JavaScriptClick extension method for IWebDriver
// use as driver.JavaScriptClick(element);
// or you can make it IWebElement's extension and pass in IWebDriver
// or just create a normal method and pass in both driver and element
public static void JavaScriptClick(this IWebDriver driver, IWebElement element) {
    IJavaScriptExecutor executor = driver as IJavaScriptExecutor;
    executor.ExecuteScript("arguments[0].click();", element);
}

public static void ActionsClick(this IWebDriver driver, IWebElement element) {
    new Actions(driver).Click(element).Perform();
}

相关阅读：

在滚动SPA上，父div在移动太远之后，WebDriver将子div报告为“不可见”

问题描述

回答：

1 个解决方案

解决方案1
4 已采纳 2013-09-04 04:54:33

在滚动SPA上，父div在移动太远之后，WebDriver将子div报告为“不可见”

问题描述

回答：

1 个解决方案

解决方案1 4 已采纳 2013-09-04 04:54:33

解决方案1
4 已采纳 2013-09-04 04:54:33