automated-tests - 需要帮助以使用 Testcafe 检查元素是否在当前视口(viewport)中

Question

我正在尝试实现一个自定义方法来确定元素是否在当前视口(viewport)中

下面是我尝试实现但结果不呈现 bool 结果的代码片段:

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 命令，它根据视口(viewport)中元素的可见性将输出打印为 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);
});

我建议您按如下方式调用您的客户端函数(如 Executing Client Functions 主题中所述):

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

以下示例也可能有用: Complex DOM Queries