如何在TestCafe中单击未渲染的虚拟元素 [英] How to click unrendered virtualized element in TestCafe

问题描述

我正在使用反应虚拟化来获取一长串(1000多种)可供选择的项目.而且我正在尝试建立一个端到端测试，该测试需要单击当前未渲染的元素之一.

I'm using react-virtualized for a lengthy (1000+) list of items to select from. And I'm trying to set up an end to end test that requires clicking on one of the elements that are not currently rendered.

通常，我只会使用类似的内容:

Ordinarily, I'd simply use something like:

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

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

But because only a small subset of the ListItems are rendered, TestCafe fails to find the desired element.

我一直在尝试找出如何使用TestCafe的

I've been trying to figure out how to use TestCafe's ClientFunction to scroll the list container so the desired ListItem is rendered.

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

However, I'm running into a few issues:

• 是否可以将Selector共享到ClientFunction中并修改DOM元素的scrollTop?还是我必须直接通过DOM重新查询元素?
• 由于ListItem的高度不同，因此滚动位置不是简单计算索引 x 项高度的简单方法.如何在此功能内不断更新/滚动，直到显示所需的Selector为止?

• Is there a way to share a Selector into the ClientFunction and modify the DOM element's scrollTop? Or do I have to re-query the element via the DOM directly?
• Due to the ListItems being different heights, the scroll position is not a simple calculation of index x item height. How can I keep updating/scrolling within this function until the desired Selector is visible?

推荐答案

是否可以将Selector共享到ClientFunction中并修改DOM元素的scrollTop?

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

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

There is a way to put Selector into the Client Function. Please refer to this example in the TestCafe documentation.

如何在此功能内不断更新/滚动，直到所需的选择器可见?

How can I keep updating/scrolling within this function until the desired Selector is visible?

您可以使用TestCafe

You can use the TestCafe exist property to check if the element is rendered or not. The following example demonstrates the approach:

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

To scroll the list container I used the hover action with a last rendered listItem as a target element.

这篇关于如何在TestCafe中单击未渲染的虚拟元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！