Как щелкнуть необработанный виртуализированный элемент в TestCafe

Я использую react-virtualized для длинного (более 1000) списка элементов для выбора. И я пытаюсь настроить сквозной тест, который требует нажатия на один из элементов, которые в настоящее время не отображаются.

Обычно я бы просто использовал что-то вроде:

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

Но поскольку отображается только небольшое подмножество ListItem, TestCafe не может найти нужный элемент.

Я пытался понять, как использовать TestCafe ClientFunction для прокрутки контейнера списка для отображения желаемого ListItem.

Однако я сталкиваюсь с несколькими проблемами:

  • Есть ли способ поделиться Selector с ClientFunction и изменить scrollTop элемента DOM? Или мне нужно повторно запросить элемент через DOM напрямую?
  • Поскольку ListItems имеют разную высоту, положение прокрутки не является простым вычислением высоты элемента индекса x. Как я могу продолжать обновлять / прокручивать эту функцию до тех пор, пока не появится желаемый Selector?

reactjs typescript automated-tests testcafe react-virtualized
person ArrayKnight    schedule 16.12.2019    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Есть ли способ поделиться селектором с ClientFunction и изменить scrollTop элемента DOM?

Есть способ поместить Selector в Client Function. См. это пример в документации TestCafe.

Как я могу продолжать обновлять / прокручивать эту функцию до тех пор, пока не появится нужный селектор?

Вы можете использовать TestCafe _ 3_, чтобы проверить, отображается ли элемент или нет. Следующий пример демонстрирует подход:

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 в качестве целевого элемента.

person aleks-pro    schedule 17.12.2019
comment
Хороший подход, немного медленный, но функциональный. - person ArrayKnight; 17.12.2019