使用TestCafe测试时遇“目标位于布局视口外”错误求助

你遇到的问题是TestCafe默认会校验操作目标是否在当前布局视口内，虽然控制台能找到元素，但测试执行时元素可能处于页面未滚动到的区域，导致触发报错。下面是几个可行的解决办法：

• 先滚动到元素位置再点击
  在点击前先调用scrollIntoView方法将元素滚动到视口内：

  const targetBtn = Selector('#aab-select-target');
  await t.scrollIntoView(targetBtn).click(targetBtn);
  

• 禁用视口检查选项
  点击时通过配置参数跳过TestCafe的视口校验：

  await t.click('#aab-select-target', { checkActionElementInViewport: false });
  

• 等待元素完全可见后操作
  确保元素不仅存在，还处于可见状态再执行点击：

  const targetBtn = Selector('#aab-select-target');
  await t.expect(targetBtn.visible).ok({ timeout: 3000 }).click(targetBtn);
  

内容的提问来源于stack exchange，提问作者Nisha