在 Selenium 中验证视口中的元素

Question

如何使用 Selenium 验证元素在视口中是否可见（浏览器的可见性）？

我试过下面的代码，但是点对象（Y 值）returns 巨大的价值，因为页面是可滚动的。这里正在获取浏览器的元素尺寸、位置和尺寸并进行比较。

Dimension weD = element.getSize(); //to get the element Dimensions
Point weP = element.getLocation(); // getting the location of the element in the page.

Dimension d = driver.manage().window().getSize(); // To get the browser dimensions
int x = d.getWidth(); //browser width
int y = d.getHeight(); //browser height
int x2 = weD.getWidth() + ewp.getX();
int y2 = weD.getHeight() + ewp.getY();
return x2 <= x && y2 <= y;

如果有人解决过，能否请您分享解决方案？

Answer 1

无法直接通过 API，因此您必须使用脚本注入。

确定元素在视口中是否可见的最佳方法是使用 document.elementFromPoint 将元素置于假定位置。 returns 如果它不在视口内，则为 null，如果在视口内，则为 null 或后代。

public static Boolean isVisibleInViewport(WebElement element) {
  WebDriver driver = ((RemoteWebElement)element).getWrappedDriver();

  return (Boolean)((JavascriptExecutor)driver).executeScript(
      "var elem = arguments[0],                 " +
      "  box = elem.getBoundingClientRect(),    " +
      "  cx = box.left + box.width / 2,         " +
      "  cy = box.top + box.height / 2,         " +
      "  e = document.elementFromPoint(cx, cy); " +
      "for (; e; e = e.parentElement) {         " +
      "  if (e === elem)                        " +
      "    return true;                         " +
      "}                                        " +
      "return false;                            "
      , element);
}

Answer 2

谢谢 Florent B. 转换为 python:

def is_element_visible_in_viewpoint(driver, element) -> bool:
    return driver.execute_script("var elem = arguments[0],                 " 
                                 "  box = elem.getBoundingClientRect(),    " 
                                 "  cx = box.left + box.width / 2,         " 
                                 "  cy = box.top + box.height / 2,         " 
                                 "  e = document.elementFromPoint(cx, cy); " 
                                 "for (; e; e = e.parentElement) {         " 
                                 "  if (e === elem)                        " 
                                 "    return true;                         " 
                                 "}                                        " 
                                 "return false;                            "
                                 , element)

Answer 3

您始终可以检查元素的 yth 位置

yth = int(driver.execute_script("return document.querySelector('{el_selector}').getBoundingClientRect()".format(el_selector=el_selector)))

Answer 4

感谢 Florent B. 和 Ben Moskovitch .转换为 c# :

private bool IsVisibleInViewport(IWebElement element) => (bool)((IJavaScriptExecutor)_webDriver).ExecuteScript("var elem = arguments[0], box = elem.getBoundingClientRect(), cx = box.left + box.width / 2,  cy = box.top + box.height / 2,  e = document.elementFromPoint(cx, cy); for (; e; e = e.parentElement) { if (e === elem) return true;} return false;", element);

其中 _webDriver 是您的网络驱动程序，与此方法class相同

在 Selenium 中验证视口中的元素

Verification of Element in Viewport in Selenium

css

java

selenium

viewport