当select上存在选项值时，为什么元素不可交互？

Question

从https://www.gov.sg/resources/translation的url源：

<div id="content_0_UPnlTranslate">
<div onkeypress="javascript:return WebForm_FireDefaultButton(event, 'BtnTranslateSearch')">
<div class="control">

<input type="hidden" name="content_0$IsDetectField" id="IsDetectField">

<span class="from-wrap">
    <label for="content_0_DdlFrom">From</label>
        <select name="content_0$DdlFrom" onchange="javascript:setTimeout('__doPostBack(\'content_0$DdlFrom\',\'\')', 0)" id="content_0_DdlFrom" class="control-select from" style="display: none;">
            <option selected="selected" value="1">English</option>
            <option value="2">Chinese</option>
            <option value="3">Malay</option>
            <option value="4">Tamil</option>
        </select>

    <div class="btn-group bootstrap-select control-select from"><button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="content_0_DdlFrom" title="English"><span class="filter-option pull-left">English</span>&nbsp;<span class="caret"></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner selectpicker" role="menu"><li data-original-index="0" class="selected"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>English</span>"><span class="text">English</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Chinese</span>"><span class="text">Chinese</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Malay</span>"><span class="text">Malay</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="3"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Tamil</span>"><span class="text">Tamil</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div>
</span>

<input type="submit" name="content_0$BtnSwitch" value="Switch" id="content_0_BtnSwitch">

<span class="to-wrap">
    <label for="content_0_DdlTo">To</label>
        <select name="content_0$DdlTo" id="content_0_DdlTo" class="control-select to" style="display: none;">
        <option selected="selected" value="2">Chinese</option>
        <option value="3">Malay</option>
        <option value="4">Tamil</option>

        </select>

    <div class="btn-group bootstrap-select control-select to"><button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="content_0_DdlTo" title="Chinese"><span class="filter-option pull-left">Chinese</span>&nbsp;<span class="caret"></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner selectpicker" role="menu"><li data-original-index="0" class="selected"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Chinese</span>"><span class="text">Chinese</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Malay</span>"><span class="text">Malay</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Tamil</span>"><span class="text">Tamil</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div>
</span>

</div></div></div>

有可选项content_0$DdlFrom内容{0$DdlTo, with values ranging[1,2,3,4]`。在

当使用指定的值访问select项时，它似乎只在content_0$DdlFrom='1'和content_0$DdlTo='2'时起作用：

^{pr2}$

除content_0$DdlFrom='1'和content_0$DdlTo='2'之外的另一个值抛出一个ElementNotInteractableException：

---------------------------------------------------------------------------
ElementNotInteractableException           Traceback (most recent call last)
<ipython-input-87-de5d373a948a> in <module>
      4     to_lang = Select(driver.find_element_by_name("content_0$DdlTo"))
      5     from_lang.select_by_value(str(f))
----> 6     to_lang.select_by_value(str(t))

ElementNotInteractableException: Message: element not interactable: Element is not currently visible and may not be manipulated
  (Session info: chrome=77.0.3865.120)

问题是，是因为name="content_0$IsDetectField"？如果不是，是什么导致了ElementNotInteractableException？

以及如何解决问题并正确地选择值不是1和2的content_0$DdlFrom和{}？

Answer 1

注意事项：

1. 当你选择英语从，从列表你可以翻译成其他3种语言。

2. 当您选择除英语以外的语言时，您可以从“收件人”列表中仅选择英语。

我列了两份清单，你可以根据你的要求改变各自的语言。在

您可以使用以下代码：

driver = webdriver.Chrome(executable_path = r'C:/Users/user****/Downloads/BrowserDriver/chromedriver_win32/chromedriver.exe')
wait = WebDriverWait(driver,10)

driver.maximize_window()

driver.get("https://www.gov.sg/resources/translation")

wait.until(EC.element_to_be_clickable((By.XPATH, "//label[text()='From']/following-sibling::div/button"))).click()

from_list = driver.find_elements_by_xpath("//label[text()='From']/following-sibling::div/descendant::a/span[@class='text']")

for pick in from_list:
 if pick.text =='Malay':
   pick.click()

wait.until(EC.element_to_be_clickable((By.XPATH, "//label[text()='To']/following-sibling::div/button"))).click()

to_list = driver.find_elements_by_xpath("//label[text()='To']/following-sibling::div/descendant::a/span[@class='text']")

for drop in to_list:
 if drop.text =='Tamil':
   pick.click()

Answer 2

您没有注意到select有一个style="display: none;" 因此，元素是不可交互的，并且引发了错误。在

你必须触发下拉菜单，这样它就可以交互了。在

例：键入、单击或其他什么，取决于网站的实现。在