1

有问题的网页是一个 SPA，我可以将它描述为一个包含多个 div“板”的单个大 div，我们通过在父 div 上应用 webkit 转换来滚动查看。

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

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

链接到 JSFiddle 示例页面以显示功能

NB 请注意，我们在本网站中没有使用 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”元素添加高度属性解决了我的问题 - 我的猜测是 WebDriver 无法确定父 div 的高度，因此假设超出某个位置它不再可见。

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

4

1 回答 1

4

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

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

我面临的问题是 Selenium 将元素返回为不可见，但真正的最终用户可以看到并执行操作而不会出现任何问题。这里最好的解决方案是更改站点的源代码以使 SeleniumFirefoxDriver和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();
}

相关阅读：

于 2013-09-04T04:54:33.650 回答