How to chose drop down menu in selenium python?

Question

i want to click dropdown menu button in this html code.

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

i try with:

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

also with:

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

but it says: no such element, unable to locate element.

what should i do?

Answer 1

You can try the below to click on the menu 15, but make sure the drop is open or the value is visible.

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

OR

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

element.click();

Answer 2

To click on the dropdown menu element you can use either of the following locator strategies :

• Using css_selector :

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

• Using 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()

---

Ideally you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following locator strategies :

• Using 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()

• Using 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()

• Note : You have to add the following imports:

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