getSize（）。height vs getAttribute（“clientHeight”）vs getCssValue（“height”）

Question

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

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

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

^{也可以通过height获得execute_script() vaue。}

Answer 1

我可以尝试一下，如果答案不正确，请随时投票。 （我想把它放在评论中，但它太长了）

对于一般的想法，所有方法都是WebDriverJS请求的包装器，它发生在一个非常复杂的链中并由ProtractorJS包装，它是：

1. ProtractorJS执行WebDriverJS命令。
2. WebDriverJS向Selenium服务器（或Selenium遥控器？）发送GET请求？
3. Selenium处理与浏览器的所有通信。对于每个浏览器，他们将为Selenium提供一个特定的API，以便在通信期间使用。
4. Selenium要求浏览器提供信息。
5. 在使用Selenium进行浏览器响应后，它将回答WebDriverJS作为GET请求的响应。然后答案转移到了ProtractorJS。

所以最后，这完全取决于浏览器的行为。这可以通过一些浏览器引擎的已知来分析。喜欢DOM操作和视口渲染（可能？）......

在挖掘WebdriverIO API文档之后，以下是我对3种方法之间区别的看法。

• elm.getSize().height相当于对网址为'/session/:sessionId/element/:id/size'的Selenium的GET请求。首先，它找到元素，然后获取元素的大小。根据浏览器行为判断，它将与视口和渲染相关。这需要渲染视口然后像素计算（计算尺寸）。
• elm.getAttribute("clientHeight")相当于对网址为'/session/:sessionId/element/:id/attribute/:name'的Selenium的GET请求。找到元素，访问其属性并查找匹配的名称。这个方法似乎不需要渲染任何东西，但HTML就足够了。 仅限高度属性存在。
• elm.getCssValue("height")相当于对网址为'/session/:sessionId/element/:id/css/:propertyName'的Selenium的GET请求。同样，找到元素。然后访问计算 CSS并查找匹配的CSS属性。此方法不需要呈现视口。因为在视口重新绑定之前，计算的CSS将可用。

但是HANG ON THERE 因为我们都知道Selenium在一个状态下与浏览器通信并不总是渲染。

• 例如如果我们执行重定向，那么找一个输入。 Selenium需要等待输入可用的确切时间。并且3方法的性能将按此顺序（快到慢）

  1. 获取HTML和CSS资源（属性可用）elm.getAttribute("clientHeight")
  2. 计算CSS（计算CSS可用）elm.getCssValue("height")
  3. 视口渲染（计算出的大小可用）。 elm.getSize().height
完成上述示例后，

• 继续示例。一切都被渲染，结果我们可以请求任何东西，而无需等待DOM操作的循环。所以现在它将涉及浏览器引擎的问题。哪种计算可以更快地完成将带来更好的性能。 （我可以说，这种情况将与上面的顺序相同。因为它是关于浏览器需要多长时间去寻找Selenium的答案。但是这个结论太不清楚了）

P.S。 在完成一些文档后，这是我的全部猜测。意见永远是受欢迎的：D