Automated control of a Telerik RadDatePicker

I'm using开发者_JAVA百科 WatIn to create an automated test for a Web App that uses Telerik controls: my first challenge is to drive a Telerik date control - a RadDatePicker.

Simply entering the text in the likeliest input field doesn't work: the value is reset to blank as the form is posted. So I imagine I need a more complex set of automated interactions -- for example, I found this thread on the Telerik site discussing how to automated a selection from a Telerik combo box.

Can anyone supply the magic combination of interactions I need?

(I'm sure that the answer would help anyone using any automated test tool, hence I've also flagged this question with a couple of other test frameworks too :-))

---

I'm using Selenium RC and had a similar problem few days ago. It took me ages to find the right way of doing it so I thought I will share the solution that worked for me:

(NOTE: I couldn't use $find)

The javascript to set the date on the RadDatePicker is:

var appBrowser = this.browserbot.getCurrentWindow();
var datepicker = appBrowser.yourDatePickerId; //note: no quotes
var selectDate=new Date();
selectDate.setFullYear(yourYear,yourMonth,yourDay);
datepicker.SetDate(selectDate);
datepicker.DateInput.SetDate(selectDate);

and then use selenium GetEval in your test to call javascript code to set the date:

selenium.GetEval("javascript here");

You should definitely wrap it around some parametrised helper class that will generate the javascript code for you each time you want to set the date in the test by passing id of the control and date.

---

I finally have a solution that works. The key is to use javascript to call the client-side API for the telerik control. The same technique is required for all complex Telerik controls, e.g. RadInput.

I used the technique recommended on the WatiN website for writing your own control http://watinandmore.blogspot.com/2009/12/wrapping-complex-logic-in-control.html to come up with this:

public class TelerikDatePicker : Control<TextField>
{
    public DateTime? Value
    {
        get
        {
            var jScript = string.Format(@"$find(""{0}"").get_selectedDate();", Element.Id);
            var selectedDateStr = Eval(jScript);
            return TranslateJavascriptDateStringIntoDateTime(selectedDateStr);
        }

        set
        {
            var jScript = string.Format(@"$find(""{0}"").set_selectedDate(new Date(""{1:MMMM dd,yyyy}""));", Element.Id, value);
            Eval(jScript);
        }
    }

    public void SetValue(DateTime? value)
    {
        if (value.HasValue)
            Value = value.Value;
        else
            Clear();
    }


    public void Clear()
    {
        var jScript = string.Format(@"$find(""{0}"").clear();", Element.Id);
        Eval(jScript);
    }


    private string Eval(string script)
    {
        return Element.DomContainer.Eval(script);
    }

    public bool IsEnabled()
    {
        var jScript = string.Format(@"$find(""{0}"").get_enabled();", Element.Id);
        return Eval(jScript) == "true";
    }

    private DateTime? TranslateJavascriptDateStringIntoDateTime(string jsDateStr /*E.g. Mon Mar 12 00:00:00 UTC+0100 2012*/)
    {
        if (String.IsNullOrEmpty(jsDateStr) || jsDateStr == "null") return null;

        var abbreviatedMonth = jsDateStr.Substring(4, 3);
        var dayOfTheMonth = jsDateStr.Substring(8, 2).TrimEnd(' ');
        var year = jsDateStr.Substring(jsDateStr.Length-4, 4);

        const string format = "d MMM yyyy";
        var dateStr = dayOfTheMonth + " " + abbreviatedMonth + " " + year;

        return DateTime.ParseExact(dateStr, format, CultureInfo.InvariantCulture);
    }
}

---

I had the same issue with a RadDatePicker that would post back empty after typing in values.

I managed to automate typing in the date into the input field with these steps:

1. Select the dateInput text box associated with the control.
2. Do a dateInput.MouseClick() on it
3. Type the date into the field Manager.Desktop.KeyBoard.TypeText("1/1/1990")
4. Do a .MouseClick() on any other element on the page, e.g. some div

I found that #4 was needed to fire the events to make the control blur therefore "saving" its value.

Then you can submit and the value should go along with it.

---

Solved that problem for SeleniumIDE - you have to use "fireEvent" method with value "blur" for "ControlID" after you've set value using "sendKeys" or "type" methods. Strange that this problem does not occur when automating with WebDriver.