We Keep Coding

Selecting HTML drop-down through C#

I'm trying to select a HTML drop-down option through c# however Im not sure where to start. Could someone give a basic example.
Thanks in advance
Edited: This drop down I'm selecting is on someone's web page off the internet.
Edited: Below is the html on the webpage:
The drop down menu that contain "Ratings Data Upload" is what I am after to select.
<li class="dropdown ">
<a class="dropdown-toggle" role="button" aria-expanded="false" aria-haspopup="true" href="#" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="">
Ratings Data Upload
</li>

There is a great browser automation framework called Selenium. Your next step should be using tutorials or online training content to learn Selenium (or another tool).
Selecting a drop down value with Selnium is as easy as:
Select objSelect =new Select(driver.findElement(By.id("search-box-id")));
objSelect.selectByVisibleText("Name of option shown to user");

Selenium get element by XPath

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

Selenium select not working on some objects

I am having trouble with setting a Select object through Selenium. This Select object has some JavaScript associated with it that populates it's 'options' when the page is loaded. I believe this is causing it to behave differently. Normally I can set a Select object with the following:
SelectElement sel = new SelectElement(ele);
sel.SelectByText(value);
With this specific object, the same code will execute successfully (no exceptions thrown), however the value does not get set. Note that I put sleeps and re-trys in and I am confident the Select object is fully loaded before the code is executed (otherwise an exception would occur).
The two Select objects giving me this trouble also appear different from standard html Select objects which reinforces my belief that they are not standard Selects. The first two drop downs in this image are the troublesome ones, while the rest work as expected:
Unfortunately this is a private page that I cannot give you access to, but hopefully this HTML snippet is enough:
<h3>Details of your primary qualification, examination, or assessment</h3>
<script type="text/javascript" src="/assets/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/assets/js/jquery.ui.position.js"></script>
<script type="text/javascript" src="/assets/js/jquery.ui.selectmenu.js"></script>
<script type="text/javascript">
j$(document).ready(function () {
j$(".field [id$='_drpInstitution']").selectmenu();
j$(".field [id$='_drpName']").selectmenu();
j$(".field [id$='_drpInstitution']").change(function () {
__doPostBack('content_0$ucCourse$drpInstitution', '');
});
j$(".field [id$='_drpName']").change(function () {
__doPostBack('content_0$ucCourse$drpName', '');
});
});
</script>
<div class="field">
<label for="content_0_ucCourse_drpInstitution" id="content_0_ucCourse_lblInstitution">Name of Australian institution (university/college/examining body):<em class="required">*</em></label>
<select name="content_0$ucCourse$drpInstitution" id="content_0_ucCourse_drpInstitution" class="field-l Institution">
<option value="-1">- Select -</option>
<option selected="selected" value="Australian Catholic University">Australian Catholic University</option>
<option value="Avondale College of Higher Education">Avondale College of Higher Education</option>
<option value="Central Queensland University">Central Queensland University</option>
<option value="Charles Darwin University">Charles Darwin University</option>
<option value="Other">- Other -</option>
</select>
<em class="hint">If your institution does not appear in the list, please select 'Other' and enter your institution in the text box that appears.</em>
<span id="content_0_ucCourse_vldInstitution" style="display:none;"></span>
</div>
When I inspect the Dropdown box, instead of getting the Select object I get the following Span:
<span>
<a class="ui-selectmenu ui-widget ui-state-default ui-selectmenu-dropdown ui-state-active ui-corner-top" id="content_0_ucCourse_drpInstitution-button" role="button" href="#nogo" tabindex="0" aria-haspopup="true" aria-owns="content_0_ucCourse_drpInstitution-menu" style="width: 460px;" aria-disabled="false">
<span class="ui-selectmenu-status">Australian Catholic University</span>
<span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>
</a>
</span>
When I inspect the resulting drop down list, I get a UL located in the footer:
<div class="ui-selectmenu-menu" style="z-index: 2; top: 786px; left: 741px;">
<ul class="ui-widget ui-widget-content ui-selectmenu-menu-dropdown ui-corner-bottom" aria-hidden="true" role="listbox" aria-labelledby="content_0_ucCourse_drpInstitution-button" id="content_0_ucCourse_drpInstitution-menu" style="width: 460px; height: 189px;" aria-disabled="false" tabindex="0" aria-activedescendant="ui-selectmenu-item-562">
<li role="presentation" class="">- Select -</li>
<li role="presentation" class="ui-selectmenu-item-selected">Australian Catholic University</li>
<li role="presentation" class="">Avondale College of Higher Education</li>
<li role="presentation">University of Wollongong</li>
<li role="presentation">Victoria University</li>
<li role="presentation" class="ui-corner-bottom">- Other -</li>
</ul>
</div>
None of this appears in the Page Source, so it is all generated on the fly. I am currently working around the Select issue by clicking the hyperlink object id=content_0_ucCourse_drpInstitution-button and then clicking the hyperlink object text=Australian Catholic University
Any better workarounds would be appreciated.

As you've already discovered, the dropdown is not represented by select->option in this case.
Handle it as is - find the a element by Id (which would be your "select"), click it to open up the dropdown; then, find the a element with text "Australian Catholic University" (which would be your "option") by link text:
IWebElement select = driver.FindElement(By.Id("content_0_ucCourse_drpInstitution-button"));
select.Click();
IWebElement option = select.FindElement(By.LinkText("Australian Catholic University"));
option.Click();
We can also think about the problem differently - if they've hidden the select element from us - we'll just make it visible. Cannot guarantee it would work since I cannot reproduce the problem:
((IJavaScriptExecutor)Driver).ExecuteScript("arguments[0].hidden = false; arguments[0].style.visibility='visible';", element);
where element is pointing to your select tag.
Then, after making the element visible try using SelectByText():
element.SelectByText("Australian Catholic University");

Edit webpage values and submit by button click?

HTML
<head></head>
<body class=" products show us">
<header id="header"></header>
<div id="wrap">
::before
<div id="container" style="opacity: 1;">
<div class="sidebar"></div>
<article itemtype="http://schema.org/Product" itemscope="itemscope">
::before
<figure>
<img id="img-main" src="test.jpg" itemprop="image" alt="test"></img>
<div id="zoom-lens"></div>
<div id="zoom-holder" style="background: url("test.jpg") no-repeat scroll 0px 0px transparent;" data-background-image="test.jpg"></div>
</figure>
::after
</article>
<div id="details" data-style-limited-with-count="0" data-style-limited="false">
<h1 itemprop="name"></h1>
<p class="style" itemprop="model">
White
</p>
<p class="description" itemprop="description"></p>
<ul class="styles "> // STEP 1: GENERATE LIST OF STYLES PER data-style-name and select the one that matches via adding "selected" to a class""!
::before
<li>
<a class="selected" data-style-name="White" data-style-id="10570" data-sold-out="false" data-images="{"detail_url":"..."..."}" href="..." data-no-tubolink="data-no-tubolink"></a>
</li>
<li>
<a class="" data-style-name="Black" data-style-id="10571" data-sold-out="true" data-images="{"detail_url":"..."..."}" href="..." data-no-tubolink="data-no-tubolink"></a>
</li>
::after
</ul>
<p class="price" itemtype="http://schema.org/Offer" itemscope="itemscope" itemprop="offers"></p>
<div id="cart-controls">
<div id="cart-controls"> // STEP 2 => OPEN THIS!
<form id="cart-addf" class="add" method="post" data-remote="true" action="/shop/168934/add" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline"></div> // STEP 3: GENERATE LIST OF OPTIONS (UNKNOWN AMOUNT OF FIELDSETS) AND SELECT OPTION(S)!
<fieldset>
<select id="size" name="size">
<option value="25134"></option>
<option value="25135"></option>
<option value="25136"></option>
</select>
</fieldset>
<fieldset>
<select id="qty" name="qty">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<option value="6"></option>
<option value="7"></option>
<option value="8"></option>
</select>
<a class="next" href="..."></a>
</fieldset>
<fieldset id="add-remove-buttons">
<input class="button" type="submit" value="add to cart" name="commit"></input> // STEP 4: CLICK BUTTON!
<a class="button continue" href="/shop"></a>
</fieldset>
</form>
</div>
</div>
<script id="cart-controls-add" type="text/x-nano-tmpl"></script>
<script id="cart-controls-remove" type="text/x-nano-tmpl"></script>
<script id="cart-controls-sold-out" type="text/x-nano-tmpl"></script>
<script id="cart-controls-limited" type="text/x-nano-tmpl"></script>
</div>
</div>
::after
</div>
<footer id="nav" style="opacity: 1;"></footer>
<script type="text/javascript"></script>
<script type="text/javascript"></script>
<script type="text/javascript"></script>
</body>
</html>
DESC
Above is the HTML code that I would like to access, modify values, & then submit data.
I am using c# net 4.0 and HTMLAGILITYPACK to achieve this.
I wrote inside the HTML above 4 total comments (4 things in total that is needed).
I was wondering if the goal of editing values is possible with HTMLAGILITYPACK and if it was possible to click a button on the webpage to submit the values that would be edited.
I found a few references regarding this matter but do not know how to put to proper use.
1: How to click a link element programmatially with HTMLElement?
2: Clicking button automatically using HtmlAgilityPack
PSEUDO CODE
HtmlAgilityPack.HtmlDocument doc = null;
doc = new HtmlAgilityPack.HtmlDocument();
doc.LoadHtml(new WebClient().DownloadString("website above that contains that HTML"));

Not quite sure what you want to accomplish, but I think this might be on the right track:
See this to change any attributes in JQuery http://api.jquery.com/attr/
See this to change/add things that'll happen when you click something https://api.jquery.com/click/
Needless to say, I don't think you need to make the button "click itself", what's the point of it then? :P
But you can make it that if you click it, it does the first thing it should first, and then the second thing after that, within the JQuery click function you'll presumably make.
But like pasty said, I'd like you to elaborate a bit more, feel free to comment and ask if something is unclear in this post.

Dropdownlist One row contains Two Selectable options

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>