Как выбрать или передать значение в скрытый тип для выпадающего списка на сайте?

Question

[очень новое в селене и HTML]

Я хочу выбрать раскрывающийся список на веб-сайте.type скрыто.Я просто хочу передать или выбрать male или female из выпадающего списка или передать его в переменную value, как мне это сделать?

Я использовал элемент проверки в chrome, чтобы определить, какие две строки ниже необходимы для выбора значения.

<div class="Select has-value is-clearable is-searchable Select--single">
    <input name="customer.gender" type="hidden" value="female">

Я получил xpath из chrome и попытался передать значение, но не сработал:

gender = driver.find_element_by_xpath("//*[@id='app']/div/div[1]/div[4]/div/div[2]/form/div[1]/div/div[2]/div[3]/div[2]/div/span[2]/div/input")
gender.send_keys('male')

Весь HTML-код указанного выше элемента div:

<div class="Select has-value is-clearable is-searchable Select--single">
    <input name="customer.gender" type="hidden" value="female">
    <div class="Select-control">
        <span class="Select-multi-value-wrapper" id="react-select-5--value">
            <div class="Select-value">
                <span class="Select-value-label" role="option" aria-selected="true" id="react-select-5--value-item">Female</span>
            </div>
            <div class="Select-input" style="display: inline-block;">
                <input aria-activedescendant="react-select-5--value" aria-expanded="false" aria-haspopup="false" 
                    aria-owns="" role="combobox" value="" style="box-sizing: content-box; width: 5px;">
                <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 14px; font-family: Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;"></div>
            </div>
        </span>
        <span aria-label="Clear value" class="Select-clear-zone" title="Clear value">
            <span class="Select-clear">×</span>
        </span>
        <span class="Select-arrow-zone">
            <span class="Select-arrow"></span>
        </span>
    </div>
</div>

Заранее спасибо.

edit:

HTML, откуда я щелкаю раскрывающийся список без выбранных значений:

<div class="Select is-searchable Select--single">
    <div class="Select-control">
        <span class="Select-multi-value-wrapper" id="react-select-5--value">
            <div class="Select-placeholder">Select:</div>
            <div class="Select-input" style="display: inline-block;">
                <input aria-activedescendant="react-select-5--value" aria-expanded="false" aria-haspopup="false"
                    aria-owns="" role="combobox" value="" style="box-sizing: content-box; width: 5px;">
                <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; 
                            overflow: scroll; white-space: pre; font-size: 14px; 
                            font-family: Helvetica, Arial, sans-serif; font-weight: 400; 
                            font-style: normal; letter-spacing: normal; text-transform: none;"></div>
            </div>
        </span>
        <span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
    </div>
</div>

edit2:

HTML из значения, выбранного ввыпадающий

<div class="Select has-value is-clearable is-searchable Select--single">
    <input name="customer.gender" type="hidden" value="male">
    <div class="Select-control">
        <span class="Select-multi-value-wrapper" id="react-select-5--value">
            <div class="Select-value">
                <span class="Select-value-label" role="option" aria-selected="true" id="react-select-5--value-item">Male</span>
            </div>
            <div class="Select-input" style="display: inline-block;">
                <input aria-activedescendant="react-select-5--value" aria-expanded="false" aria-haspopup="false" 
                    aria-owns="" role="combobox" value="" style="box-sizing: content-box; width: 5px;">
                <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; 
                            overflow: scroll; white-space: pre; font-size: 14px; 
                            font-family: Helvetica, Arial, sans-serif; font-weight: 400; 
                            font-style: normal; letter-spacing: normal; text-transform: none;"></div>
            </div>
        </span>
        <span aria-label="Clear value" class="Select-clear-zone" title="Clear value">
            <span class="Select-clear">×</span>
        </span>
        <span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
    </div>
</div>

Answer 1

Ваш раскрывающийся список является компонентом React, я получаю пример с этого сайта .

// click on dropdown to expand options
dirver.find_element_by_xpath("//span[@id='react-select-5--value']/..").click();

// choose option
dirver.find_element_by_xpath(
    "//span[@id='react-select-5--value']/../.." +
    "//div[@role='option'][text()='%s']".format("Male")).click();

Параметры раскрывающегося списка внутри узла: <div class="Select-menu-outer">, этот узел присоединяется к странице послеВы щелкаете по раскрывающемуся списку и удаляете со страницы после выбора одного из вариантов.