We Keep Coding

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

Upload a file using selenium web driver in c#

I am trying to upload a file using selenium web driver in c#.
I am trying this:
WebDriver.FindElement(By.Name("upload")).SendKeys("C:\Users\test\Desktop\test.cs");
but this is not working.
This is working properly in selenium IDE but not in selenium webdriver.
Following is the HTML code of the page:
where I am trying to use following element:
<input class="js-attach-file" type="file" tabindex="-1" name="upload">
<!DOCTYPE html>
<html lang="en">
<head>
<body class="page-index firefox firefox-9 windows extra-large-window full-content window-up">
<div id="nocss">
<div id="surface" class="clearfix" style="height: 725px;">
<div class="window-overlay">
<div class="window" style="left: 375px; top: 50px; display: block;">
<div class="window-wrapper clearfix">
<div>
<div class="window-header-utils">
<div class="window-header clearfix">
<div class="window-main-col">
<div class="window-sidebar">
<div class="window-module card-label-list clearfix hide">
<div class="window-module clearfix">
<div class="window-module clearfix attachments">
<h3>Attachments</h3>
<ul class="attachment-list hide"></ul>
<p class="no-attachments empty">No attachments.</p>
<div class="uploader touch-hide">
<form class="realfile" enctype="multipart/form-data" method="post" action="/api/card/4f701c9daf1765861a15545c">
<input type="hidden" value="" name="token">
<input type="hidden" value="attachFile" name="method">
<input type="hidden" value="http" name="format">
<input class="js-attach-file" type="file" tabindex="-1" name="upload">
</form>
<a class="button-link highlight-icon fakefile js-fakefile">
</div>
<p class="error js-file-too-large" style="display:none; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-weight: bold; margin: 8px 0 0; padding: 6px; background: #e3e3e3; ">File too large. 10mb limit.</p>
</div>
<div class="window-module other-actions clearfix">
<div class="window-module quiet-actions clearfix">
</div>
</div>
</div>
</div>
</div>
<div class="pop-over clearfix fancy-scrollbar" style="display: none;">
<script>
<script src="https://d2k1ftgv7pobq7.cloudfront.net/js/78dcaf5810779a263fe6939fc4895487/all.js">
</body>
</html>

You can find solution in below link.
You can solve it by using javascript
String script = "document.getElementById('fileName').value='" +"C:\\\\temp\\\\file.txt" + "';";
((IJavascriptExecutor)driver).executeScript(script);
Webdriver: File Upload

selenium is not able to identify or recognize the element whose attribute is type file.
Like example
<input type="file" id="id1" name="abc"></input>
so, to handle this situation we have to use third party tool like Point Position to compute x & Y coordinate of browse button.
then we can use either Low level mouse click handle in c# or we have to Use Autoit V3 tool to handle window popup.
You can find more in detail with full explanation and Practical example on my blog: http://avinashpandeblogsonseleniumautomation.blogspot.in/2015/06/upload-file-using-selenium-web-driver.html

If you are using Firefox browser instead of Send keys use type.
And If the browser is IE then u have to use tool like Autoit Or Selenium 2 contains a method attach_file or use this
sel.attach_file("css=input[type=file]", "http://url.com/file.txt")

C# ASP.Net Fancy Buttons

I am developing a C# ASP.Net project. And I would like to do something very similar to what is shown in the following website.
However, that is a solution for the HTML <a> tag, and I am looking for a solution for ASP.NET buttons.
What are my options?

<asp:LinkButton /> is a good choice. It is virtually identical to <asp:Button />, except it creates a form enacting hyperlink that you can put any image in it that you want to.
I stress using LinkButton instead of ImageButton because ImageButton uses different event handlers, which makes it difficult to switch back and forth between them. With Linkbuttons and Buttons, they use the same event handlers, so it's rather easy to switch between them.

They are the same, you can do something like this:
<asp:Button ID="SearchButton" runat="server" CssClass="addButtonStyle" OnClick="SearchButton_Click"
Text="Go " Width="60px" />
some style:
.addButtonStyle {
border: 1px solid #e1ecfc;
background-color: #B9D1F4;
color: #003399;
background-image: url(partgrad.gif);
background-repeat: repeat-x;
}

Try this example
or view it here My Example Link
<!DOCTYPE html>
<html>
<head>
<title>Hello World | Button Config</title>
</head>
<body>
<div>
<h1>Working with Buttons</h1>
<p>Small, large, or medium size buttons can have css properties that you can benefit from rather that using images. Please look at the examples below</p>
<textarea>
<asp:button runat="server" id="helloWorld" CssClass="button" text=" --- See examples --- " />
</textarea>
<ol>
<li>
<input type="submit" class="button" value="This is a Long Button"/>
</li>
<li>
<input type="submit" class="button" value="Search Now!"/>
</li>
<li>
<input type="submit" class="button" value="Short"/>
</li>
</ol>
<ol>
<li>
<input type="submit" class="button round" value="This is a Long Button"/>
</li>
<li>
<input type="submit" class="button round" value="Search Now!"/>
</li>
<li>
<input type="submit" class="button round" value="Short"/>
</li>
</ol>
<p>
In theory you always want the cleanest markup. So linkButtons on are NO GO! LinkButtons are Javascript based and can cause accessibility issues.
</p>
<h3>IE doesn't have my rounded corners?</h3>
<p>
Gotcha, lets do it without JS and lets use the images found from the link below. IE doesnt take advantage of some of the cooler CSS tricks we find in other browsers. - Shame on them! In the next example we simply wrap the asp:button with a span and then a b element.
</p>
<ol>
<li>
<span id="btn-wrap">
<b>
<input type="submit" class="rounded" value="This is a Long Button"/>
</b>
</span>
</li>
<li>
<span id="btn-wrap">
<b>
<input type="submit" class="rounded" value="Search Now!"/>
</b>
</span>
</li>
<li>
<span id="btn-wrap">
<b>
<input type="submit" class="rounded" value="Short"/>
</b>
</span>
</li>
</ol>
<textarea>
<span id="btn-wrap">
<b>
<asp:button runat="server" id="helloWorld" text=" --- See examples --- " />
</b>
</span>
</textarea>
<h3>Wrapping it up</h3>
<p>
In this demo, you've seen a single background image used as a repeating object to give us a gradient effect similar to the one found here http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
</p>
<style>
input[type="submit"], span, b {background:transparent none repeat scroll 0 0;border:0 none;display:inline-block;margin:0;padding:0;cursor:pointer;outline:none;} /* reset the button */
input.button {background:url(http://gfx2.hotmail.com/cal/11.00/updatebeta/ltr/grid_navigator_bg.png) repeat-x; text-shadow:0 1px 1px #FFFFFF /* Just for looks */; padding:4px 5px;}
input.button:active {background:#FED58F;}
.round {-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;}
/* http://gfx2.hotmail.com/cal/11.00/updatebeta/ltr/grid_navigator_bg.png thank you hotmail for the image */
span#btn-wrap {background:transparent url(http://www.oscaralexander.com/tutorials/img/bg_button_span.gif) repeat-x scroll 0 0;}
span#btn-wrap b {background:transparent url(http://www.oscaralexander.com/tutorials/img/bg_button_a.gif) no-repeat scroll right 0;height:18px;padding:3px 10px;}
span#btn-wrap:active {background-position: 0 -24px;}
span#btn-wrap:active b {background-position: right -24px;}
li {margin:5px 0;}
textarea {background:#323232; color:white; padding:10px; width:900px; height:80px; overflow:hidden;}
</style>
</div>
</body>
</html>
Like the page says, this is the cleanest java Script less way to do it. This is accessible and browser friendly.

Drag-and-drop accordion panels? (ASP.Net)

I have a set of accordion panes(dynamically created) contained in an Accordion control. Basically, what I am wanting is for the user to be capable of dragging these accordion panels so that instead of
A pane
B pane
C pane
They can drag and drop it to be something like
B pane
A pane
C pane
Or whatever. Also, more importantly, I would need to be able to detect that they have changed the order. Would there be a way to have it when they "drop" the pane that it can update a hidden field or something? I don't need a postback on every single drag and drop, but rather I want for when they hit a save button for the server application to detect the order in which the panes are so that it can save this order.
I would prefer to stay away from javascript libraries, but if it would be the easiest way, then I'll consider it.

Based on petersendidit's answer but without "disappearing accordion" bug...
<div id="accordion">
<div id="section_1">
<h3>Section 1</h3>
<p>
Body 1
</p>
</div>
<div id="section_2">
<h3>Section 2</h3>
<p>
Body 2
</p>
</div>
<div id="section_3">
<h3>Section 3</h3>
<p>
Body 3
</p>
</div>
<div id="section_4">
<h3>Section 4</h3>
<p>
Body 4
</p>
</div>
</div>
and
$("#accordion").accordion({
header:'h3'
}).sortable({
items:'>div'
});
Demo at: https://jsbin.com/bitiyucasa

You can do something like this with jQuery UI:
$("#accordion").accordion()
.sortable({
items:'>.ui-accordion-header',
change: function(event, ui) {
$content = ui.item.next();
},
stop: function(event, ui) {
ui.item.after($content);
}
});
This sets $content to the content div for that header on change. And then on stop moves that content to be after the new position of the header.
HTML would be something like:
<div id="accordion">
<h3 id="section_1">Section 1</h3>
<div>
<p>
Body 1
</p>
</div>
<h3 id="section_2">Section 2</h3>
<div>
<p>
Body 2
</p>
</div>
<h3 id="section_3">Section 3</h3>
<div>
<p>
Body 3
</p>
</div>
<h3 id="section_4">Section 4</h3>
<div>
<p>
Body 4
</p>
</div>
</div>
When your user hits the "save" button you can just call:
$('#accordion').sortable( 'serialize');
Which will give you something like:
section[]=2&section[]=1&section[]=3&section[]=4

This widget is probably the sort of thing you are after.
You can add links to the javascript in the head
<link rel="stylesheet" type="text/css" href="accordion.css">
<script type="text/javascript" src="Ext.ux.InfoPanel.js"></script>
<script type="text/javascript" src="Ext.ux.Accordion.js"></script>
The markup is then just a series of divs. With a little bit of effort you should be able to tie this into the accordion control or create a user control to do your bidding
<div id="acc-ct" style="width:200px;height:300px">
<div id="panel-1">
<div>My first panel</div>
<div>
<div class="text-content">My first panel content</div>
</div>
</div>
<div id="panel-2">
<div>My second panel</div>
<div>
<div class="text-content">My second panel content</div>
</div>
</div>
</div>
A preview of it is available here
Hope this helps

You could use predefined dojo control (open source javascript framework)(link text) and use this control from here (link text) .You can also integrate dojo with asp.net like on my blog (link text).
Waiting for response of your success