如何为网站上的下拉选项列表选择或传递值到隐藏类型？答案

【问题标题】：How to select or pass value into hidden type for drop down picklist on website?如何为网站上的下拉选项列表选择或传递值到隐藏类型？
【发布时间】：2018-10-18 22:00:15
【问题描述】：

[在 selenium 和 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">

我从 chrome 获得了 xpath，并尝试传递一个值但没有成功：

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')

上述div元素的整个HTML是：

<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>

提前谢谢你。

编辑：

我单击下拉列表时未选择任何值的 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>

编辑2：

来自下拉列表中选择的值的 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>

【问题讨论】：

您没有显示完整/正确的下拉列表 HTML 代码，我没有看到选项 Male 的 HTML 代码
@yong 该选项仅在我从下拉列表中选择时才会更改。我在代码的其他任何地方都看不到它。一旦我点击按钮，值就会改变。
@yong 你觉得我还缺少什么吗？
请给您的下拉菜单截图。下拉菜单是否来自 React 组件？

标签： python selenium google-chrome selenium-webdriver

【解决方案1】：

您的下拉列表是一个 React 组件，我从这个 site 获得示例。

// 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">，该节点点击下拉后附加到页面，选择一个选项后从页面中取消附加。

【讨论】：

感谢您的回复。我的道歉忙于工作。但是，您的回答对我不起作用。我得到错误无法从第一行代码中找到元素：我像这样设置它gender = dirver.find_element_by_css_selector( "input[name='customer.gender'] + div.Select-control") .click();gender=dirver.find_element_by_xpath( "//div[input[@name='customer.gender']]//div[@role='option'][text()='%s']".format("Male")) .click();
请在浏览器上手动尝试css定位器input[name='customer.gender'] + div.Select-control，看看它是否能找到expect元素。
我确实检查了下拉菜单中的元素并搜索了没有找到它的行。
我使用下拉元素进行了编辑，但未选择任何值。
我在 HTML 检查元素中找到了div.Select-control。