关于ZAKER 融媒体解决方案 合作 加入

如何在 React-Select Component 下拉菜单中使用 Pyt.

CocoaChina 10-13

[ selenium 和HTML上的新功能 ]

我想从网站上选择一个下拉菜单 . 该类型是隐藏的 . 我只想从下拉列表中传递或选择男性或女性 , 或将其传递给 value 变量 , 我该怎么做?

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

<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"> <input aria-activedescendant="react-select-5--value" aria-expanded="false" aria-haspopup="false" aria-owns="" role="combobox" value=""> <div></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"> <input aria-activedescendant="react-select-5--value" aria-expanded="false" aria-haspopup="false" aria-owns="" role="combobox" value=""> <div></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"> <input aria-activedescendant="react-select-5--value" aria-expanded="false" aria-haspopup="false" aria-owns="" role="combobox" value=""> <div></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>

父级同级 / 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"><input aria-activedescendant="react-select-11--value" aria-expanded="false" aria-haspopup="false" aria-owns="" role="combobox" value=""><div></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>

最佳答案

您的页面使用的是React Select Component. 正如小组中其他讨论的那样 , 您必须像手动操作步骤一样完全自动化这种情况 ,

即 ,

> 单击难以处理的元素 .

> 等待下拉菜单出现 .

> 从下拉列表中单击值 .

这里有两种情况

> 无值时选择

> 选择有价值的东西 .

我假设页面具有与之相似的单个选择框 , 并且默认情况下未选择性别值 . 在下面的代码中 , 我正在选择男性案例 . 选择男性后 , 我将其更改为女性 .

选择没有价值的下拉菜单

# this is click the div..Select-placeholder element which is intractabledriver.find_element_by_css_selector ( '.Select--single .Select-placeholder' ) .click # Then we are waiting for the dropdown value to appearwait = 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 dropdownmale.click ( )

用值选择下拉列表

# this is click the div.Select-value element which is intractabledriver.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 dropdownfemale.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

以上内容由"CocoaChina"上传发布 查看原文
相关标签 chrome菜单app

觉得文章不错,微信扫描分享好友

扫码分享