Search code examples
pythonselenium-webdriverxpathdrop-down-menuwebdriverwait

Click on a non-select dropdown option using Selenium Python

I am trying to automate some task as download file and pre-process them. To download one of them I need to specify dates (I can't share the website because of privacy) but I am not able to select between Dec-2022 and Jan-2023 as an example below:

Here is HTML code:

<button type="button" ng-click="clickDrop($event)" ng-show="showButton()" data-wt="toggle">
         <span class="ng-binding">Current Month</span>
         <span ng-hide="dropOpen" class="caret ng-hide"></span>
         <span ng-show="dropOpen" class="dropup"><span class="caret"></span></span>
     </button>
 <div class="rpt-dext-select-dropdown-options" data-wt="dropdown" ng-show="isEditable()">
 <div ng-repeat="option in options|filter:{label:searchFilter}" ng-click="selectOption(option,$event)" class="rpt-dext-select-dropdown-checkable ng-scope" data-wt="202301">   <span ng-class="{'rpt-dext-select-dropdown-checked':selections.includes(option)}" class="ng-binding">Jan 2023</span>
                <span class="fas fa-check check-mark ng-hide" ng-show="selections.includes(option)"></span>
             </div>
 <div ng-repeat="option in options|filter:{label:searchFilter}" ng-click="selectOption(option,$event)" class="rpt-dext-select-dropdown-checkable ng-scope" data-wt="202212">   <span ng-class="{'rpt-dext-select-dropdown-checked':selections.includes(option)}" class="ng-binding">Dec 2022</span>
                <span class="fas fa-check check-mark ng-hide" ng-show="selections.includes(option)"></span>
             </div>

I can open the menu :

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, '.ng-isolate-scope:nth-child(3) .ng-isolate-scope~ .ng-isolate-scope button .ng-binding'))).click()

But not able to select with click() and I think select() doesn't work.

Solution

  • Once you open the menu using the line of code:

    WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, '.ng-isolate-scope:nth-child(3) .ng-isolate-scope~ .ng-isolate-scope button .ng-binding'))).click()

    To click on an option you need to induce WebDriverWait for the element_to_be_clickable() and you can use the following locator strategies:

    • Click on Dec 2022:

      WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@class='rpt-dext-select-dropdown-options']//span[@class='ng-binding' and text()='Dec 2022']"))).click()

    • Click on Jan 2023:

      WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@class='rpt-dext-select-dropdown-options']//span[@class='ng-binding' and text()='Jan 2023']"))).click()