Question

我正在使用TestCafe测试Web应用程序组件，并且需要检查列表中的某些项目。执行测试时，成功单击该元素，但未选中该复选框。

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

EDIT2：添加了执行记录器手册：

TestCafe：

Answer 1

您可以尝试以下代码：

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

Answer 2

我发现选择元素后该列表关闭了，这是出乎意料的。但是，仅根据提供的代码很难确定问题的原因。如果您准备一个演示问题的简单项目，并使用以下form

在TestCafe存储库中创建单独的错误报告，我们将不胜感激。

单击复选框项不会将元素标记为已选中

2 个答案: