Нужна помощь, чтобы проверить, есть ли элемент в текущем окне просмотра с Testcafe

Question

Я пытаюсь реализовать пользовательский метод, чтобы выяснить, находится ли элемент в текущем порту просмотра.

Ниже приведен фрагмент кода, который я пытался реализовать, но результат не отображаетлогический результат:

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);
};

Приведенный выше код работает правильно на консоли браузера, т. е. когда я пытаюсь сохранить getBoundValues в переменной A и пытаюсь выполнить команду возврата, он выводит вывод как trueили false в зависимости от видимости элемента в окне просмотра, но в скрипте. Всегда выдает false:

Вот метод, который вызывает вышеуказанный метод:

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

Выводвсегда ложно.

Вот фрагмент вывода, который я получаю при попытке 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] } } }

Чего мне не хватает?

Answer 1

Нет необходимости создавать клиентскую функцию для каждого вызова на стороне клиента.Вместо этого вы можете заключить всю функцию в вызов ClientFunction следующим образом:

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);
});

Я рекомендую вам вызывать вашу клиентскую функцию следующим образом (как описано в разделе Выполнение клиентских функций ):

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

Также может быть полезен следующий пример: Сложные запросы DOM