Pressing keys simulation in Selenium, RadInput on fire

Have you thought whether it’s easy to automate tests, simulating key pressing?  How is this handled in a browser-oriented tool like Selenium?

Fortunately Selenium provides API for keyDown/Up and keyPress as well as a command to fire any event, which triggers correspondingly “on”-handler (of course - “fireEvent”). On the other hand the “type” command just sets the value of an input field, so that one can set new value of the input element without the need to fire any event. What if we need to see how a control behaves in case of some specific user input, though? An input control may accept digits only (like RadNumericTextBox) or even accepts certain keys pressing (see the MaskedTextBox).

The keyPress command should simulate a user pressing and releasing a key, so this is our choice. I put an input text element in the form to test key pressing on it (you can find all the examples/tests I use in this post attached in the zip):

    <input name="theTextbox" id="theTextbox" type="text" />

and add a simple test of keyPress. The command needs the ASCII code of the character, so the test looks like this:

                <tr>
                      <td>keyPress</td>
                      <td>theTextbox</td>
                      <td>\97</td>
                </tr>

I run the test in Firefox (my default browser) and it leaves the input with ‘a’ as value. Then I check the same in IE, but there is no visible effect!

I stumbled upon this issue some time ago and I really did not understand that until Dan Fabulich, Selenium lead developer (I like his post here), explained to me that the “keyPress” simply fires keyPress event in JavaScript, but its up to the browser whether to type this letter into the input field. Firefox does type it, but in most other browsers keyPress causes value change only if a JS event handler is registered to handle the event. Simply, isn’t it?

So the input value should be explicitly set no matter if the event is fired. We can use keyPress/typeKeys (the latter replaces several keyPress calls) along with “type” to workaround that.

The first test solution looks like this:

                <tr>
                      <td>keyPress</td>
                      <td>theTextbox</td>
                      <td>\97</td>
                </tr>

                <tr>
                      <td>type</td>
                      <td>theTextbox</td>
                      <td>a</td>
               </tr>

Now lets take a form with ASP:TextBox and RadTextBox. The above works with the regular text box, but there is a trick regarding RadInput controls input elements: those render the actual input elements with “_text” suffix. So our test looks like this:

                <!-- Test ASP:TextBox -->
                <tr>
                      <td>keyPress</td>
                      <td>TextBox1</td>
                      <td>\97</td>
                </tr>

                <tr>
                      <td>type</td>
                      <td>TextBox1</td>
                      <td>a</td>
                </tr>

               <!-- Test RadInput TextBox -->

                <tr>
                      <td>keyPress</td>
                      <td>RadTextBox1_text</td>
                      <td>\97</td>
                </tr>

                <tr>
                      <td>type</td>
                      <td>RadTextBox1_text</td>
                      <td>a</td>
                </tr>

                <tr>
                      <td>fireEvent</td>
                      <td>RadTextBox1_text</td>
                      <td>blur</td>
                </tr>

                <!-- Type several characters into RadTextBox -->
                <tr>
                      <td>typeKeys</td>
                      <td>RadTextBox1_text</td>
                      <td>voila</td>
                </tr>

                <tr>
                      <td>type</td>
                      <td>RadTextBox1_text</td>
                      <td>voila</td>
                </tr>

                <tr>
                      <td>fireEvent</td>
                      <td>RadTextBox1_text</td>
                      <td>blur</td>

                </tr>

You have noticed the “fireEvent” call at the end – we need that to set the value of RadInput control by typing-letters-way.

By the way, the easiest way to set values of RadInput controls is to call their SetValue() function via “getEval” command for example:

                <!-- Set RadTextBox value via SetValue method -->
                <tr>
                      <td>getEval</td>
                      <td>this.page().getCurrentWindow()["RadTextBox1"].SetValue("myTextBoxValue");</td>
                      <td></td>
                </tr>

The testing of RadInput controls client validation behavior is now easy to automate!

KPetkov_InputElementsKeyPressInSelenium