javascript - getSize().height 对比 getAttribute ("clientHeight") 对比 getCssValue ("height")

Question

以下是在 Protractor 中获取元素大小的 3 种不同方法:

1. > elm.getSize().height;
2. > elm.getAttribute("clientHeight")
3. > elm.getCssValue("height")

它们之间有什么区别或者它们是等价的？

^{也可以通过execute_script()获取height值。}

Answer 1

我可以试一试，如果答案不正确，请随意投反对票。 (我想放在评论里，但是太长了)

一般来说，所有方法都是 WebDriverJS 请求的包装器，它发生在一个非常复杂的链中并由 ProtractorJS 包装，即:

1. ProtractorJS 执行 WebDriverJS 的命令。
2. WebDriverJS 向 Selenium 服务器(或 Selenium 远程控制？)发送 GET 请求
3. Selenium 处理与浏览器的所有通信。对于每个浏览器，他们将提供一个特定的 API 供 Selenium 在通信期间使用。
4. Selenium 要求浏览器提供信息。
5. 在浏览器响应 Selenium 之后，它将响应 WebDriverJS 作为 GET 请求的响应。然后将答案传输到 ProtractorJS。

所以最终，一切都与浏览器的行为有关。可以通过浏览器引擎的一些知识来分析。比如 DOM 操作和视口(viewport)渲染(也许？)...

在挖掘 WebdriverIO API 文档后，这里是我对 3 种方法之间差异的总结。

• elm.getSize().height 相当于使用 URL '/session/:sessionId/element/:id/size' 对 Selenium 的 GET 请求。首先它定位元素，然后获取元素的大小。通过浏览器行为来判断，它会与视口(viewport)和渲染相关。这需要渲染视口(viewport)，然后进行像素计算(计算大小)。
• elm.getAttribute("clientHeight") 相当于使用 URL '/session/:sessionId/element/:id/attribute/:name' 对 Selenium 的 GET 请求。找到元素，访问其属性并查找匹配的名称。此方法似乎不需要呈现任何内容，但 HTML 就足够了。 仅当存在高度属性时。
• elm.getCssValue("height") 相当于使用 URL '/session/:sessionId/element/:id/css/:propertyName' 对 Selenium 的 GET 请求。同样，定位元素。然后访问 computed CSS 并寻找匹配的 CSS 属性。此方法不需要渲染视口(viewport)。因为计算的 CSS 将在视口(viewport)渲染之前可用。

但坚持下去 因为我们都知道 Selenium 与浏览器通信的状态并不总是呈现。

• 例如如果我们做一个重定向然后找到一个输入。 Selenium 需要等待输入可用的确切时间才能定位。而 3 种方法的性能将按此顺序(从快到慢)

  1. 获取 HTML 和 CSS 资源(属性可用)elm.getAttribute("clientHeight")
  2. 计算 CSS(计算 CSS 可用)elm.getCssValue("height")
  3. 视口(viewport)渲染(可用计算尺寸)。 elm.getSize().height

• Continue of example 在上面的例子完成之后。一切都已呈现，结果我们可以请求任何东西而无需等待 DOM 操作周期。所以现在它是关于浏览器引擎的问题。哪种计算可以更快地完成将导致更好的性能。 (我可以说性能将与上面的顺序相同。因为它是关于浏览器需要多深才能找到 Selenium 的答案。但这对于结论来说太不清楚了)

P.S. 这都是我在查阅一些文档后的猜测。意见永远是受欢迎的:D