How to open the dropdown from the browser console?

[Krzysiaczek]

Hi there

I'm trying to write the Behat (BDD) test of the application made in Vue. So far so good but I've got stuck on that v-select element. If you wondering what it is, it's all about the script from one machine trying to control the steps made by user on other machine (running tested application) using JavaScript.

The problem is, when we take that https://vue-select.org/ as example, I am trying to trigger some click event action using the console in the browser but nothing seems to work in terms of opening the drop-down, The main goal is to open that dropdown and select one of the available options. I'd really appreciate if someone could enlighten me how to process this?

I tried:

document.getElementsByClassName('vs-select').click()
document.getElementsByClassName('vs__search').click()
document.getElementsByClassName('vs__selected-options').click()

etc. and none of such attempt works or is acceptable.

On my local folder I can access more methods using non production Vue environment but still it doesn't work either. Also attempts to trigger some events like mousedown, change, click with help of jQuery didn't success either.

Please advise how this could be achieved.

Thanks in advance.

[sagalbot]

The dropdown state is controlled by the focus of the input[type=search] within the component. When that element is focused, the dropdown is open. On blur, it closes.

document.querySelector(".vs__search").focus()

That should do the trick for you in tests, but won't work in the console. When hit return to call the command in the console, focus is returned to the console, which means the dropdown will never open.

setTimeout(() => document.querySelector(".vs__search").focus(), 5000);

If you run the above, then quickly click anywhere in the browser window, you'll see the dropdown open.

Best of luck!

[Krzysiaczek]

Yes, that worked for me in the test, thank you for advise.
The next thing obviously would be to choose a given option. I had to add a little bit of timeout for dropdown to open.
Could you confirm this is the right way or if there is anything more appropriate using internal events?
I meant like await for drop down to open - even I'm not sure if such events could be catch outside Vue context?

document.querySelector(".vs__search").focus()
await new Promise(r => setTimeout(() => r(), 500))
document.getElementById('vs1__option-3').click();

[sagalbot]

I think you're stuck with the timeout. You could try something like MutationObserver or the transitionend event, but the problem is that the <ul> element itself is swapped out. In the component there are two <ul>'s, controlled with a v-if/v-else. When focused, the <ul> with children is show, when blurred, an empty, hidden <ul> is shown. This means that any listeners you add before focus will be irrelevant. I think the setTimeout is the right approach for now.