java - 如何检查该页面是否自动滚动到适当的 block ？

Question

在我正在测试的网站上，我们有导航菜单。我想创建测试，它将单击菜单中导航中的元素并检查该屏幕是否滚动到适当的 block 。我尝试过使用 findElement，但它在整个页面上找到，而仅在屏幕尺寸上找不到。

Answer 1

这是简单的 JavaScript，它将检查元素是否在当前视口(viewport)中并返回 true/false。

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return  rect.bottom > 0 &&
            rect.right > 0 &&
            rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
            rect.top < (window.innerHeight || document.documentElement.clientHeight) ;
}

首先我们将了解它在浏览器控制台中的工作原理。

• 打开开发工具(快捷键 ctrl+shift+I)
• 将上述 JavaScript 函数复制粘贴到控制台选项卡中
• 按 Enter
• 现在通过运行以下行来检查 Questions 元素是否显示在当前页面的 View 端口中

  console.log(isElementInViewport(document.querySelector("li.-item a[href='/questions']")));

• 您应该在控制台输出中看到 false
• 现在在此页面中一直向下滚动

• 运行与上面相同的行

  console.log(isElementInViewport(document.querySelector("li.-item a[href='/questions']")));

• 这次您应该在控制台输出中看到 true，因为该元素在视口(viewport)中可见。

现在让我们看看如何在 Selenium 中使用它:

    // navigate to stackoverflow page
    driver.get("https://stackoverflow.com/");
    /* below is the javascript function that we have to run in the browser console
     * If you look at the starting of the function name declaration in the javascript you see the difference
     * `window.functioName = function(arg)` is the general notation when you 
     * want to make the javscript function available in the browser window
     */

    String jsFunction = "window.isElementInViewport= function(el) {\r\n" + 
            "    var rect = el.getBoundingClientRect();\r\n" + 
            "    return  rect.bottom > 0 &&\r\n" + 
            "            rect.right > 0 &&\r\n" + 
            "            rect.left < (window.innerWidth || document.documentElement.clientWidth) &&\r\n" + 
            "            rect.top < (window.innerHeight || document.documentElement.clientHeight) ;\r\n" + 
            "}";
    // execute the javascript function
    JavascriptExecutor js = (JavascriptExecutor) driver;
    js.executeScript(jsFunction);

    // Questions Element
    WebElement questionsEle = driver.findElement(By.cssSelector("li.-item a[href='\\/questions']"));

    // check Questions Elements before scrolling
    System.out.println(js.executeScript("return isElementInViewport(arguments[0])", questionsEle));

    // Scroll to element
    js.executeScript("arguments[0].scrollIntoView();", questionsEle);

    // check Questions Elements after scrolling
    System.out.println(js.executeScript("return isElementInViewport(arguments[0])", questionsEle));

现在您可以将这个简单的解决方案移植到您的问题了。