需要帮助，以使用Testcafe检查元素是否在当前视口中 [英] Need Help to check if element is in current Viewport with Testcafe

问题描述

我正在尝试实现一个自定义方法，以找出该元素是否在当前视口中

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

以上代码在浏览器控制台上正常运行，即，当我尝试将getBoundValues存储在变量A中并尝试运行return命令时，根据元素的可见性，它会将输出打印为true或false在视口中，但在脚本中，它总是给出错误:

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

输出始终为假.

这是我尝试console.log(getBoundValues)时收到的输出摘要:

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] } } }

我想念什么?

推荐答案

不需要为每个客户端调用都创建一个客户端函数.而是可以将整个函数包装到ClientFunction调用中，如下所示:

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

这篇关于需要帮助，以使用Testcafe检查元素是否在当前视口中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！