getSize（）。height vs getAttribute（" clientHeight"）vs getCssValue（" height"） [英] getSize().height vs getAttribute("clientHeight") vs getCssValue("height")

问题描述

以下是在量角器中获得元素大小的三种不同方法：

1. elm.getSize（）。 height;


2. elm.getAttribute（clientHeight）


3. elm.getCssValue（height）



它们之间的区别是什么，还是等同的？

^{也可以通过 execute_script（）获得}

解决方案

我可以试试，如果答案不正确，可以随意downvote。 （我想将其加入评论，但时间太长）

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

1. ProtractorJS执行WebDriverJS的命令。


2. WebDriverJS向Selenium服务器（或Selenium远程控制？）发送GET请求


3. Selenium处理所有与浏览器通信。对于每个浏览器，他们将为Selenium在通信过程中提供一个特定的API。


4. Selenium要求浏览器提供信息。


5. 响应Selenium，它会回答WebDriverJS作为GET请求的响应。

最后，这是关于浏览器的行为。其中可以通过一些已知的浏览器的引擎进行分析。比如DOM操作和视口渲染（也许？）...

在挖掘webdriverIO API文档之后，下面是我的3个方法之间的区别。

• elm.getSize（）。height 等效于Selenium的GET请求，URL '/ session /：sessionId / element /：id / size'。首先它定位元素，然后获取元素的大小。根据浏览器行为判断，它将与视口和呈现相关。


• elm.getAttribute（clientHeight）等效于GET请求到Selenium的URL '/ session /：sessionId / element /：id / attribute /：name'。找到元素，访问其属性并查找匹配的名称。这个方法似乎不需要任何东西来渲染，但HTML就足够了。 只有高度属性存在。


• elm.getCssValue（height） GET请求到Selenium与URL '/ session /：sessionId / element /：id / css /：propertyName'。因此，同样，找到元素。然后访问计算 CSS并查找匹配的CSS属性。此方法不需要渲染视口。因为计算的CSS将在视口复制之前可用。

BUT HANG ON THERE ，因为我们都知道Selenium与浏览器通信并不总是渲染。

• 例如如果我们执行重定向， 。 Selenium将需要等待输入可用的确切时间被找到。

  
  
  1. 获取HTML和CSS资源（属性avaiable） elm.getAttribute（clientHeight）
  
  
  2. 计算CSS（计算的CSS可用） elm.getCssValue
  
  
  3. 视口呈现（计算可用大小）。 elm.getSize（）。height
  
  




• 的例子之后。一切都得到了渲染，结果我们可以请求任何东西，而不用等待DOM操作的循环。所以现在它将关于浏览器的引擎的问题。哪种计算可以更快地完成，将带来更好的性能。因为它是关于如何深度的浏览器需要去寻找Selenium的回答，但这将是太不清楚的结论） （我可以说，

这是我经过一些文档后的猜测。欢迎提出意见：D

Here are the 3 different ways to get element's size in Protractor:

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

What is the difference between them or are they equivalent?

^{It is also possible to get the height vaue through execute_script().}

解决方案

I could give a try, feel free to downvote if the answer is not correct. (I want to put it in a comment, but it is too long)

For general idea all the methods are somewhat a wrapper of WebDriverJS's request which happen in a very complex chain and wrap up by ProtractorJS, which is:

1. ProtractorJS execute a command of WebDriverJS.
2. WebDriverJS send a GET request to Selenium server (or Selenium remote control?)
3. Selenium handle all the comunicate with the browser. And for each browser they will provide a specific API for Selenium to use during the comunication.
4. Selenium ask browser to provide the information.
5. After browser response with Selenium, it will answer WebDriverJS as response of a GET request. Then the answer transfered to ProtractorJS.

So in the end, it is all about browser's behavior. Which can be analyzed by some knownledge of browser's engine. Like about DOM manipulation and viewport rendering (maybe?)...

After digging WebdriverIO API documentation, here are my sumary of difference between 3 methods.

• elm.getSize().height equivalent of the GET request to Selenium with URL '/session/:sessionId/element/:id/size'. First it locate the element, then get the size of element. Judge by browser behavior, it will related with viewport and rendering. Which require viewport to be rendered then pixel calcualtion (computed size).
• elm.getAttribute("clientHeight") equivalent of the GET request to Selenium with URL '/session/:sessionId/element/:id/attribute/:name'. Locate the element, access its attributes and looking for matched name. This method doesn't seem to require anything to be rendered but the HTML will be enough. ONLY if the height attribute being present.
• elm.getCssValue("height") equivalent of the GET request to Selenium with URL '/session/:sessionId/element/:id/css/:propertyName'. So as the same, locate the element. Then access computed CSS and looking for matched CSS property. This method does not required viewport to be rendered. Because computed CSS will be available before viewport renendering.

BUT HANG ON THERE as we all know Selenium comunicating with browser in a state that it is not always rendering.

• For example if we do a redirect then find an input. Selenium will need to wait for the exactly time the input is available to be located. And the performance of 3 method will be in this order ( fast to slow)

  1. get HTML and CSS resources (attribute avaiable) elm.getAttribute("clientHeight")
  2. computing CSS (computed CSS availble) elm.getCssValue("height")
  3. viewport render (computed size available). elm.getSize().height

• Continue of example after the above example done. Everything got rendered, in result we can request for anything without waiting for the cycle of DOM manipulation. So for now it will about the matter of browser's engine. Which calculation can be done faster will result a better performance. (I could say the porfomance will be in the same order like above. Because it is about how deep browser need to go to look for the answser to Selenium. But that will be too unclear for a conclusion)

P.S. It is all my guesses after going through some documentations. Opinion will always be welcome :D

这篇关于getSize（）。height vs getAttribute（" clientHeight"）vs getCssValue（" height"）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！