我正在使用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项目高度。如何在此函数中不断更新/滚动,直到所需的选择器
可见?
最佳答案
Is there a way to share a Selector into the ClientFunction and modify the DOM element's scrollTop?
有一种方法可以将选择器
放入客户端函数
中。请引用this TestCafe 文档中的示例。
How can I keep updating/scrolling within this function until the desired Selector is visible?
您可以使用 TestCafe exist
属性来检查元素是否呈现。以下示例演示了该方法:
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();
});
为了滚动列表容器,我使用了 hover
将最后渲染的 listItem
作为目标元素的操作。
关于reactjs - 如何在 TestCafe 中单击未渲染的虚拟化元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59361825/