How to choose an option from a non select dropdown 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 tried 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?

Asked By: Mochamad Andimas

||

Source

Answer 1

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

Answered By: undetected Selenium

How to choose an option from a non select dropdown menu in selenium python?

Question:

Answers: