如何在TestCafe中单击未渲染的虚拟化元素

Question

我正在使用 react-virtualized 来选择冗长 (1000+( 的项目列表。我正在尝试设置一个端到端测试，需要单击当前未渲染的元素之一。

通常，我只会使用类似的东西：

await t.click(
ReactSelector('ListPage')
.findReact('ListItem')
.nth(873) // or .withText(...) or .withProps(...)
)

但是，由于只渲染了ListItem的一小部分，TestCafe 无法找到所需的元素。

我一直在尝试弄清楚如何使用TestCafe的ClientFunction来滚动列表容器，以便呈现所需的ListItem。

但是，我遇到了一些问题：

• 有没有办法将Selector共享到ClientFunction中并修改 DOM 元素的 scrollTop？还是我必须直接通过 DOM 重新查询元素？
• 由于ListItem是不同的高度，滚动位置不是索引x项目高度的简单计算。如何在此功能中不断更新/滚动，直到所需的Selector可见？

Answer 1

有

没有办法将选择器共享到客户端函数中并修改DOM元素的scrollTop？

有一种方法可以将Selector放入Client Function.请参考TestCafe文档中的此示例。

如何在此功能中继续更新/滚动，直到所需的选择器可见？

可以使用 TestCafeexist属性来检查元素是否已呈现。以下示例演示了该方法：

import { Selector } from 'testcafe';
fixture`Getting Started`.page('https://bvaughn.github.io/react-virtualized/#/components/List')
test('Test 1', async t => {
const dynamicRowHeightsInput = Selector('._1oXCrgdVudv-QMFo7eQCLb');
const listItem               = Selector('._113CIjCFcgg_BK6pEtLzCZ');
const targetItem             = listItem.withExactText('Tisha Wurster');
await t.click(dynamicRowHeightsInput);
while (!await targetItem.exists) {
const currentLastRenderdItemIndex = await listItem.count -1;
const currentLastRenderdItemText  = await listItem.nth(currentLastRenderdItemIndex).textContent;
const currentLastRenderdItem      = await listItem.withExactText(currentLastRenderdItemText);
await t.hover(currentLastRenderdItem);
}
await t
.hover(targetItem)
.click(targetItem);
await t.debug();
});

为了滚动列表容器，我使用了带有上次渲染listItem的hover操作作为目标元素。