如何在Selenium（Java）中验证元素的百分比高度？

当你用element.getCssValue("height")拿到的是渲染后的像素值时，这是因为这个方法返回的是计算后最终生效的样式值，而非元素最初设置的百分比声明值。要拿到百分比形式的高度，可以通过以下两种方式实现：

• 读取内联样式中的原始百分比
  如果元素的高度是通过内联style属性直接设置的百分比，直接读取style.height就能拿到原始值，用Selenium执行JS的写法如下：

  String percentageHeight = (String) ((JavascriptExecutor) driver).executeScript(
      "return arguments[0].style.height;", element);
  

  注意：这种方法仅对内联样式生效，若高度是在外部样式表或<style>标签中定义的，无法通过此方式获取。

• 通过计算得到百分比（兼容外部样式）
  如果高度是通过外部样式定义的，浏览器的计算样式通常会返回像素值，这时可以通过元素与父元素的实际像素高度比值来计算百分比：

  String percentageHeight = (String) ((JavascriptExecutor) driver).executeScript(
      "var elem = arguments[0]; " +
      "var parentHeight = elem.parentElement.offsetHeight; " +
      "var elemHeight = elem.offsetHeight; " +
      "return (elemHeight / parentHeight * 100) + '%';", element);
  

  要是元素高度基于视口（比如使用vh单位），则换成除以视口高度计算：

  String viewportPercentage = (String) ((JavascriptExecutor) driver).executeScript(
      "var elem = arguments[0]; " +
      "var viewportHeight = window.innerHeight; " +
      "var elemHeight = elem.offsetHeight; " +
      "return (elemHeight / viewportHeight * 100) + '%';", element);
  

内容的提问来源于stack exchange，提问作者Poseidon Greek