无法在 testcafe 中 select 下拉列表

Question

我是 testcafe 和 JavaScript 的新手，无法通过 select 元素 ID select 下拉列表。以上是我的 html 文件

<div class="collapse show" id="step-1" style="">
    <div class="card  card-body pb-0">
        <form method="post" class="form-row" id="step-form-1" data- step="2" data-wrapper-key="basic_details">
            <div class="form-group col-sm-12 pl-4 pr-4 w-100">
                <label for="states">Names of state </label>
                <select multiple="" id="states" class="form-control select2-hidden-accessible" label="Names of state"
                        inputtype="multiselect" required="" options="[object Object]" name="states" tabindex="-1"
                        aria-hidden="true">
                    <option value="1">Goa</option>
                    <option value="2">Punjab</option>
                    <option value="3">Maharshtra</option>
        </form>
    </div>
</div>

这是我的js代码

test('profile',async t=> {
    const selectStates= Selector('#states')
    const selectOption=selectStates.find('option');
    .click(selectStates)
    .click(selectOption.withText('Punjab'))
}

它甚至不能点击下拉按钮我收到错误消息“与指定 select 匹配的元素或不可见”。

我以0.1倍速调试，发现下拉id被点击了，但是下拉列表没有出现，一直显示等待元素出现

Answer 1

在 Select 元素中，multiple="" 似乎是触发失败的属性

Answer 2

如果提供了 multiple="" 属性，testcafe 就会出现问题。因此，如果您有文本框类型下拉菜单，我会使用另一种方法而不是从下拉菜单中选择选项。您可以键入选项名称并按回车键以选中它。

test('profile',async t=> {
    const selectStates= Selector('#states')
    .click(selectStates)
    .typeText(selectStates,'Goa')
    .pressKey('enter')
    .typeText(selectStates,'Punjab')
    .pressKey('enter')
    .pressKey('esc')
    .pressKey('tab')// to go with next selector in the page.
    
}

)

以上方法对我有用。

无法在 testcafe 中 select 下拉列表

Unable to select drop down list in testcafe

html

testing

automated-tests

e2e-testing

testcafe