How to code asynchronous dynamic dropDown in Taiko JS

Question

I have a modal which has two drop down fields. The second field depends on the value selected in the first field.

I am using Taiko and Gauge to create a test framework, but when I try and execute the below code it errors on not being able to find the value with the name 'teamID'.

step("Select team <content>", async(content) => {
    await dropDown({name:'teamType'}).select(content)
    await dropDown({name:'teamID'}).select('Team1')
});

Answer 1

We had to create a custom function for this as taiko did not support it in headless mode.

async function selectDropDown(dropdownField, dropDownOption){
    await waitFor(1200)
    await click(dropDown({name:dropdownField}))
    await write(dropDownOption, into(dropDown({name:dropdownField})))
    await click(dropDown({name:dropdownField}))
}