How to select a invisible dropdown list drop from following code?
<div id="form:munit_panel" class="ui-selectonemenu-panel ui-widget ui-widget-content ui-corner-all ui-helper-hidden ui-shadow" style="width: 125px; display: block; top: 177px; left: 798.267px; z-index: 1006;">
<div class="ui-selectonemenu-items-wrapper" style="height:200px">
<ul id="form:munit_items" class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset" role="listbox" aria-activedescendant="form:munit_0">
<li id="form:munit_0" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all ui-state-highlight" role="option" tabindex="-1" data-label="No Unit">No Unit</li>
<li id="form:munit_1" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Bag">Bag</li>
<li id="form:munit_2" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Load">Load</li>
<li id="form:munit_3" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Litre">Litre</li>
<li id="form:munit_4" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Each">Each</li>
<li id="form:munit_5" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Unit">Unit</li>
<li id="form:munit_6" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Nos">Nos</li>
<li id="form:munit_7" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="R.feet">R.feet</li>
<li id="form:munit_8" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Sq.ft">Sq.ft</li>
<li id="form:munit_9" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Kgs">Kgs</li>
<li id="form:munit_10" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="feet">feet</li>
<li id="form:munit_11" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="ml">ml</li>
<li id="form:munit_12" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Mts">Mts</li>
</ul>
</div>
</div>
I tried this Selenium code to select the dropdown last option:
public void selectOneMenu(String idPrefix, String value) {
if (StringUtil.isNotBlank(value)) {
driver.findElement(By.id(idPrefix + "_label")).click();
driver.findElement(
By.xpath("//div[#id='" + idPrefix
+ "_panel']/div/ul/li[text()='" + value + "']"))
.click();
}
}
You should try using WebDriverWait to wait until dropdown options visible and enable to click after clicking on dropdown as below :-
public void selectOptionsByIdFromDropdown(String dropdownId, String optionsId) {
WebDriverWait wait = new WebDriverWait(driver, 10)
//First click on dropdown menu
WebElement dropdown = wait.until(ExpectedConditions.elementToBeClickable(By.id(dropdownId)));
dropdown.click();
//Now wait until nested option to be present by id
wait.until(ExpectedConditions.presenceOfNestedElementLocatedBy(dropdown, By.id(optionsId))).click();
}
Usage :-
I need to select the last option in the dropdown list box .when I click the drop down box 12th item is not visible
selectOptionsByIdFromDropdown("form:munit_panel", "form:munit_12");
Related
I have 2 drop-down menus
<div class="dropdown">
<button class=" js-dropdownDate dropdown-toggle" type="button" data-toggle="dropdown" data-value="#Model.WeekNumberDayStart" id="periodTypeNumber">
<span class="toggle-text">First</span>
<span class="dropdown-caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a class="active" role="menuitem" tabindex="-1" href="#" data-value="1">First</a>
</li>
<li role="presentation">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="2">Second</a>
</li>
<li role="presentation" data-value="3">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="3">Third</a>
</li>
<li role="presentation" data-value="4">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="4">Fourth</a>
</li>
<li role="presentation" data-value="5">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="5">Fifth</a>
</li>
</ul>
</div>
<div class="dropdown">
<button class=" js-dropdownDate dropdown-toggle" type="button" data-toggle="dropdown" id="periodTypeDay" data-value="#Model.DayNubmerOfWeek">
<span class="toggle-text">monday</span>
<span class="dropdown-caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" data-value="1">
<a class="active" role="menuitem" tabindex="-1" href="#" data-value="1">monday</a>
</li>
<li role="presentation" data-value="2">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="2">tuesday</a>
</li>
<li role="presentation" data-value="3">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="3">wednesday</a>
</li>
<li role="presentation" data-value="4">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="4">thursday</a>
</li>
<li role="presentation" data-value="5">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="5">friday </a>
</li>
<li role="presentation" data-value="6">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="6">saturday</a>
</li>
<li role="presentation" data-value="7">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="7">sunday</a>
</li>
</ul>
</div>
and if the date from #Model.WeekNumberDayStart(int - like 1,2,3,4...) = data-value = "1" then need to write class = "active" otherwise just class = ""
maybe somehow it can be done differently through the menu itself through DropDownList?
and if the date from #Model.WeekNumberDayStart(int - like 1,2,3,4...)
= data-value = "1" then need to write class = "active" otherwise just class = ""
It cannot be achieved by menu itself. You need to use jquery code to achieve.
Since you have two dropdown menus, you need to distinguish the a tag of these two menus.
Therefore, you can add custom attributes and corresponding values to each group of a tags to ensure that the corresponding elements can be obtained in jquery.
Below is the class active binding for the first group of dropdown menu example.
<div class="dropdown">
<button class=" js-dropdownDate dropdown-toggle" type="button" data-toggle="dropdown" data-value="#Model.WeekNumberDayStart" id="periodTypeNumber">
<span class="toggle-text">First</span>
<span class="dropdown-caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a class="active" role="menuitem" tabindex="-1" href="#" data-value="1" droptype="WeekNumberDayStart">First</a>
</li>
<li role="presentation">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="2" droptype="WeekNumberDayStart">Second</a>
</li>
<li role="presentation" data-value="3">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="3" droptype="WeekNumberDayStart">Third</a>
</li>
<li role="presentation" data-value="4">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="4" droptype="WeekNumberDayStart">Fourth</a>
</li>
<li role="presentation" data-value="5">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="5" droptype="WeekNumberDayStart">Fifth</a>
</li>
</ul>
</div>
jquery to change binding class active according to #Model.WeekNumberDayStart value:
<script>
$(function () {
$("a[droptype=WeekNumberDayStart]").each(function () {
$(this).removeClass("active");
if ($(this).attr("data-value") == $("#periodTypeNumber").attr("data-value")) {
$(this).addClass("active");
}
})
})
</script>
I have a path:
<div class="jss601 jss602 jss581" aria-pressed="false" tabindex="0" role="button" aria-haspopup="true" xpath="1"><span></span></div>
but I could not write the XPath or CSS for clicking the element. Could you please help me?
This is a dropdown list called as "Tip" how can I manage the selection because it is not a select so I could not use the select function:
HTML:
<ul class="MuiList-root-139 MuiList-padding-140" role="listbox" xpath="1">
<li tabindex="-1" class="MuiButtonBase-root-55 MuiListItem-root-143 MuiListItem-default-146 MuiListItem-gutters-150 MuiListItem-button-151 MuiMenuItem-root-296" role="option" data-value="">Hiçbiri
<span class="MuiTouchRipple-root-64"></span>
</li>
<li tabindex="-1" class="MuiButtonBase-root-55 MuiListItem-root-143 MuiListItem-default-146 MuiListItem-gutters-150 MuiListItem-button-151 MuiMenuItem-root-296" role="option" data-value="RTU">RTU
<span class="MuiTouchRipple-root-64"></span>
</li>
<li tabindex="0" class="MuiButtonBase-root-55 MuiListItem-root-143 MuiListItem-default-146 MuiListItem-gutters-150 MuiListItem-button-151 MuiMenuItem-root-296 MuiMenuItem-selected-297" role="option" data-value="Substation Control System">Substation Control System
<span class="MuiTouchRipple-root-64"></span>
</li>
<li tabindex="-1" class="MuiButtonBase-root-55 MuiListItem-root-143 MuiListItem-default-146 MuiListItem-gutters-150 MuiListItem-button-151 MuiMenuItem-root-296" role="option" data-value="Control Center">Control Center
<span class="MuiTouchRipple-root-64"></span>
</li>
<li tabindex="-1" class="MuiButtonBase-root-55 MuiListItem-root-143 MuiListItem-default-146 MuiListItem-gutters-150 MuiListItem-button-151 MuiMenuItem-root-296" role="option" data-value="IED">IED
<span class="MuiTouchRipple-root-64"></span>
</li>
</ul>
<li tabindex="-1" class="MuiButtonBase-root-55 MuiListItem-root-143 MuiListItem-default-146 MuiListItem-gutters-150 MuiListItem-button-151 MuiMenuItem-root-296" role="option" data-value="RTU" xpath="1">RTU
<span class="MuiTouchRipple-root-64"></span>
</li>
Here you can find a dropdown example and how find a element in this dropdown.
Selenium - Python - drop-down menu option value
I have a DROPDOWN LIST and it doesn't have the select attribute:
<ul id="Registration_RegistrationStateCode_listbox" class="k-list k-reset" unselectable="on" style="overflow: auto; height: 200px;" tabindex="-1" role="listbox" aria-hidden="false" aria-live="off">
<li id="Registration_RegistrationStateCode_option_selected" class="k-item k-state-selected k-state-focused" unselectable="on" role="option" tabindex="-1" aria-selected="true">-- Select State --</li>
<li class="k-item" unselectable="on" role="option" tabindex="-1">Alabama</li>
<li class="k-item" unselectable="on" role="option" tabindex="-1">Alaska</li>
<li class="k-item" unselectable="on" role="option" tabindex="-1">Arizona</li>
<li class="k-item" unselectable="on" role="option" tabindex="-1">Arkansas</li>
<li class="k-item" unselectable="on" role="option" tabindex="-1">California</li>
<li class="k-item" unselectable="on" role="option" tabindex="-1">Colorado</li>
How to select a particular state?
I am unable to select any state as it does not have select tag.
If you use the Page Object Model, I would create a function in this specific Page Object such as the following:
public void SelectState(string state)
{
_driver.FindElement(By.Id("Registration_RegistrationStateCode_listbox")).Click();
_driver.FindElement(By.XPath("//li[text()='" + state + "']")).Click();
}
Otherwise you can just use the individual lines and pass in a state:
_driver.FindElement(By.Id("Registration_RegistrationStateCode_listbox")).Click();
_driver.FindElement(By.XPath("//li[text()='Minnesota']")).Click();
I am trying to select a value from a dropdown with selenium webdriver but it just opens the dropdown and immediately closes it.
Here is the code for webdriver:
driver.findElement(By.cssSelector("span.k-select ")).click();
Thread.sleep(3000);
driver.findElement(By.xpath("//li[#class='k-item'][.='Revenue per click']")).click();
And this is the html code from the browser for the dropdown:
<div class="controls">
<span class="k-widget k-dropdown k-header kendo-input span8 ddFix" unselectable="on">
<span unselectable="on" class="k-dropdown-wrap k-state-default">
<span unselectable="on" class="k-input">Select revenue type...
</span>
<span unselectable="on" class="k-select">
<span unselectable="on" class="k-icon k-i-arrow-s">select</span>
</span>
</span>
<input name="revenueType" id="revenueType" class="kendo-input span8 ddFix" data-role="dropdownlist" style="display: none;">
</span>
</div>
<div class="k-animation-container km-popup">
<div class="k-list-container k-popup k-group k-reset" id="revenueType-list" data-role="popup">
<ul unselectable="on" class="k-list k-reset" tabindex="-1" role="listbox" aria-hidden="true" id="revenueType_listbox" aria-live="off" style="overflow: auto;">
<li tabindex="-1" role="option" unselectable="on" class="k-item">Select revenue type...</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">Revenue per action</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">Revenue per click</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">Revenue per sale</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">Revenue per action + Revenue per sale</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">Revenue per mile</li>
</ul>
</div>
</div>
It's hard to debug without the context but:
Your locator is invalid, instead try using:
By.xpath("//li[text()='Revenue per click']")
Since only one item has that text, it should be sufficient. If you still want to include #class in selector, use
By.xpath("//li[#class='k-item' and text()='Revenue per click']")
Try using javascript change the unselectable to off using javascript executor.
Get the dropdown text value after perform click action
subdropdown_child = navigationDriver.findElements(By.cssSelector("select#ctl00_SPWebPartManager1_g_c873566a_540c_4681 option");
for (Element subchild : subdropdown_child)
{
dropdown_value = subchild.text();
new Select(navigationDriver.findElementByCssSelector("select#ctl00_SPWebPartManager1_g_c873566a_540c_4681_")).selectByVisibleText(dropdown_value);
}
I am having one of those scenarios with Selenium where it sometimes works.
The flow I’m focusing on is pretty simple and this has been asked and answered several times.
Hover over main menu item
Move to and click on sub menu item.
Here is the code:
Any advice as to how I could make this work every time would be most appreciated.
var actions = new Actions(SeleniumTestDriver.WebDriver);
// Move to the Main Menu Element and hover
actions.MoveToElement(SeleniumTestDriver.WebDriver.FindElement(By.XPath(#"//*[#id='main_menu']/ul/li[3]/a"))).Perform();
Thread.Sleep(1000);
var wait = new WebDriverWait(SeleniumTestDriver.WebDriver, TimeSpan.FromSeconds(5));
var subMenuLink = wait.Until(ExpectedConditions.ElementIsVisible(By.XPath(#"//*[#id='main_menu']/ul/li[3]/ul/li[4]/a")));
Thread.Sleep(250);
actions.MoveToElement(subMenuLink).Click().Perform();
Version Details:
Firefox v33.1
Selenium.WebDriver 2.44.0
Selenium.Support 2.44.0
Language C#
Edit by op
I should also add that when it fails, the menu flashes, as if the hover has been interrupted. Opens and shuts too quickly for the sub-menu item to be clicked.
The Html for that menu is:
<nav id="main_menu" class="ddsmoothmenu">
<ul class="primary_menu">
<li>calendar</li>
<li class="parent" style="z-index: 100;">...</li>
<li class="parent" style="z-index: 99;">
Upcoming Webinars<i></i>
<ul style="top: 95px; visibility: visible; left: 0px; width: 195px; display: none;">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/Webinar/Details/4567">Best-Ever Compliance Checklists For...</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/Webinar/Details/4572">Build a No-Excuses Sales Environmen...</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/Webinar/Details/4560">Handling Power of Attorney Document...</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/Webinar/Details/4566">Flood Insurance</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/Webinar/Details/4562">Opening Accounts for Nonresident Al...</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/Webinar/Details/4561">New Share Member Account Interview ...</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/Webinar/allActive/?eventsToShow=upcoming">
<font color="green">View <b>All</b> Upcoming Events</font>
</a>
</li>
</ul>
</li>
<li class="parent" style="z-index: 98;">...</li>
<li style="z-index: 97;">
About Us<i></i>
<ul style="display: none; top: 95px; visibility: visible;">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/Home/WhatIsAWebinar">What Is A Webinar?</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/Home/CommonQuestions">Commonly Asked Questions</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/Home/DetailedConnectionInstructions">Connecting to Your Webinar</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/Home/contactus">Contact Us</a></li>
</ul>
</li>
</ul>
</nav>
Thanks
I have modified the xpath of your existing code. Please check if that works for you:
var actions = new Actions(SeleniumTestDriver.WebDriver);
// Move to the Main Menu Element and hover
actions.MoveToElement(SeleniumTestDriver.WebDriver.FindElement(By.XPath("//li[#class='parent']/a[.='Upcoming Webinars']"))).Build().Perform();
var wait = new WebDriverWait(SeleniumTestDriver.WebDriver, TimeSpan.FromSeconds(10));
var subMenuLink = wait.Until(ExpectedConditions.ElementIsVisible(By.XPath("//li[#role='presentation']/a[contains(text(),'Flood Insurance')]")));
actions.MoveToElement(subMenuLink).Click().Perform();
please try it out with below code:
WebElement web = dri.findElement(By
.xpath("//a[contains(.,'Upcoming Webinars')]"));
Actions objA = new Actions(dri);
objA.moveToElement(web).click().build().perform();
objA.moveToElement(
(new WebDriverWait(dri, 3)).until(ExpectedConditions.elementToBeClickable(By
.xpath("//a[contains(text(),'Safe Deposit Boxes')]"))))
.click().build().perform();
You cab replace Safe Deposit Boxes with your own choice of element to be clicked.
P.S. Sorry but this code is in java, please help yourself for any equivalent in C#.