如何在React-Select Component下拉菜单中使用python硒来选择值？ [英] How to use python selenium to select value in React-Select Component dropdown?

问题描述

[硒和HTML的全新功能]

我想从一个网站中选择一个下拉菜单。 类型被隐藏。我只想从下拉列表中通过或选择 male 或 female 或将其传递到 value 变量，我该怎么做？

我在chrome中使用了inspect元素来确定以下两行是选择值所必需的。

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

我从chrome获得了xpath并试图传递一个值，但是没有用：

 性别= 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）
性别。 send_keys（'male'）
  

div的整个HTML 元素为：

 < div class = Select has-value is-clearable is-searchable Select- - 
< 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>女< / span> 
< / div> 
< div class = Select-input style = display：inline-block;> 
< input aria-activedescendant =反应选择5值 aria-expanded = false aria-haspopup = false 
 aria-owns = role = combobox value = style = box-sizing：content-box; width：5px;> 
< div style = position：绝对;上：0px;左：0px;可见性：隐藏;高度：0px;溢出：滚动;空格：前;字体大小：14px;字体家族： Helvetica，Arial，无衬线；字体粗细：400；字体样式：普通；字母间距：普通；文本转换：无；< / div> 
< / div> 
< / span> 
< span aria-label =清除值 class = Select-clear-zone title =清除值> 
< 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>选择：< / div> 
< div class = Select-input style = display：inline-block;> 
< input aria-activedescendant =反应选择5值 aria-expanded = false aria-haspopup = false 
 aria-owns = role = combobox value = style = box-sizing：content-box; width：5px;> 
< div style = position：绝对;上：0px;左：0px;可见性：隐藏;高度：0px; 
溢出：滚动;空白：pre;字体大小：14px; 
字体家族：Helvetica，Arial，sans-serif；字体粗细：400； 
字体风格：常规；字母间距：常规；文本转换：无；>< / 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>男< / span> 
< / div> 
< div class = Select-input style = display：inline-block;> 
< input aria-activedescendant =反应选择5值 aria-expanded = false aria-haspopup = false 
 aria-owns = role = combobox value = style = box-sizing：content-box; width：5px;> 
< div style = position：绝对;上：0px;左：0px;可见性：隐藏;高度：0px; 
溢出：滚动;空白：pre;字体大小：14px; 
字体家族：Helvetica，Arial，sans-serif；字体粗细：400； 
字体风格：常规；字母间距：常规；文本转换：无；>< / div> 
< / div> 
< / span> 
< span aria-label =清除值 class = Select-clear-zone title =清除值> 
< span class = Select-clear>×< / span> 
< / span> 
< span class = Select-arrow-zone>< span class = Select-arrow< / span>< / span> 
< / div> 
< / div> 
  

父母同级/ DOM：

 < div class = col-md-2>< div class = form-input form-group< span class = glyphicon glyphicon-asterisk> < / span><标签== customer.in_state class = control-label&In-State< / label>< span class = input-group>< div class = Select has-value is-clearable is is-searchable Select--单个><输入名称= customer.in_state type = hidden value = 1>< div class = Select-control> < span class = Select-multi-value-wrapper id = react-select-11--value>< div class = Select-value>< span class = Select-value-标签 role = option aria-selected = true id = react-select-11--value-item>州内< / span>< / div>< div class = Select- input style = display：inline-block;>< input aria-activedescendant = react-select-11--value aria-expanded = false aria-haspopup = false aria-owns =  role = combobox value = style = box-sizing：content-box; width：5px;>< ; div style = position：absolute;顶部：0px；左：0px；可见性：隐藏；高度：0px；溢出：滚动；空白：pre; font-size：14px;字体家族：Helvetica，Arial，无衬线；字体粗细：400；字体样式：正常；字母间距：正常； text-transform：none;< / div>< / div>< / span>< span aria-label =清除值 class =选择清除区域 title =清除值 >< span class =选择-透明>×< / span>< / span>< span class =选择-箭头-区域>< span class = Select-arrow> ;< / span> / span< / div>< / div>< / span>< / div>< / div&rdquo p $ p> 
 
解决方案
您的页面使用反应选择组件。正如小组中其他讨论的那样，您必须像手动步骤一样完全自动执行此操作，
 
 
 
 即 
 
 
 单击难以处理的元素。 
 
 
 出现下拉菜单。 
 
 
 单击下拉列表中的值。 
 
 
您在这里有两种情况，
 
 
 
 
 
选择无值时
 
 
 sele ct有价值时。
 
 
 
 
 
我假定页面具​​有与之相似的单个选择框，并且默认情况下未选择性别值。在下面的代码中，我正在选择男性案例。选择男性后，我将其更改为女性。
 
 
 
 删除下拉菜单中没有值 
 ＃这是单击div..Select-placeholder元素，这是很难处理的
 
 driver.find_element_by_css_selector（'。Select--single .Select-placeholder' ）.click（）
 
＃然后我们等待下拉值出现
 wait = WebDriverWait（driver，60）
 male = wait.until（EC.visibility_of_element_located（ （通过CSS_SELECTOR，'.Select-option＃react-select-5--option-0）'）））
 
＃单击下拉菜单
的element男性选项值。 click（）
  
 按下拉列表中的值 
 ＃这是单击div.Select-value元素，它是难处理的
 driver.find_element_by_css_selector（'。Select--single.Select-value '）.click（）
 female = wait.until（EC.visibility_of_element_located（（By.CSS_SELECTOR，'.Select-option＃react-select-5--option-1）'））） ）
 
＃单击下拉菜单
 female.click（）的元素女性选择值。
  
 获取所选值 
  selected_value = driver.find_element_by_css_selector（'。Select --single .select-value'）。text 
 print（selected_value）
  
 清除所选值 
  selected_value = driver.find_element_by_css_selector（'。Select--single Select-clear'）。 click（）
  
 
[very new at selenium and HTML]

I want to select a drop down from a website. The type is hidden. I just want to pass or select either male or female from the drop down or pass it into the value variable, how would I do this? 

I used the inspect element in chrome to determine the two lines below are the ones required to select a value. 
<div class="Select has-value is-clearable is-searchable Select--single">
    <input name="customer.gender" type="hidden" value="female">
I got the xpath from chrome and tried to pass a value but did not work:
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')
The entire HTML of the above div element is:
<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>
Thank you in advance. 

edit: 

HTML from where I click on the drop down without any values selected:
<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 from value selected in drop down
<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>
Parent sibling/DOM:
<div class="col-md-2"><div class="form-input  form-group"><span class="glyphicon glyphicon-asterisk"></span><label for="customer.in_state" class="control-label">In-State</label><span class="input-group"><div class="Select has-value is-clearable is-searchable Select--single"><input name="customer.in_state" type="hidden" value="1"><div class="Select-control"><span class="Select-multi-value-wrapper" id="react-select-11--value"><div class="Select-value"><span class="Select-value-label" role="option" aria-selected="true" id="react-select-11--value-item">In-State</span></div><div class="Select-input" style="display: inline-block;"><input aria-activedescendant="react-select-11--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></span></div></div>

解决方案
Your page uses React Select Component. As other discussed in the group, You have to automate this case exactly similar like the manual steps,

i.e.,

Click the element which is intractable.
Wait for the dropdown appears.
Click the value from the dropdown.
You have two case here, 


Select with when no value
select when there is value.


I assume that page has single select box similar to that and gender value is not selected by default. In below code,I am selecting male case. After selecting male, I am changing it to Female.

Seleting the dropdown without value
# this is click the div..Select-placeholder element which is intractable

driver.find_element_by_css_selector('.Select--single .Select-placeholder').click()

# Then we are waiting for the dropdown value to appear
wait = WebDriverWait(driver, 60)
male= wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, '.Select-option#react-select-5--option-0)')))

# Click the element male option value of the dropdown
male.click()
Seleting the dropdown with value
# this is click the div.Select-value element which is intractable
driver.find_element_by_css_selector('.Select--single .Select-value').click()
female = wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, '.Select-option#react-select-5--option-1)')))

# Click the element female option value of the dropdown
female.click()
Get selected value
 selected_value=driver.find_element_by_css_selector('.Select--single .Select-value').text
 print(selected_value)
Clear selected value
 selected_value=driver.find_element_by_css_selector('.Select--single Select-clear').click()


                        
这篇关于如何在React-Select Component下拉菜单中使用python硒来选择值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！