Selenium 中视口中元素的验证

Posted 2023-02-26

【中文标题】Selenium 中视口中元素的验证

【英文标题】：Verification of Element in Viewport in Selenium

【发布时间】：2017-12-27 21:06:07

【问题描述】：

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

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

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; 

如果有人研究过，可以分享一下解决方案吗？

【参考方案1】：

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

确定元素是否在视口中可见的最佳方法是使用document.elementFromPoint 将元素置于假定位置。如果它不在视口内，则返回 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);

【讨论】：

感谢 Florent B。它帮助我验证了视口中的元素。

不幸的是，它并不总是准确的，因为它关注的是元素的中间部分而不是顶部。

@dicle，如果中心可见，则认为元素可见。如果要确保元素完全可见，请检查四个角。

【参考方案2】：

感谢弗洛伦特 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)

【参考方案3】：

您可以随时检查元素的yth 位置

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

【参考方案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 是您的 WebDriver，与此方法在同一类中