需要帮助以使用 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)
});

以下示例也可能有用:复杂的 DOM 查询

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