I have following code where i want to select value for dropdown:
<div class="prod-value col-xs-6 col-sm-8">
<select class="selectpicker show-menu-arrow" data-style="btn-default btn-sm" data-width="98%" data-size="6" onchange="location=options[selectedIndex].value;" style="display: none;"><option value="/design-your-engagement-ring/choose-a-setting/10k-rose-gold-round-halo-engagement-ring/50277-E-10KR">10K Rose Gold</option>
<option value="aa">10K White Gold</option>
<option value="bb">10K Yellow Gold</option>
</select>
<div class="btn-group bootstrap-select show-menu-arrow" style="width: 98%;">
<button type="button" class="btn dropdown-toggle selectpicker btn-default btn-sm" data-toggle="dropdown" title="14K White Gold">
<span class="filter-option pull-left">14K White Gold</span> <span class="caret"></span></button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li data-original-index="0">
<a tabindex="0" class="" data-normalized-text="10K Rose Gold"><span class="text">10K Rose Gold</span><span class="glyphicon glyphicon-ok icon-ok check-mark"></span></a>
</li>
<li data-original-index="1">
<a tabindex="0" class="" data-normalized-text="10K White Gold"><span class="text">10K White Gold</span><span class="glyphicon glyphicon-ok icon-ok check-mark"></span></a>
</li>
</ul>
</div>
</div>
<input type="hidden" id="metal_type" name="metal_type" value="14KW">
</div>
How to do with selenium using c#. I have tried using xpath but it throws the error.
driver.FindElement(By.XPath("//*[#class='prod-value']/div/div/ul/li[0]/a")).Click();
Above code not able to find the exact path.
Try this:
//*[contains(#class,'prod-value')]/div/div/ul/li[1]/a
There were two issues with that xpath.
prod-value is not the only class present in first div
Element indexes are 1-based, so there's no li[0]
#derloopkat provided with correct explanation (+1)
Another simple way to solve the issue is to use link text (in case there are no more "10K Rose Gold" links):
driver.FindElement(By.LinkText("10K Rose Gold")).Click();
You need to click on the dropdown to expand its option before you can choose any option.
// expand dropdown options
driver
.FindElement(By.Css("div.prod-value button.dropdown-toggle.selectpicker"))
.click();
// choose option
driver.FindElement(By.LinkText("10K Rose Gold")).Click();
Firstly you need to expand the dropdown as Answered by Yong
Then you need to click element by using xpath as Answered by derloopkat
Here is final code for get final output:
driver.FindElement(By.CssSelector("div.prod-value button.dropdown-toggle.selectpicker")).Click();
driver.FindElement(By.XPath("//*[contains(#class,'prod-value')]/div/div/ul/li[1]/a")).Click();
Related
I am very new to both Bootstrap and AngularJS. I've been researching this problem for a while now, and I can't find what's wrong. The dropdown appears, and you can click on it, but nothing happens when you click on the arrow for the drop down.
Here's the code I've been working with:
<div class="form-group">
<div class="dropdown" style="position: absolute; left: 60px; top: 115px;">
<button class=" btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown" id="dropdownMenu1"
aria-haspopup="true" aria-expanded="true">
Select an Office
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="office in ctrl.offices"><a ng- click="moveMap(office.latitude, office.longitude)">{{office.name}}</a></li>
</ul>
I found an example like this at this site: http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/06/29/how-to-work-with-the-bootstrap-dropdown-in-angularjs.aspx
Any help would be appreciated.
I made a plunker with your code, everything seems to be setup right. I'd double check to make sure you're including jquery and bootstrap's javascripts. Other than that, I'd actually suggest using Angular UI's bootstrap directives. It makes things a whole lot easier.
Stack Overflow made me post code because I have a plunker link... it's weird.
<div class="form-group">
<div class="dropdown" style="position: absolute; left: 60px; top: 115px;">
<button class=" btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown" id="dropdownMenu1"
aria-haspopup="true" aria-expanded="true">
Select an Office
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="office in offices"><a ng-click="moveMap(office.latitude, office.longitude)">{{office.name}}</a></li>
</ul>
</div>
</div>
One way is to use ng-model instead of ng-repeat if that is an acceptable solution for you. Something like this:
<select class="dropdown fullWidth" ng-model="ctrl.offices">
<option value="offices.Name"></option>
</select>
I have been trying to figure this out and could use some help from Selenium experts here. I have a dropdown on my page that I am trying to select an option for from the test and I cant seem to get this right.
I have tried the following example I see commonly for select Item. The options always show text as an empty string "" even though I can see in the HTML markup the option text is there.
wait.Until(d => ExpectedConditions.ElementExists(By.Id("Cars")));
var carStatusDropDown = new SelectElement(_driver.FindElement(By.Id("Cars")));
carStatusDropDown.SelectByText(filter.CarStatus);
I figured its because maybe the options are not visible to the browser, so then I tried to click on the button next to dropdown (Bootstrap) so it would be open before it selects the text
wait.Until(ElementIsClickable(By.XPath("/html/body/div[2]/div[2]/div/div[2]/div[1]/div/form/fieldset/div[3]/div/div[1]/span[2]/div/div/span")));
IWebElement ddlButton = _driver.FindElement(By.XPath("/html/body/div[2]/div[2]/div/div[2]/div[1]/div/form/fieldset/div[3]/div/div[1]/span[2]/div/div/span"));
ddlButton.Click();
wait.Until(d => ExpectedConditions.ElementExists(By.Id("Cars")));
var carStatusDropDown = new SelectElement(_driver.FindElement(By.Id("Cars")));
carStatusDropDown.SelectByText(filter.CarStatus);
I can see the ddlButton opens the dropdown but am still getting >OpenQA.Selenium.ElementNotVisibleException
when it tries to SelectByText. In VS I can see the the options text still shows "" and the Displayed property is false for them. How can I find the options, Any feedback would be appreciated, I am posting the HTML below whats weird is that there are two drop downs one as a <ul> and a <select> one the appears below, I am trying to access the <select> one in the test code. The select one in firebug shows up as faded in the markup?!?
HTML:
<div class="combobox-container">
<input type="hidden" name="Estimate.EstimateStatus" value=" ">
<input type="text" autocomplete="off"
placeholder="All"class="combobox">
<ul class="typeahead typeahead-long dropdown-menu" style="top:
112px;left: 445.117px; display: none;">
<li data-value="Approved" class=""><a href="#"><strong>
</strong>A<strong></strong>p<strong></strong>p<strong>
</strong>r<strong></strong>o<strong></strong>v<strong>
</strong>e<strong></strong>d<strong></strong></a>
</li>
<li data-value="Hold" class=""><a href="#"><strong>
</strong>H<strong>
</strong>o<strong></strong>l<strong></strong>d<strong></strong>
</a>
</li>
<li data-value="In Progress"><a href="#"><strong></strong>I<strong>
</strong>n<strong></strong> <strong></strong>P<strong>
</strong>r<strong></strong>o<strong></strong>g<strong>
</strong>r<strong></strong>e<strong></strong>s<strong>
</strong>s<strong></strong></a>
</li>
<li data-value="Not Reviewed" class="active">
<a href="#"><strong></strong>N<strong>
</strong>o<strong></strong>t<strong></strong> <strong>
</strong>R<strong></strong>e<strong></strong>v<strong>
</strong>i<strong></strong>e<strong></strong>w<strong>
</strong>e<strong></strong>d<strong></strong></a>
</li>
<li data-value="Rejected"><a href="#"><strong></strong>R<strong>
</strong>e<strong></strong>j<strong></strong>e<strong>
</strong>c<strong></strong>t<strong></strong>e<strong>
</strong>d<strong></strong></a>
</li>
</ul>
<span class="add-on btn dropdown-toggle" data-dropdown="dropdown">
<span class="caret"></span>
<span class="combobox-clear">
</span>
</div>
<select id="Cars" class="combobox"
onchange="javascript:OnCarsStatusChanged();" style="display: none;">
<option value=" " selected="selected">All</option>
<option value="3ad8cf29-f0b7-441f-
81bc-c5cfe7c0d73d">Approved</option>
<option value="19b573c8-fc88-4abe-9c19-9ffc580a1ffe">Hold</option>
<option value="e3a8b2bd-c3eb-47c3-95e7-f15da2f3d25b">In
Progress
</option>
<option value="962e4bce-1ca5-404f-b7a0-6a3a42ad91a0">Not
Reviewed
</option>
<option value="c110e83a-5a93-4553-
a907-02a47ca97467">Rejected</option>
</select>
It does seems like there is another action depended on this dropdwon. By default this dropdown is NOT visible. So, best will be to see what previous action makes it visible.
However, another workaround can be to execute a simple javascript, make the dropdown list visible and select the intended element you need.
removeAttribute should remove the style attribute to make the list visible.
((IJavaScriptExecutor)Driver).ExecuteScript("document.getElementById('Cars').removeAttribute('style');");
By id = By.Id('Cars');
var carStatusDropDown = new SelectElement(_driver.FindElement(id));
carStatusDropDown.SelectByText(filter.CarStatus);
Could anyone give me an idee on how could I generate dynamically this piece od code:
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" runat="server">
<span class="caret"></span></button>
<ul class="dropdown-menu" id="testingPurposes">
<li>
<div>
<span class="text-left" onclick="fct1()"> Text nr 1</span>
<asp:Image ID="Image1" ImageUrl="myImg.png" runat="server" onclick="fct2()"/>
</div>
</li>
<li>
<div>
<span class="text-left" onclick="fct1()"> Text nr 2 </span>
<asp:Image ID="Image2" ImageUrl="myImg.png" runat="server" onclick="fct2()"/>
</div>
</li>
</ul>
</div>
The main idea of this code is to have some kind of dropdown list looking control that would have a span with text, and an image on each row.
This is basicly how my control shoud look when it's clicked:
Text1 img1
Text2 img2
If a user clicks TextN i get an event for that click, and i can update the page based on selected item.
If a user clicks imgN then TextN and imgN would disappear from the list.
I am trying to implement a dropDownList which, on each row to contain two controls: a Label and a Button, but my problem is that I have no clue how to do that.
Searching on google gave me no usefull results, so I don't know from where to start, or perhaps I don't know what to search. This dropDownList should work as a standard one if user clicks on the label, or rise a different event if the button is clicked.
I know this in not the standard type of question here, but if anyone could help me would be greatly appreciated.
Dropdownlist is simply a list. then Why you need Button and label in Dropdownlist ?
The DropDownList is a control. So it is not possible to add buttons and label in dropdownlist
If you need to do some activities when dropdownvalue changed then you can use OnSelectedIndexChanged . You can use it like buttonclick event
If button and Label are necessary for you then add them in a different way Use frames, or in OnSelectedIndexChanged event create your buttons and labels
Try this if you are looking for double options related to dropdownlist then try something like below
css
ul.dropdown-menu li{
width: 500px;
}
ul.dropdown-menu li a.text-left{
float: left;
width: 49%;
}
ul.dropdown-menu li a.text-right{
float: right;
width: 50%;
}
html
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg">big button</button>
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<div>
<a href="#" class="text-left">
full name must align to left
</a>
<a href="#" class="text-right">
short name - align to right
</a>
</div>
</li>
<li>
<div>
left
right
</div>
</li>
<li>
<div>
left
right
</div>
</li>
<li>
<div>
<a href="#" class="text-left">
full name must align to left
</a>
<a href="#" class="text-right">
short name - align to right
</a>
</div>
</li>
</ul>
</div>
I have an MVC 3 site. I've created a navigation bar that looks like the following:
<div data-role="navbar">
<ul>
<li>
<a href="#ProfileView" class="ui-btn-active">
<img src='#Href("~/Content/img/Profile.png")' alt="Profile" />
</a>
</li>
.
.
</ul>
</div>
What gets rendered for one of the buttons is:
<a class="ui-btn-active ui-btn ui-btn-up-c" href="#ProfileView" data-theme="c">
<span aria-hidden="true" class="ui-btn-inner">
<span class="ui-btn-text">
<span aria-hidden="true" class="ui-btn-inner">
<span class="ui-btn-text">
<span aria-hidden="true" class="ui-btn-inner">
<span class="ui-btn-text">
<span aria-hidden="true" class="ui-btn-inner">
<span class="ui-btn-text">
<img alt="Profile" src="Content/img/profile.png">
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</a>
I was trying to compare mine to JQuery Mobile's demo site. It looks the same to me, but it's not working... So did I miss something? What typically causes the repetitiveness shown in this example?
Thanks.
Add data-role="none" to elements you don't want to render as a button. Then compare your output and see if you are still getting the extra rendering. Most likely you have an open tag, or are refreshing the listview multiple times.