How to click unrendered virtualized element in TestCafe

Question

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?

Answer 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.