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

debugcn 发表于 Dev

ArrayKnight

我正在使用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重新查询元素？
由于ListItems是不同的高度，因此滚动位置不是索引x项目高度的简单计算。如何在此功能内不断更新/滚动，直到Selector可见所需的内容？

aleks-pro

有没有一种方法可以将Selector共享到ClientFunction中并修改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();
});

为了滚动列表容器，我使用了hover将最后一个呈现listItem为目标元素的动作。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。