I am bit stuck on how to automate a dropdown without select tags and select desired values by text/name

HTML Code is below

<div tabindex="0" direction="ltqr" class="reacst-dropdown-select rty-form-control rds_wrapper_rds-wrapper-select__2XSKl    css-wmw4vi-ReactDropdownSelect e1gzf2xs0" color="#0074D9">
    <div class="react-dropdown-select-content react-dropdown-select-type-single css-v1jrxw-ContentComponent 11234ty30">
        <input class="react-dropdown-select-input" disabled="" placeholder="My View" style="border: none; background-color: transparent; display: initial;">  
    <div tabindex="-1" class="react-dropdown-select-dropdown-handle css-ouj7ce-DropdownHandleComponent e1vudypg0" rotate="0" color="#0074D9">
        <svg id="down-arrow" width="25.635" height="15.141" viewBox="0 0 25.635 15.141" style="width: 0.6rem;">
            <g id="Group_377" data-name="Group 377">
                <path id="Path_90" data-name="Path 90" d="M25.225,101.964l-.84-.846a1.406,1.406,0,0,0-1.984,0L12.823,110.7l-9.59-9.59a1.406,1.406,0,0,0-1.983,0l-.84.84a1.4,1.4,0,0,0,0,1.983L11.828,115.39a1.433,1.433,0,0,0,.994.45h0a1.433,1.433,0,0,0,.991-.45l11.407-11.428a1.423,1.423,0,0,0,0-2Z" transform="translate(0 -100.698)" fill="#555">

This is not going to be easy.

First you need to use the JavaScript Executor ExecuteScript method to modify the input so Selenium can click it. You should be able to return the element with a call to FindElement(By.Class) (don't go with my syntax - I'm not a Java expert). As long as there's only one react dropdown on the page, finding the element by class will work.

The ExecuteScript call is needed to use JavaScript to replace disabled="" with an empty string - this will enable the input, which will allow you to use Selenium to click it.

The click should cause the inputs to become active, which in turn should let you click them based on the text.

You'll probably have to do some work with inspecting elements and the F12 function on your browser to find the exact method you will need. The biggest challenge is that as far as Selenium is concerned you don't have a Select element so you won't be able to use that method.

If all else fails, you can use ExecuteScript() to change the page HTML to what you need it to be in the end - this is a desperate workaround, but sometimes necessary. It's the equivalent of setting the value to your chosen value without going through the process of selecting it from the React dropdown.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.