Home > Software design >  How to chose drop down menu in selenium python?
How to chose drop down menu in selenium python?

Time:01-19

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:"  data-active="">
<span >
<div >Aa
</div>
</span>
</div>

<div  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"  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"  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"  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"  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"  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"  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"  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"  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"  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"  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?

CodePudding user response:

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

CodePudding user response:

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