如何在selenium python中选择下拉菜单？

Question

我想单击此 html 代码中的下拉菜单按钮。

<div id="menu-button-:r1p:" aria-expanded="true" aria-haspopup="menu" aria-controls="menu-list-:r1p:" class="chakra-menu__menu-button css-6iqp1a" data-active="">
<span class="css-xl71ch">
<div class="css-70qvj9">Aa
</div>
</span>
</div>

<div class="css-r6z5ec" style="visibility: hidden; position: absolute; min-width: max-content; inset: 0px auto auto 0px;">
<div tabindex="-1" role="menu" id="menu-list-:rt:" aria-orientation="vertical" class="chakra-menu__menu-list css-17zw3g2" style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);">
<button type="button" aria-label="Font size 12px" id="menu-list-:rt:-menuitem-:ru:" role="menuitem" tabindex="-1" class="chakra-menu__menuitem css-13c7rae" data-index="0" aria-disabled="false">12</button>

<button type="button" aria-label="Font size 13px" id="menu-list-:rt:-menuitem-:rv:" role="menuitem" tabindex="-1" class="chakra-menu__menuitem css-13c7rae" data-index="1" aria-disabled="false">13</button>

<button type="button" aria-label="Font size 14px" id="menu-list-:rt:-menuitem-:r10:" role="menuitem" tabindex="-1" class="chakra-menu__menuitem css-13c7rae" data-index="2" aria-disabled="false">14</button>

<button type="button" aria-label="Font size 15px" id="menu-list-:rt:-menuitem-:r11:" role="menuitem" tabindex="-1" class="chakra-menu__menuitem css-13c7rae" data-index="3" aria-disabled="false">15</button>

<button type="button" aria-label="Font size 16px" id="menu-list-:rt:-menuitem-:r12:" role="menuitem" tabindex="-1" class="chakra-menu__menuitem css-13c7rae" data-index="4" aria-disabled="false">16</button>

<button type="button" aria-label="Font size 17px" id="menu-list-:rt:-menuitem-:r13:" role="menuitem" tabindex="-1" class="chakra-menu__menuitem css-13c7rae" data-index="5" aria-disabled="false">17</button>

<button type="button" aria-label="Font size 18px" id="menu-list-:rt:-menuitem-:r14:" role="menuitem" tabindex="-1" class="chakra-menu__menuitem css-13c7rae" data-index="6" aria-disabled="false">18</button>

<button type="button" aria-label="Font size 19px" id="menu-list-:rt:-menuitem-:r15:" role="menuitem" tabindex="-1" class="chakra-menu__menuitem css-13c7rae" data-index="7" aria-disabled="false">19</button>

<button type="button" aria-label="Font size 20px" id="menu-list-:rt:-menuitem-:r16:" role="menuitem" tabindex="-1" class="chakra-menu__menuitem css-13c7rae" data-index="8" aria-disabled="false">20</button>

</div>
</div>

我尝试：

find_element(By.XPATH, '//*[@id="menu-list-:rt:-menuitem-:r15:"]')

还有：

find_element(By.ID, 'menu-button-:rt:')

但它说：没有这样的元素，无法定位元素。

我应该怎么办？

Answer 1

您可以尝试下面的方法来单击菜单 15，但请确保下拉菜单已打开或值可见。

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

element = WebDriverWait(driver, 20).until(
EC.element_to_be_clickable((By.XPATH, "//*[@id="menu-list-:rt:-menuitem-:r15:"]")))

element.click();

或者

element = WebDriverWait(driver, 20).until(
EC.element_to_be_clickable((By.XPATH, "//button[contains(text(),'15']")))

element.click();

Answer 2

要单击下拉菜单元素，您可以使用以下任一定位器策略：

• 使用css_selector ：

   driver.find_element(By.CSS_SELECTOR, "div.chakra-menu__menu-button[id^='menu-button'][aria-controls^='menu-list'] > span").click()

• 使用xpath ：

   driver.find_element(By.XPATH, "//div[contains(@class, 'chakra-menu__menu-button')][starts-with(@id, 'menu-button') and starts-with(@aria-controls, 'menu-list')]/div").click()

---

理想情况下，您需要为element_to_be_clickable()引入WebDriverWait ，您可以使用以下任一定位器策略：

• 使用CSS_SELECTOR ：

   WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div.chakra-menu__menu-button[id^='menu-button'][aria-controls^='menu-list'] > span"))).click()

• 使用XPATH ：

   WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[contains(@class, 'chakra-menu__menu-button')][starts-with(@id, 'menu-button') and starts-with(@aria-controls, 'menu-list')]/div"))).click()

• 注意：您必须添加以下导入：

   from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.common.by import By from selenium.webdriver.support import expected_conditions as EC