Getsize().height Vs Getattribute("clientheight") Vs Getcssvalue("height")

Here are the 3 different ways to get element's size in Protractor: elm.getSize().height; elm.getAttribute('clientHeight') elm.getCssValue('height') What is the difference between

Solution 1:

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