Why can't I use getBoundingClientRect()? - html

Question

I am trying to write a protractor test to check that a page's footer is at the bottom of the page.
I've looked at sources like these to help me:
How to get an element's top position relative to the browser's viewport?
https://plainjs.com/javascript/styles/get-the-position-of-an-element-relative-to-the-document-24/
I want to use the getBoundingClientRect function discussed in these sources to get the footer's position, but I am getting an error saying: footer.getBoundingClientRect is not a function
Here is the relevant portion of my code:
footer = element(by.css('lib-footer > mat-toolbar'));
const viewportOffset = footer.getBoundingClientRect();
const bottom = viewportOffset.bottom;
browser.driver.manage().window().getSize().then((size) => {
expect(bottom).toBeGreaterThan(size.height - 50);
});
I know that the footer element is defined because I have already run other tests on it to check things like its color and size.
Why am I being told that getBoundingClientRect is not a function?

Answer 1

This error occurred because you are trying to call the getBoundingClientRect() function on the ElementFinder type, but the ElementFinder does not have and can not call the getBoundingClientRect function.
The getBoundingClientRect function could be called from the Element object, it is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element.
So in your case, you should use the executeScript to execute JavaScript in the context of the currently selected frame or window.
SOLUTION:
// Promise based
const footer = $('lib-footer > mat-toolbar'); // or element(by.css(''));
let viewportOffset = '';
browser.executeScript('return arguments[0].getBoundingClientRect()', footer).then(value => {
viewportOffset = value;
});
const bottom = viewportOffset.bottom;
browser.driver.manage().window().getSize().then((size) => {
expect(bottom).toBeGreaterThan(size.height - 50);
});
// async/await - Highly recommended. Don't forget to add `async` before the function to use `await`
const footer = $('lib-footer > mat-toolbar');
const viewportOffset = await browser.executeScript('return arguments[0].getBoundingClientRect()', footer);
const bottom = viewportOffset.bottom;
const windowSize = await browser.driver.manage().window().getSize();
expect(bottom).toBeGreaterThan(windowSize.height - 50);