WebDriver UDF - React-select dropdown list

[rundak]

Hello, 

I need some help with React-select dropdown list? How to interact with it? All option are hidden. Example:

How to choose "Silver" from single value list on this page https://react-select.com/home using WebDriver (may be WD_ExecuteScript)?

I can only click on this using code, no idea how to choose 'Silver' without clicking. 

 

Local $website_link = 'https://react-select.com/home'

$sSession = _WD_CreateSession($sDesiredCapabilities)
_WD_Navigate($sSession, $website_link)

$list = _WD_FindElement($sSession, $_WD_LOCATOR_ByXPath, "//input[@id='react-select-3-input']")
_WD_ElementAction($sSession, $list, 'click')

 

_WD_ElementAction($sSession, $list, 'value', 'Silver') doesn't work

Any idea how to do it in the easiest direct way? May be there is possibility to choose it somehow with WD_ExecuteScript?

I have already tried some instruction but no success.

 

_WD_ExecuteScript($sSession, "arguments[0].scrollIntoView();", "//input[@aria-activedescendant='react-select-3-option-9']")

 

Thank you for your help.

 

[Nine]

When you post code, please use the method shown in the link.  Here one way :

$sElement = _WD_FindElement($sSession, $_WD_LOCATOR_ByXPath, "//input[@id='react-select-3-input']")
_WD_ElementAction($sSession, $sElement, 'value', "Silver")
Local $sAction = '{"actions":[{"type":"key","id":"keyboard_1","actions":[{"type":"keyDown","value":"\uE007"},{"type":"keyUp","value":"\uE007"}]}]}'
_WD_Action($sSession, "actions", $sAction)

 

[rundak]

Sorry.
It works and it is enough for me. Thank you for your help.

Edited May 1 by rundak

[Danp2]

FWIW, there are several functions included in wd_helper.au3 for interacting with Select elements --

• _WD_ElementOptionSelect
• _WD_ElementSelectAction

[Nine]

@Danp2  React-select is quite a different beast. It won't work with standard option select functions.

Maybe you could enlighten us how it could be done more elegantly...

[SOLVE-SMART]

Hi folks 👋 ,

as @Nine already mentioned, React components are quite different. Even for really simple HTML5 things like a dropdown (select > option) that is straight forward and standardized, React (also other frameworks like Angular and so on) come up with a own variant of dealing with such user interactions 🥴 .

Anyhow, I usually debug (Event Listeners Breakpoints) the website with the Chrome DevTools to get the hidden or unreachable "list" (select > option). Then you can simply look for your (option-) selector and do a second click. See this example:

_Main()

Func _Main()
    Local Const $sUrl = 'https://react-select.com/home'
    _WD_Navigate($sSession, $sUrl)

    Local Const $sDropdownSelector = '//input[@id="react-select-3-input"]'
    _ClickElement($sDropdownSelector)

    Local Const $sOption = 'Silver'
    Local Const $sOptionSelector = StringFormat('//div[contains(@id, "react-select-3-option") and text()="%s"]', $sOption)
    _ClickElement($sOptionSelector)
EndFunc

Func _ClickElement($sSelector)
    Local Const $sElement = _WD_FindElement($sSession, $_WD_LOCATOR_ByXPath, $sSelector)
    _WD_ElementAction($sSession, $sElement, 'click')
EndFunc

You also might noticed the @id structure of the dropdown:
The input element, first click, and the option element (which is a div), second click, do have this react-select-3-* prefix which is common for this kind of react component. So you can assume to "simply" change input by option (the suffix) and you will get your element. This depends on the developer (team) who creates the website, but as I said, I saw it many times in that way structured.

@Nine this is not a more elegant way, but maybe a more straight forward one. This been said, I really like your low level _WD_Actions variant, because it can be used in other scenarios as well 🤝 .

Best regards
Sven

Edited May 2 by SOLVE-SMART

[mLipok]

Pleaae look here:

https://react-select.com/home

Which one (select element) is most comparable to your case.

Edited May 2 by mLipok

[SOLVE-SMART]

Do you ask me @mLipok or the OP who referred to the website himself? I am a bit confused 🤭 .

My code example above fits the first dropdown (select) element.

Best regards
Sven

Edited May 2 by SOLVE-SMART

[Nine]

  On 5/2/2025 at 6:35 AM, SOLVE-SMART said:

I usually debug (Event Listeners Breakpoints) the website with the Chrome DevTools to get the hidden or unreachable "list"

Expand  

Interesting.  Not familiar with this, mind sharing how to perform it ?

nvm, found it, thanks for giving us a good way to find hidden nodes.

Edited May 2 by Nine

[SOLVE-SMART]

  On 5/2/2025 at 1:32 PM, Nine said:

Interesting.  Not familiar with this, mind sharing how to perform it ?

nvm, found it, thanks for giving us a good way to find hidden nodes.

Expand  

Ohh, you are too quick and too smart unfortunately - I already created a how-to video that I will upload and share, but now you already solved it on your own 😆 . Maybe for others this could help. Video link coming soon ...

Best regards
Sven

Edited May 3 by SOLVE-SMART

[mLipok]

  On 5/2/2025 at 12:54 PM, SOLVE-SMART said:

Do you ask me @mLipok or the OP who referred to the website himself?

Expand  

OP

 

[SOLVE-SMART]

  On 5/2/2025 at 3:52 PM, SOLVE-SMART said:

[...] I already created a how-to video that I will upload and share, [...] Maybe for others this could help. Video link coming soon ...

Expand  

Here is the announced video, a little how-to one:

💡 Maybe I create few more videos like this for XPath usage and determination. I guess also for more JavaScript debugging (in the browser) etc. Time will show.

  Reveal hidden contents

In case I will create more videos like this, they can be found in this youtube playlist:

https://www.youtube.com/playlist?list=PLDoYN-7Uor1BU4GY5qui1XKVSl4udGI36

 

Best regards
Sven

👉 Btw: Forgive me, my spoken english is a bit rusty (as non native speaker). But for one take 🎬 only, it's not too bad (I hope so).

Edited May 3 by SOLVE-SMART