Differences between getSize().height, getAttribute("clientHeight"), and getCssValue("height")

Question

Differences between getSize().height, getAttribute("clientHeight"), and getCssValue("height")

Discover 3 unique methods for determining an element's size in Protractor:

What sets these methods apart from each other, or are they comparable in outcomes?

^{Don't forget that you can also retrieve the element's height value using execute_script().}

Answer 1

Answer №1

If you think this answer is incorrect, feel free to downvote. I wanted to leave it as a comment, but it was too lengthy.

In essence, all the methods are essentially wrappers for WebDriverJS's requests, which are part of a complex chain ultimately wrapped up by ProtractorJS:

ProtractorJS executes a command of WebDriverJS.
WebDriverJS sends a GET request to the Selenium server (or Selenium remote control?).
Selenium manages all communication with the browser, providing specific APIs for each browser to use during communication.
Selenium requests information from the browser.
After the browser responds to Selenium, the response is sent back to WebDriverJS as a result of the initial GET request. This response is then transferred to ProtractorJS.

Ultimately, browser behavior plays a crucial role in all of this. Understanding the browser's engine can aid in analyzing aspects like DOM manipulation and viewport rendering.

Upon reviewing the WebdriverIO API documentation, here is a summary highlighting the differences between the three methods:

elm.getSize().height involves a GET request to Selenium with the URL
```
'/session/:sessionId/element/:id/size'
```
. It locates the element first, then retrieves its size. This method relies on the viewport and rendering, requiring them to be calculated for accurate results.
elm.getAttribute("clientHeight") corresponds to a GET request to Selenium with the URL
```
'/session/:sessionId/element/:id/attribute/:name'
```
. It simply accesses the height attribute without necessitating full rendering, as long as the HTML structure is available.
elm.getCssValue("height") parallels a GET request to Selenium with the URL
```
'/session/:sessionId/element/:id/css/:propertyName'
```
. Similarly, it locates the element and looks for the corresponding CSS property in the computed style. This method does not rely on viewport rendering as the computed CSS is accessible before rendering occurs.

However, it's crucial to note that Selenium communicates with the browser even when it's not actively rendering.

For instance, if there is a redirect followed by locating an input element, Selenium must wait until the input is available for location. The performance order of the three methods in such scenarios would be:
1. Retrieving HTML and CSS resources (attribute available) using elm.getAttribute("clientHeight").
2. Computing CSS (computed CSS available) with elm.getCssValue("height").
3. Rendering the viewport (computed size available) with elm.getSize().height.
Continuing the example, once the above steps are completed and everything is rendered, subsequent requests can be made without waiting for DOM manipulation cycles. At this point, browser engine efficiency becomes paramount. The speed at which calculations can be executed will directly impact performance. (The performance order may align with the previous ranking due to how deeply browsers need to search for responses to Selenium queries, but this might be too ambiguous for a definitive conclusion)

P.S. These are my speculations based on research and documentation. Feedback and opinions are always appreciated! 😀

Answer 2

If you think this answer is incorrect, feel free to downvote. I wanted to leave it as a comment, but it was too lengthy.

In essence, all the methods are essentially wrappers for WebDriverJS's requests, which are part of a complex chain ultimately wrapped up by ProtractorJS:

ProtractorJS executes a command of WebDriverJS.
WebDriverJS sends a GET request to the Selenium server (or Selenium remote control?).
Selenium manages all communication with the browser, providing specific APIs for each browser to use during communication.
Selenium requests information from the browser.
After the browser responds to Selenium, the response is sent back to WebDriverJS as a result of the initial GET request. This response is then transferred to ProtractorJS.

Ultimately, browser behavior plays a crucial role in all of this. Understanding the browser's engine can aid in analyzing aspects like DOM manipulation and viewport rendering.

Upon reviewing the WebdriverIO API documentation, here is a summary highlighting the differences between the three methods:

elm.getSize().height involves a GET request to Selenium with the URL
```
'/session/:sessionId/element/:id/size'
```
. It locates the element first, then retrieves its size. This method relies on the viewport and rendering, requiring them to be calculated for accurate results.
elm.getAttribute("clientHeight") corresponds to a GET request to Selenium with the URL
```
'/session/:sessionId/element/:id/attribute/:name'
```
. It simply accesses the height attribute without necessitating full rendering, as long as the HTML structure is available.
elm.getCssValue("height") parallels a GET request to Selenium with the URL
```
'/session/:sessionId/element/:id/css/:propertyName'
```
. Similarly, it locates the element and looks for the corresponding CSS property in the computed style. This method does not rely on viewport rendering as the computed CSS is accessible before rendering occurs.

However, it's crucial to note that Selenium communicates with the browser even when it's not actively rendering.

For instance, if there is a redirect followed by locating an input element, Selenium must wait until the input is available for location. The performance order of the three methods in such scenarios would be:
1. Retrieving HTML and CSS resources (attribute available) using elm.getAttribute("clientHeight").
2. Computing CSS (computed CSS available) with elm.getCssValue("height").
3. Rendering the viewport (computed size available) with elm.getSize().height.
Continuing the example, once the above steps are completed and everything is rendered, subsequent requests can be made without waiting for DOM manipulation cycles. At this point, browser engine efficiency becomes paramount. The speed at which calculations can be executed will directly impact performance. (The performance order may align with the previous ranking due to how deeply browsers need to search for responses to Selenium queries, but this might be too ambiguous for a definitive conclusion)

P.S. These are my speculations based on research and documentation. Feedback and opinions are always appreciated! 😀

Differences between getSize().height, getAttribute("clientHeight"), and getCssValue("height")

Answer №1

Similar questions

The body onload function fails to run upon the page loading

Positioning 3D objects in Three.js

Checking for text in an HTML table that is dynamically filled by AJAX using Selenium

Context Provider executing SetInterval twice

``Is there a way to access the $attrs data of child DOM elements from within a controller?

"Enhance gaming experience by loading game sources using jQuery Ajax and displaying them as

Top method to retrieve the text from an element using Selenium

React Native images failing to render at the same time

Using solely JavaScript, the process of eliminating parameter values from a URL on the subsequent page

Generate a new JavaScript object and populate it with information

Experiencing problems with CSS compatibility while transitioning from vanilla JavaScript to React

When it comes to optimizing JavaScript, what is the best approach for replacing multiple substrings in a string with various strings?

Stop the floating left div from wrapping onto a new line

What is the best way to organize nestedGroups in the vis.js timeline?

Using JavaScript to make an AJAX request when a dropdown menu from

Any suggestions for a quicker method to manage state changes between OnMouseDown and OnMouseUp events in React?

Error: Phonegap displaying incomplete or corrupted image

Why does setting the variable value as an argument in an AngularJS function result in the variable becoming undefined?

Using Jquery to Add HTML Elements Rather than Changing the Layout

Is there a way to deactivate the toggle button in my code?