How to click unrendered virtualized element in TestCafe

拜拜、爱过 提交于 2019-12-24 03:47:10

问题


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(...)
)

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

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:

  • 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?

回答1:


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

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?

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();
});

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



来源:https://stackoverflow.com/questions/59361825/how-to-click-unrendered-virtualized-element-in-testcafe

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!