Testcafe：脚本在 Firefox 浏览器中运行良好，但在 chrome 浏览器中失败，因为 testcafe 无法滚动答案

【问题标题】：Testcafe: Scripts are working fine in Firefox browser but are failing in chrome browser because testcafe is not able to scrollTestcafe：脚本在 Firefox 浏览器中运行良好，但在 chrome 浏览器中失败，因为 testcafe 无法滚动
【发布时间】：2022-09-27 17:33:50
【问题描述】：

Testcafe 脚本在 Firefox 浏览器上运行良好，但在 chrome 浏览器上运行失败。我们确定的原因是 \'当应用程序在 Firefox 浏览器上打开时，testcafe 本身会向下滚动到该元素并对该元素执行操作。但是在 chrome testcafe 本身不能向下滚动并抛出错误“指定的选择器与 DOM 树中的任何元素都不匹配”。我们甚至试图强制向下滚动直到元素，但它没有工作。

我们尝试过的以下 testcafe 功能如下所述：-

滚动
ScrollIntoView
滚动
关键事件
悬停

鼠标按下事件

我们尝试的代码片段如下所述：

1. const scrollBy = ClientFunction((x, y) => { window.scrollBy(x, y);
  });  const targetElementPosition = Selector(\'#id\'); await
    scrollBy(0, targetElementPosition);

2.const target = Selector(\'#id\');   await t.scrollIntoView(target);
3. await t.scrollBy(0, #id);
4. await t.scrollIntoView(#id)
5. await t.pressKey(\'pagedown\')
6. await t.hover(\'#id\')
7. const target =Selector(\'#id\');    await t.scrollIntoView(target);
8. var el = Selector(document.getElementById(id)); el.scrollIntoView(true);
9. const target = Selector(\'#target\');
     await t
    .dispatchEvent(target, \'mousedown\')
    .wait(5000)

请为此问题提出解决方案。任何帮助，将不胜感激。先感谢您！！

标签： javascript testing automated-tests scrollbar testcafe

【解决方案1】：

Scroll TestCafe 在 Chrome 中正常工作。下面是一个例子来证明这一点：

fixture `New Fixture`
    .page `http://devexpress.github.io/testcafe/example/`;
   
test(`New Test`, async t => {
    await t
        .resizeWindow(360, 240)
        .hover('#tried-test-cafe')
        .wait(2000);
});

所以，问题是 TestCafe 在 DOM 中找不到匹配的元素。请分享一个重现错误行为的页面示例。

【讨论】：

感谢您的答复。根据我们公司的政策，我们将无法分享页面详细信息，但我们可以详细说明我们面临的情况。我们无法向下滚动的滚动条位于我们应用程序的滚动条中。如果您有任何方法，请分享方法。
不需要您的页面的实施细节。一个例子就足够了，包含最少的细节，但可以让我们准确地了解故障是什么。您在应用程序中使用任何标准组件吗？如果是这样，您可以尝试在这些组件的演示中重现此行为。无论如何，如果不确定错误的来源，就不可能找到解决方法。此外，在编译示例时，您可能会发现这篇文章很有用：testcafe.io/402636/…
我们在 CSS 中有一个属性是“overflow-y:overlay;”。由于这个属性，testcafe 无法滚动，并且 testcafe 无法找到屏幕上不可见的元素。当我们将属性改为“overflow-y:auto;”时然后 testcafe 能够滚动到元素。但是我们不能根据需要在我们的应用程序 CSS 中进行这些更改。那么您能否告诉我们如何在 testcafe 中使用这个 CSS 属性（“overflow-y:overlay;”）滚动？

【解决方案2】：

overlay 值对于 overflow-y 属性无效。 Chrome 将其视为auto，而 Firefox 将其视为错误。滚动功能不起作用，因为 Firefox 不认为元素的内容是可滚动的。如果您认为这对于您在 Firefox 中的应用程序来说不是问题，并且对于用户来说一切看起来都很好（尽管它可能没有，最好在应用程序中修复它），那么您可以尝试替换 overflow-y 样式与客户端功能：

const setStyle = ClientFunction((selector, key, value) => {
  document.querySelector(selector).style[key] = value;
})

【讨论】：