0

My website has an infinite scroll (lazy loading). I am trying to check if an element is visible to the user, meaning if it is on the viewport. But I couldn't find a method in testcafe for this purpose.

The .exists and .visible methods seem to be not bound by viewport.

Is there any special method or function that could be used here?

Update: I just tried the client function from the linked answer. I am not sure if am doing it right, especially the selector part. Please help.

const isElementInViewport = ClientFunction(() => {
    const getBoundValues = Selector('.grid-x').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);
});

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

Error Log (at line const elementVisible = await isElementInViewport()):

1) An error occurred in ClientFunction code:
ReferenceError: Can't find variable: _exportableLib
Janaaaa
  • 1,346
  • 1
  • 16
  • 34
  • thanks @AlexSkorkin. I have updated my question after trying out the client function now. Could you help with that error please? '.grid-x' is the div class in DOM that covers all of the test area in my site. – Janaaaa Jun 23 '20 at 20:50
  • 1
    The `Selector` constructor cannot be used in a ClientFunction body. You can use `document.querySelector` instead. – Andrey Belym Jun 24 '20 at 15:26
  • 1
    If you want to pass an existing selector to function, you can use the `dependencies` option: https://devexpress.github.io/testcafe/documentation/reference/test-api/clientfunction/constructor.html#optionsdependencies – Andrey Belym Jun 24 '20 at 15:29
  • thank you very much. This helped me understand more on how that client function actually worked. But I now realize that it might not help in my scenario. I will try different approaches though. If nothing works, I will post it in a new query along with the full code. thanks again. – Janaaaa Jun 24 '20 at 22:09

0 Answers0