Develop Reference

Click a Dropdown Menu Button using Watin

I am testing a website using Watin in the page there is dropdown menu button like if I find that button and click it clicks the entire button and selects the first Option in the menu but I want to click the V of the button to show the dropdown menu(div) and select the option from it the code I had tried to click the button
ff.Button(Find.By("aria-describedby", "x-auto-456")).FireEvent("onmouseover");
ff.Button(Find.By("aria-describedby", "x-auto-456")).FireEvent(" Onmousedown");
ff.Button(Find.By("aria-describedby", "x-auto-456")).Click();
the Button HTML
<button class="x-btn-text" style="position: relative; width: 16px;" type="button" tabindex="0" aria-describedby="x-auto-456">
Edit:
I had tried to find the co-ordinates of the Image in the button and then click it with the below code but its slightly not working kindly any one point me how to click the button and show the div Instead of selecting a option automatically,
NameValueCollection eventProps = new NameValueCollection();
eventProps.Add("clientY", "240");
eventProps.Add("clientX", "240");
ff.Button(Find.By("aria-describedby", "x-auto-456")).FireEvent("onClick",eventProps);

You are not finding the button correctly:
Button button = ff.Button(Find.ByClass("x-auto-457"));
You need to find the button by its class name. Be aware that will find the first <button> or <input type="button|submit|reset"> element with that class name. If you still aren't getting the correct button, check to see how many buttons on the page have x-auto-457 for a class attribute value.

WebBrowser SetAttribute not setting value on password input element

I have an application that uses WebBrowser control to go to a website, and try to log in. I found a few questions that seem similar but are not the same, and their answers do not help.
The website prompts for the information in steps, first prompts for the username, then prompts for the challenge question, then prompts for the password. To debug, I've created three buttons, one for each step above, so that I can separate to see what works and what doesn't. (In the end this will be fully automated, without any user interaction).
The first button navigates to the site and enters the username and submits -- that works fine. The second button is supposed to enter the answer to the challenge question, but the site returns saying that the entry is invalid. The actual HTML looks like this:
<input name="IDToken1" tabindex="1" id="IDToken1" style="padding: 2px; border: 2px solid rgb(240, 0, 0); border-image: none; width: 226px; color: black;" type="password" size="40" maxlength="40" value="" autocomplete="off">
The code to enter the challenge question looks like this:
var browser = (WebBrowser)_interactor.WinForm.Controls["browser"];
var txt = browser.Document.GetElementById("IDToken1");
if (txt != null)
{
txt.SetAttribute("Value", "answer-to-question");
// set event handler on click
//btnContinue.AttachEventHandler("onclick", (sender, args) => OnElementClicked(txt2, EventArgs.Empty));
var btnLogin = browser.Document.GetElementById("signIn");
btnLogin.InvokeMember("click");
}
I verified that the value is properly set by adding an event handler to the submit button, then checking the input value at the point of the form submission. The value looks to be set at that point, but when the form is submitted it returns an error, stating that the value is not valid.
I've also tried entering it by submitting the actual form, like so:
browser.Document.Forms["challengequestion"].Children["IDToken1"].SetAttribute("Value", "answer-to-question");
browser.Document.Forms["challengequestion"].InvokeMember("submit");
I get the same response.
I've also tried doing the cache clear as suggested here, which does not seem to help.
Finally, I've tried manually entering the answer and clicking the submit button, via the WebBrowser control on the application.
What am I missing? If I check the value of the input element on form submit and it has the proper value, how is it that the site is not able to see it? I enter the same value manually on the control and it works fine. Any ideas?

Asp Label in vb.net not capturing label text modified in javascript

I have the following label in vb.net:
<div style="height: 20px; vertical-align: text-bottom;">
<div style="float: left; width: 86%; text-align: right">
<b>Sub-Total</b> (a) through (e) above:
</div>
<div style="float: right; padding-right: 10px">
<asp:Label runat="server" ID="lblRateableEmployeesSubtotal" CssClass="lblRateableEmployeesSubtotalCls" Text="0"></asp:Label>
</div>
</div>
And I am dynamically adjusting this value in from a javascript function:
$('.lblRateableEmployeesSubtotalCls').text(numberWithCommas(subtotal));
This function is called whenever certain textboxes are changed. numberWithCommas just formats the text into a number format (x,xxx).
When I am trying to save these values in my codebehind, for some reason the labels' text is still showing as "0"! Even though it is clearly updated on the screen.
If lblRateableEmployeesSubtotal.Text > "" Then .TotalEmployees = CInt(lblRateableEmployeesSubtotal.Text)
Any idea why this could be happening?

ASP doesn't bother to include this information when it performs a postback, specifically because the whole idea of a label isn't to accept input from the client. When posting back ASP doesn't send the entire DOM; it only sends the information for fields specifically designed to accept input from the client.
In this case, the appropriate tool to use here is a Hidden control. Add an asp:HiddenField control to the page, set that control's value in your JavaScript code (you can set the label too, of course) and then inspect the value of the hidden field on the server side.

Only Input-type controls are posted back to the server. One possible solution in your case is simulate label with read-only flat-styled TextBox control.

That jQuery function only changes the text on the client, server doesn't know anything about any changes to the page until you send a POST request, but in that request by default only values of the INPUT elements are sent.
If you want to alter some things on the server using javascript on the client you're looking for the AJAX technology. If not, consider obtaining the value on the server from an input control like text box or make some hidden fields which will be updated in the same time as your label.
Sorry for my english.

Custom button in HtmlEditorExtender control?

I'm in dire need of assistance.
I need to add a custom button to an HtmlEditorExtender control, but I'm lacking the know-how to actually do that.
I've searched throughout this forum but no information was relevant or whatsoever.
Should someone be so kind to help, I need an example to help me sort this issue out.
Thanks in advance.

One possibility is to add it to the DIV containing the buttons using javascript. I do it using jQuery.
If you inspect the DIV in Firefox, you'll notice that it has a class named 'ajax__html_editor_extender_buttoncontainer'. Knowing this class allows you to select the container and add your own custom button to it.
To do so, add the following jQuery script in the HTML below your HtmlEditorExtender:
<script language="javascript" type="text/javascript">
// retrieve button container div using its class
$btnContainer = $(".ajax__html_editor_extender_buttoncontainer");
if ($btnContainer.length == 1) {
// append your custom button to the collection of elements within the button container div
$btnContainer.append("<input id=\"HtmlEditorExtender_YourButtonName\" class=\"ajax__html_editor_extender_YourButtonName\" type=\"button\" name=\"YourButtonName\" title=\"YourButtonName\" style=\"width: 101px; height: 21px;\" unselectable=\"on\"></input>");
}
</script>
To style the button, create images for it and add the following to your style sheet:
/* custom button */
.ajax__html_editor_extender_YourButtonName {
background: url('/images/YourButtonName_off.png') no-repeat scroll;
cursor: pointer;
display: block;
float: right; /* default is left */
border: medium none;
}
.ajax__html_editor_extender_YourButtonName:hover {
background: url('/images/YourButtonName_on.png') no-repeat scroll;
}
The appearance of your button is of course up to you, but the result may look something like this:
Finally, to add functionality, add a click event to elements that have the class you specified. You can do this in your external .js file.
If you want to access the html of the textbox, inside that click you will want to retrieve the html of the first of two divs that have the attribute contenteditable='true'. This is the design view of the HtmlEditorExtender.
Add the following to your .js file:
// click event for the custom button
$("body").on("click", ".ajax__html_editor_extender_YourButtonName", function (e) {
var $editorDiv = $("div[contenteditable='true']").first();
alert($editorDiv.html());
})
There's probably a more efficient way to get the design view but it'll work.

Ajax Calendar always visible

Is it possible to have an ajax calendar inside a div and make it be always visible,like asp:calendar? and highlight today's date and add some task to the calendar for different dates?
Thanks in advance

You could try placing an asp:calendar on a simple page, and picking apart the html that it generates until you get the effect that you are after.

There are three options I see.
Put the ASP:Calendar inside an Update Panel to mimic the AJAX effect. CHEAPEST AND EASIEST!
Write some JQUERY code that will look for the div on client side that has the visibility hidden and make it visible. See the visibility:hidden and display:none...that's what need to be changed. Then you will also have to write something else that will keep on setting this to display for each click and other event so that it is always displayed. THIS IS NOT A GOOD SOLUTION!
div id="ctl00_MainContent_ReportControl_CalendarExtender2_container" class="ajax__calendar" style="position: absolute; left: 766px; top: 775px; z-index: 1000; visibility: hidden; display: none;"
Use a 3rd party control like the Telerik RadCalendar.