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

IT技术 reactjs typescript automated-tests testcafe react-virtualized
2021-04-29 22:18:53

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

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

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

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

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

但是，我遇到了几个问题：

  • 有没有办法共享Selector到ClientFunctionDOM 元素的 scrollTop 并修改它？还是我必须直接通过 DOM 重新查询元素？
  • 由于ListItems 的高度不同，滚动位置不是简单的 index x item 高度计算。如何在此功能中保持更新/滚动，直到所需Selector的可见？
1个回答

有没有办法将 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为目标元素的动作。

其它你可能感兴趣的问题
上一篇不使用箭头函数将参数传递给 prop 函数 下一篇为什么更新的状态没有反映在事件侦听器中：React Native、Hooks