当 select 上存在选项值时，为什么元素不可交互？
Why isn't the element not interactable when the option's value is existing on the select?
来自 url 的 https://www.gov.sg/resources/translation 来源：
<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> <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="text">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="text">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="text">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="text">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> <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="text">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="text">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="text">Tamil</span>"><span class="text">Tamil</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div>
</span>
</div></div></div>
有select可用的物品content_0$DdlFrom content_0$DdlTo, with values ranging[1,2,3,4]`。
当使用指定值访问 select 项目时，它似乎只在 content_0$DdlFrom='1' 和 content_0$DdlTo='2' 时有效：
from itertools import combinations
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import Select
import pyderman
options = Options()
options.headless = True
driver = webdriver.Chrome(path, chrome_options=options)
for f, t in combinations([1,2,3,4], 2):
from_lang = Select(driver.find_element_by_name("content_0$DdlFrom"))
to_lang = Select(driver.find_element_by_name("content_0$DdlTo"))
from_lang.select_by_value(str(f))
to_lang.select_by_value(str(t))
除 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?
和如何解决问题并正确select content_0$DdlFrom 和 content_0$DdlTo 的值分别不是 1 和 2？
您错过了 select 有一个 style="display: none;"
因此，元素不可交互并抛出错误。
您必须触发下拉菜单才能进行交互。
例如：类型、点击或其他，取决于网站实施。
注意事项：
当您 select 英文时，您可以从列表中将其翻译成其他 3 种语言。
当您 select 除了英语以外的其他语言时，您可以 select 仅英语来自列表。
我列出了两个列表，您可以根据需要更改各自的语言。
您可以使用此代码：
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()
来自 url 的 https://www.gov.sg/resources/translation 来源：
<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> <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="text">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="text">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="text">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="text">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> <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="text">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="text">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="text">Tamil</span>"><span class="text">Tamil</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div>
</span>
</div></div></div>
有select可用的物品content_0$DdlFrom content_0$DdlTo, with values ranging[1,2,3,4]`。
当使用指定值访问 select 项目时，它似乎只在 content_0$DdlFrom='1' 和 content_0$DdlTo='2' 时有效：
from itertools import combinations
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import Select
import pyderman
options = Options()
options.headless = True
driver = webdriver.Chrome(path, chrome_options=options)
for f, t in combinations([1,2,3,4], 2):
from_lang = Select(driver.find_element_by_name("content_0$DdlFrom"))
to_lang = Select(driver.find_element_by_name("content_0$DdlTo"))
from_lang.select_by_value(str(f))
to_lang.select_by_value(str(t))
除 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?
和如何解决问题并正确select content_0$DdlFrom 和 content_0$DdlTo 的值分别不是 1 和 2？
您错过了 select 有一个 style="display: none;"
因此，元素不可交互并抛出错误。
您必须触发下拉菜单才能进行交互。
例如：类型、点击或其他，取决于网站实施。
注意事项：
当您 select 英文时，您可以从列表中将其翻译成其他 3 种语言。
当您 select 除了英语以外的其他语言时，您可以 select 仅英语来自列表。
我列出了两个列表，您可以根据需要更改各自的语言。
您可以使用此代码：
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()