How to click on a dropdown option using C# selenium

Question

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)

• joaoroque: You could have searched google: answer
• Radas: I have done exactly like in your suggested post. I've googled it before I posted here. Didnt work

Answer 1

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

• Radas: Do I need another NuGet package to use "SeleniumExtras"? it's being redlined when I use it
• KunduK: @Radas : Yes You need NuGet package to use "SeleniumExtras"

Answer 2

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