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 请求>。同样，找到该元素。然后访问计算 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

• 完成上述示例后继续示例。所有内容都已渲染，因此我们可以请求任何内容，而无需等待 DOM 操作周期。所以现在我们将讨论浏览器引擎的问题。哪种计算可以更快地完成，从而获得更好的性能。 (我可以说性能将与上面的顺序相同。因为它是关于浏览器需要去多深的深度来寻找 Selenium 的答案。但这对于结论来说太不清楚了)

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