JQuery UI select Item from dropdown Selenium c#

Question

I am new to Selenium and I need to test a page that uses JqueryUI extensivily.

to take an example everyone can work on Let's have a look at http://view.jqueryui.com/master/demos/selectmenu/default.html page

now from the "Select a speed" dropdown i want to select "Fast"

My understading is that at runtime jqueryUI makes the following code not visible and creates "UL-LI" therefore the "SelectElement" function cannot be used.

    View Source=

      <label for="speed">Select a speed</label>
        <select name="speed" id="speed">
          <option>Slower</option>
          <option>Slow</option>
          <option selected="selected">Medium</option>
          <option>Fast</option>
          <option>Faster</option>
        </select>

Runtime "Inspect element" you get:

<div class="ui-selectmenu-menu ui-front ui-selectmenu-open" style="top: 94.5938px; left: 22px;">
    <ul aria-hidden="false" aria-labelledby="speed-button" id="speed-menu" role="listbox" tabindex="0" 
        class="ui-menu ui-corner-bottom ui-widget ui-widget-content" aria-activedescendant="ui-id-26" aria-disabled="false" style="width: 256px;">
        <li class="ui-menu-item">
          <div id="ui-id-26" tabindex="-1" role="option" class="ui-menu-item-wrapper ui-state-active">Slower</div>
        </li>
        <li class="ui-menu-item">
          <div id="ui-id-27" tabindex="-1" role="option" class="ui-menu-item-wrapper">Slow</div>
        </li>
        <li class="ui-menu-item"><div id="ui-id-28" tabindex="-1" role="option" class="ui-menu-item-wrapper">Medium</div></li>
        <li class="ui-menu-item"><div id="ui-id-29" tabindex="-1" role="option" class="ui-menu-item-wrapper">Fast</div>
        </li><li class="ui-menu-item"><div id="ui-id-30" tabindex="-1" role="option" class="ui-menu-item-wrapper">Faster</div>
        </li>
    </ul>
</div>

What I would like to do is

find me the speed-menu element
click the speed-menu element
find all the li items and select the "Faster" one

How do I do this? I did find an link that with a solution to my same problem but I cannot make it work in c# https://groups.google.com/forum/#!msg/selenium-users/uWmH_XuxcPM/2GVQnHd2aLIJ

Can you help? Thanks

NarendraR · Accepted Answer · 2017-01-20T07:32:50.573

0

As you have mentioned todos. Following code will help you to accomplish the same-

First you need to click on speed-dropdown span only then it loads the ul and litags -

driver.FindElement(By.Id("speed-button")).Click();

Then get all li tags of speed-menu

IList<IWebElement> menuElements = driver.FindElements(By.XPath("//ul[@id='speed-menu']/li"));

And iterate all element, find your match and select that one -

 foreach (IWebElement element in menuElements )
 {
    string value= element.FindElement(By.TagName("div")).Text;
    if(value.Equals("Faster"))
    {   
            element.Click();
    }
 }

Note :- Please check syntax as per C#

edited Jan 20 '17 at 07:32

answered Jan 20 '17 at 07:20

NarendraR

7,577
10
44
82

how can I make the xpath generic eg given i have the following =Browser.Driver.FindElements(By.XPath("//*[ends-with(@id='speed-menu']")); this does not work. I want to get all the element that belong to a a parent with id that ends as above or IList menuElements = Browser.Driver.FindElements(By.XPath("//ul[contains(@id='speed-menu]/li")); – developer9969 Jan 20 '17 at 09:19
you can use some another alternatives for the same `.//*[starts-with(@id, 'speed-menu')]` or `.//*[contains(@id, 'speed-menu')]` . there is an issue with `ends-with` function see this http://stackoverflow.com/questions/22436789/xpath-ends-with-does-not-work – NarendraR Jan 20 '17 at 09:39

JQuery UI select Item from dropdown Selenium c#

1 Answers1