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

Question

我正在使用 react-virtualized 从 select 中获取一个冗长的 (1000+) 项目列表。我正在尝试设置端到端测试，该测试需要单击当前未呈现的元素之一。

通常，我会简单地使用类似的东西：

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

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

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

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

有没有办法将 Selector 共享到 ClientFunction 并修改 DOM 元素的 scrollTop？还是我必须直接通过 DOM 重新查询元素？
由于ListItems的高度不同，所以滚动位置不是简单计算索引x项的高度。我怎样才能将 updating/scrolling 保留在此函数中，直到所需的 Selector 可见？

Answer 1

Is there a way to share a Selector into the ClientFunction and modify the DOM element's scrollTop?

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

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 作为目标元素。

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

How to click unrendered virtualized element in TestCafe

reactjs

typescript

automated-tests

testcafe

react-virtualized