Need Help to check if element is in current Viewport with Testcafe

Question

I'm trying to implement a custom method to find out if the element is in the current view port

Below is the snippet of code that I've tried to implement but the outcome does not render the boolean result:

export const isElementInViewport = () => {
const getBoundValues = ClientFunction(() => document.querySelectorAll(".hero-getstart").item(0).getBoundingClientRect());

const windowHeight = ClientFunction(() => window.innerHeight);
const windowWidth = ClientFunction(() => window.innerWidth);

return getBoundValues.bottom > 0 && getBoundValues.right > 0 && getBoundValues.left < (windowWidth || document.documentElement.clientWidth) && getBoundValues.top < (windowHeight || document.documentElement.clientHeight);
};

The above code runs properly on the browser console, i.e when I try to store the getBoundValues in a variable A and try to run the return command, it prints the output as true or false depending on the visibility of the element in the viewport but in the script, It always gives a false:

Here's the method which triggers the above method:

export const verifyElementInView = () => {
  const elementVisible = isElementInViewport();
  console.log(elementVisible);
};

The output is always false.

Here's the snippet of output I receive upon trying to console.log(getBoundValues):

{ [Function: __$$clientFunction$$]
with: [Function],
[Symbol(functionBuilder)]: 
ClientFunctionBuilder {
callsiteNames: 
  { instantiation: 'ClientFunction',
    execution: '__$$clientFunction$$' },
 fn: [Function],
 options: {},
 compiledFnCode: '(function(){ return (function () {return document.querySelectorAll(".hero-getstart").item(0).getBoundingClientRect();});})();',
 replicator: 
  { transforms: [Array],
    transformsMap: [Object],
    serializer: [Object] } } }

What am I missing?

Answer 1

There's no need to create a client function for each client-side call. Instead, you can wrap the entire function into the ClientFunction call as follows:

const isElementInViewport = ClientFunction(() => {
  const getBoundValues = document.querySelector("#developer-name").getBoundingClientRect();

  const windowHeight =  window.innerHeight;
  const windowWidth = window.innerWidth;

  return getBoundValues.bottom > 0 && getBoundValues.right > 0 && getBoundValues.left < (windowWidth || document.documentElement.clientWidth) && getBoundValues.top < (windowHeight || document.documentElement.clientHeight);
});

I recommend that you call your client function as follows (as described in the Executing Client Functions topic):  

test('ClientFunctionCall', async t => {
  const elementVisible = await isElementInViewport();
  console.log(elementVisible)
});

  The following example might also be useful: Complex DOM Queries