如何在React-Select Component下拉菜单中使用Python Selenium选择值?

时间:2018-10-18 13:53:44

标签: python selenium drop-down-menu

[硒和HTML的新功能]

我想从一个网站中选择一个下拉菜单。 import requests from bs4 import BeautifulSoup baseurl = 'https://example.org' urls_to_check = {baseurl, } checked_urls = set() found_links = [] while urls_to_check: url = urls_to_check.pop() r = requests.get(url) soup = BeautifulSoup(r.content, features='lxml') links = soup.find_all("a") for link in links: if "http" in link.get("href") and "dataone" in link.get("href"): found_links.append("<a href='%s'>%s</a>" % (link.get("href"), link.text)) elif link.get("href", "").startswith("/"): if baseurl + link.get("href") not in checked_urls: urls_to_check.add(baseurl + link.get("href")) checked_urls.add(url) 被隐藏。我只想从下拉列表中传递或选择typemale或将其传递到female变量中,我该怎么做?

我使用了chrome中的inspect元素来确定下面的两行是选择一个值所需的行。

value

我从chrome获取了xpath,并试图传递一个值,但是没有用:

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

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

先谢谢您。

编辑:

我从下拉菜单中单击的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>

edit2:

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>

父级兄弟/ DOM:

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

1 个答案:

答案 0 :(得分:1)

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

  1. 单击难以处理的元素。
  2. 等待下拉菜单。
  3. 单击下拉菜单中的值。

您在这里有两种情况,

  • 选择无值时使用
  • 选择有价值的东西。

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

删除没有价值的下拉列表

# 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()

使用值删除下拉列表

# 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()

获取选定的值

 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