CODEWITHSUNDEEP
c#seleniumdrop-down-menu
Radas
Radas

Reputation: 45

How to click on a dropdown option using C# selenium

I need to click on one of the dropdown options in order to expand page entries from 10 to 50. HTML looks like this:

  <button id="page-size-dropdown-toggle" class="btn btn-white btn-sm dropdown-toggle ng-binding" data-toggle="dropdown" role="menuitem" aria-label="Change page size">
    10 
    <i class="fa fa-chevron-down" role="presentation"></i>
    <span class="sr-only ng-binding">Shown</span>
  </button>

  <ul id="page-size-dropdown-toggle-menu" class="dropdown-menu" role="menu" aria-labelledby="page-size-dropdown-toggle">
    <!-- ngRepeat: size in pageSizeCtrl.getPageSizes() --><li ng-repeat="size in pageSizeCtrl.getPageSizes()" role="presentation" class="ng-scope">
      <a href="" ng-click="pageSizeCtrl.changePageSize(size)" class="menuitem" role="menuitem" aria-label="Show 10">
        <span aria-hidden="true" class="ng-binding">10</span>
      </a>
    </li><!-- end ngRepeat: size in pageSizeCtrl.getPageSizes() --><li ng-repeat="size in pageSizeCtrl.getPageSizes()" role="presentation" class="ng-scope">
      <a href="" ng-click="pageSizeCtrl.changePageSize(size)" class="menuitem" role="menuitem" aria-label="Show 25">
        <span aria-hidden="true" class="ng-binding">25</span>
      </a>
    </li><!-- end ngRepeat: size in pageSizeCtrl.getPageSizes() --><li ng-repeat="size in pageSizeCtrl.getPageSizes()" role="presentation" class="ng-scope">
      <a href="" ng-click="pageSizeCtrl.changePageSize(size)" class="menuitem" role="menuitem" aria-label="Show 50">
        <span aria-hidden="true" class="ng-binding">50</span>
      </a>
    </li><!-- end ngRepeat: size in pageSizeCtrl.getPageSizes() -->
  </ul>
</div>

As you can see there are 3 options 10, 25 and 50. Here what I have tried so far:

clicking of the drop down and using LinText - Cant find this element

var dropDown = driverIpass.FindElement(By.Id("page-size-dropdown-toggle"));
dropDown.Click();
driverIpass.FindElement(By.LinkText("Show 50")).Click();

using XPath (unclickable element) tried different paths as well, no avail

IWebElement element = driverIpass.FindElement(By.XPath("//*[@class='dropdown-menu']/li[3]/a"));
element.Click();

As well as XPath using @id

Also tried digging around within classes hoping to find the correct link - nothing. There is something I don't see/realize. It's my second day using C# and selenium so if anyone could put me on the right path I would really appreciate it. I cant provide the actual web page as this is internal (company)

Upvotes: 1

Views: 711

Answers (2)

Radas
Radas

Reputation: 45

Found an answer after posting my question. In case someone else might have a similar problem:

//click to open drop down menu
var dropDown = driverIpass.FindElement(By.Id("page-size-dropdown-toggle"));
dropDown.Click();

//select the 3rd option within menu
IWebElement element = driverIpass.FindElement(By.XPath("//*[@id='page-size-dropdown-toggle-menu']/li[3]/a"));
element.Click();

Upvotes: -1

KunduK
KunduK

Reputation: 33384

Try with WebDriverWait() and following css selector.

WebDriverWait wait = new WebDriverWait(driverIpass, TimeSpan.FromSeconds(10));
wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementToBeClickable(By.CssSelector("#page-size-dropdown-toggle"))).Click();
wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementToBeClickable(By.CssSelector("#page-size-dropdown-toggle-menu li a[aria-label='Show 50']"))).Click();

Upvotes: 2

Related Questions