Unable to select drop down list in testcafe

Question

I am new to testcafe and JavaScript and unable to select drop down list by select element id. Above is my html file

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

Here is my js code

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

Its not able to even click on drop down button I am getting error " The element that matches the specified selector is not visible ".

I debugged in 0.1x speed and found that the dropdown id is getting clicked but the drop down list is not coming, it keeps showing waiting for element to appear.

Answer 1

In the Select element, multiple="" seems to be the attribute that is triggering the failure

Answer 2

There is an issue with testcafe if multiple="" attribute is provided. So I used some another approach instead of selecting options from drop down if you have a textbox type drop down. You can type the option name and hit enter key so that it gets selected.

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

)

The above approach worked for me.