Почему элемент не взаимодействует, когда значение параметра существует в select?

Question

Из источника 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>&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 content_0 $ DdlTo , with values ranging [1,2,3,4] `.

При доступе к выбранным элементам с использованием назначенных значений кажется, что он работает только тогда, когда 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?

И , как решить проблему и правильно выбрать content_0$DdlFrom и content_0$DdlTo со значениями, отличными от 1 и 2 соответственно?

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;" из-за этого, элемент не взаимодействует и выдается ошибка.

Вы должны вызвать раскрывающийся список, чтобы он мог взаимодействовать.

Пример: введите, нажмите или еще что-то, зависит от реализации сайта.