Нажатие на элемент флажка не помечает элемент как отмеченный

Question

Я использую TestCafe для тестирования компонента веб-приложения, и мне нужно проверить некоторые элементы в списке.При выполнении теста элемент успешно щелкается, но флажок не устанавливается.

<div _ngcontent-c36="" class="btn-group input-find-container findItem-status">
                        <multiple-selection _ngcontent-c36="" class="multiple-selection ng-untouched ng-pristine ng-valid" _nghost-c28=""><div _ngcontent-c28="" class="multiple-selection-container open" tabindex="1" id="cd0a2b7d-089d-4c33-a102-655f64644c22">
    <div _ngcontent-c28="" class="selected-values-list">
        <div _ngcontent-c28="" class="selected-values">Status:
            <!----><span _ngcontent-c28="">All</span>
            <!---->
        </div>
        <smart-icon _ngcontent-c28="" class="smart-icon arrow" _nghost-c7=""><svg _ngcontent-c7="" class="svg"><use xlink:href="#core_arrow_small_up"></use></svg></smart-icon>
    </div>

    <!----><div _ngcontent-c28="" class="scroller-multiple-selection">
        <div _ngcontent-c28="" class="scroller">
            <!----><div _ngcontent-c28="" class="scroller-item" tabindex="0" id="itemContainer_cd0a2b7d-089d-4c33-a102-655f64644c22_0">
                <checkbox _ngcontent-c28="" _nghost-c31=""><div _ngcontent-c31="" class="checkbox-container">
    <input _ngcontent-c31="" type="checkbox" id="checkbox-component-ACTIVE_item">
    <label _ngcontent-c31="" class="hasLabel" for="checkbox-component-ACTIVE_item">
        <div _ngcontent-c31="" class="icon-container">
            <!---->
            <!---->
        </div>
        <!----><div _ngcontent-c31="">Active</div>
    </label>
</div></checkbox>
            </div><div _ngcontent-c28="" class="scroller-item" tabindex="1" id="itemContainer_cd0a2b7d-089d-4c33-a102-655f64644c22_1">
                <checkbox _ngcontent-c28="" _nghost-c31=""><div _ngcontent-c31="" class="checkbox-container">
    <input _ngcontent-c31="" type="checkbox" id="checkbox-component-BLOCKED_item">
    <label _ngcontent-c31="" class="hasLabel" for="checkbox-component-BLOCKED_item">
        <div _ngcontent-c31="" class="icon-container">
            <!---->
            <!---->
        </div>
        <!----><div _ngcontent-c31="">Blocked</div>
    </label>
</div></checkbox>
            </div><div _ngcontent-c28="" class="scroller-item" tabindex="2" id="itemContainer_cd0a2b7d-089d-4c33-a102-655f64644c22_2">
                <checkbox _ngcontent-c28="" _nghost-c31=""><div _ngcontent-c31="" class="checkbox-container">
    <input _ngcontent-c31="" type="checkbox" id="checkbox-component-INACTIVE_item">
    <label _ngcontent-c31="" class="hasLabel" for="checkbox-component-INACTIVE_item">
        <div _ngcontent-c31="" class="icon-container">
            <!---->
            <!---->
        </div>
        <!----><div _ngcontent-c31="">Inactive</div>
    </label>
</div></checkbox>
            </div><div _ngcontent-c28="" class="scroller-item" tabindex="3" id="itemContainer_cd0a2b7d-089d-4c33-a102-655f64644c22_3">
                <checkbox _ngcontent-c28="" _nghost-c31=""><div _ngcontent-c31="" class="checkbox-container">
    <input _ngcontent-c31="" type="checkbox" id="checkbox-component-IN_APROVEMENT_item">
    <label _ngcontent-c31="" class="hasLabel" for="checkbox-component-IN_APROVEMENT_item">
        <div _ngcontent-c31="" class="icon-container">
            <!---->
            <!---->
        </div>
        <!----><div _ngcontent-c31="">In aprovement</div>
    </label>
</div></checkbox>
            </div><div _ngcontent-c28="" class="scroller-item" tabindex="4" id="itemContainer_cd0a2b7d-089d-4c33-a102-655f64644c22_4">
                <checkbox _ngcontent-c28="" _nghost-c31=""><div _ngcontent-c31="" class="checkbox-container">
    <input _ngcontent-c31="" type="checkbox" id="checkbox-component-NEW_item">
    <label _ngcontent-c31="" class="hasLabel" for="checkbox-component-NEW_item">
        <div _ngcontent-c31="" class="icon-container">
            <!---->
            <!---->
        </div>
        <!----><div _ngcontent-c31="">New</div>
    </label>
</div></checkbox>
            </div><div _ngcontent-c28="" class="scroller-item" tabindex="5" id="itemContainer_cd0a2b7d-089d-4c33-a102-655f64644c22_5">
                <checkbox _ngcontent-c28="" _nghost-c31=""><div _ngcontent-c31="" class="checkbox-container">
    <input _ngcontent-c31="" type="checkbox" id="checkbox-component-SUSPENDED_item">
    <label _ngcontent-c31="" class="hasLabel" for="checkbox-component-SUSPENDED_item">
        <div _ngcontent-c31="" class="icon-container">
            <!---->
            <!---->
        </div>
        <!----><div _ngcontent-c31="">Suspended</div>
    </label>
</div></checkbox>
            </div>
        </div>
    </div>
</div></multiple-selection>
                    </div>

Я попытался использовать перечисленные ниже селекторы безуспешно.

.hover(Selector('div.scroller-multiple-selection > div.scroller').find('[tabindex = "0"]'))
.click(Selector('div.scroller-multiple-selection > div.scroller').find('[tabindex = "0"]'))
.click(packagesPage.statusListButton);
enter code here

Я ожидаю, что флажок будет установлен, но по элементу щелкают и список элементов закрывается.

РЕДАКТИРОВАТЬ: После установки флажка вручную, генерируется следующий код:

<div _ngcontent-c30="" class="scroller-item" tabindex="0" id="itemContainer_4a43b583-5645-443e-a813-6cd559e53212_0">
                <checkbox _ngcontent-c30="" _nghost-c27=""><div _ngcontent-c27="" class="checkbox-container">
    <input _ngcontent-c27="" type="checkbox" id="checkbox-component-ACTIVE_item">
    <label _ngcontent-c27="" class="hasLabel" for="checkbox-component-ACTIVE_item">
        <div _ngcontent-c27="" class="icon-container">
            <!----><smart-icon _ngcontent-c27="" class="smart-icon" icon="core_check" _nghost-c7=""><svg _ngcontent-c7="" class="svg"><use xlink:href="#core_check"></use></svg></smart-icon>
            <!---->
        </div>
        <!----><div _ngcontent-c27="">Active</div>
    </label>
</div></checkbox>
            </div>

РЕДАКТИРОВАТЬ2: Добавлено руководство записи выполнения:

TestCafe:

Answer 1

Мне показалось неожиданным, что список закрывается после выбора элемента.Однако определить причину проблемы сложно только на основе предоставленного кода.Буду признателен, если вы подготовите простой проект, демонстрирующий проблему, и создадите отдельный отчет об ошибке в репозитории TestCafe, используя следующую форму

Answer 2

Не могли бы вы попробовать этот код:

const firstFilter = Selector('div.scroller-multiple-selection > div.scroller').find('[tabindex="0"]');
const firstFilterCheckbox = firstFilterSelector
  .find('input [type="checkbox"]');

await t
  .hover(firstFilter)
  .hover(firstFilterCheckbox)
  .click(firstFilterCheckbox);

или этот код:

const firstFilter = Selector('div.scroller-multiple-selection > div.scroller').find('[tabindex="0"]');
const firstFilterCheckbox = firstFilterSelector
  .find('checkbox');

await t
  .hover(firstFilter)
  .hover(firstFilterCheckbox)
  .click(firstFilterCheckbox);