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
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 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);
}
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");
Is there anyone that has used a similar menu style to Spotify? https://www.spotify.com/se/
I would like to have the menu cover whole page....
Example
Im using Bootstrap 3.
Has anyone done something similar?
You need to modify this code as you want..DEMO
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-right" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">menu</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Dogs <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Terrier</li>
<li>Labrador</li>
<li>Pitbull</li>
<li>German Shephard</li>
<li>Chihuahua</li>
<li>Beagle</li>
</ul>
</li>
<li class="dropdown">
Cats <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Persian</li>
<li>Siamese</li>
<li>Ragdoll</li>
<li>Lion</li>
<li>Tiger</li>
</ul>
</li>
<li class="dropdown">
Primates <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Monkey</li>
<li>Lemur</li>
<li>Gorilla</li>
<li>Chimpanzee</li>
</ul>
</li>
<li class="dropdown">
Reptiles <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Boa</li>
<li>Monitor Lizard</li>
<li>Comodo Dragon</li>
<li>Iguana</li>
<li>Alligator</li>
</ul>
</li>
</ul>
</div>
</nav>