How to locate react CreatableSelect element using python selenium test

0
votes

I am trying to locate react CreatableSelect element in python selenium script and tried various ways using Xpath but still not able to simulate select option from existing dropdown menu and create new one.

Below is my html code for dropdown.

<CreatableSelect name="abc" id="abc" isClearable options={abc1}/>

Div element for CreatableSelect.

<div class=" css-2b097c-container" id="abc">
<div class=" css-yk16xz-control">
    <div class=" css-g1d714-ValueContainer">
        <div class=" css-1wa3eu0-placeholder">Select...</div>
            <div class="css-b8ldur-Input">
                <div class="" style="display: inline-block;">
                    <input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-2-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;"><div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 16px; font-family: &quot;FS Elliot Web Regular&quot;, &quot;FS Elliot Web Regular&quot;, Arial, arial, sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;">
                </div>
            </div>
        </div>
    </div>
<div class=" css-1hb7zxy-IndicatorsContainer">
<span class=" css-1okebmr-indicatorSeparator"></span>
    <div aria-hidden="true" class=" css-tlfecz-indicatorContainer">
        <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-6q0nyr-Svg">
            <path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z">
            </path>
        </svg>
    </div>
   </div>
 </div>
 <input name="abc" type="hidden" value=""></div>

Below is populated dropdown.

enter image description here

I have tried below options in my python script but nothing worked.

abc = driver.find_element_by_xpath("//div[@class=' css-tlfecz-indicatorContainer']/*[name()='svg'][@class='css-6q0nyr-Svg']")
abc.click()

Any help will be appreciated.

2
pythonreactjsseleniumautomated-tests
Please help me out on this issue. - Mayank Soni

2 Answers

0
votes
input = driver.find_element_by_xpath('//*[@id="react-select-2-input"]')
input.send_keys("TEST")
time.sleep(5)
input.send_keys(keys.ARROW.DOWN)
input.send_keys(keys.ARROW_RETURN)
0
votes

Write XPath like //div[@class='css-1wa3eu0-placeholder']//input

input=driver.find_element_by_xpath("//div[@class='css-1wa3eu0-placeholder']//input");
input.send_keys("ABC")
input.send_keys(keys.TAB)

Please confirm the python syntax. I might have done any mistake. But logic should be correct. I am writing the same kind of script in C#.