onchange event does not get fired on selenium type command

Question

I am typing some value, on change do a total. But somehow, this event is not getting fired with selenium type command.

I also tried typeKey and typeAt ..But no success. Any workaround for this ?

Answer 1

To trigger the onchange event, try adding this command in Selenium IDE:

fireEvent targetID blur

Answer 2

Firefox has a bug which prevents some events from being executed while the browser window is out of focus. This could be an issue when you're running your automation tests - which might be typing even if the window is out of focus.

To fix this issue I triggered the change event "manually", injecting javascript into my tests.:

//suppose "element" is an input field
element.sendKeys("value");
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
jsExecutor.executeScript("$(arguments[0]).change();", element);

As you might have noticed, I'm using jQuery to trigger the change event. If you're not using jQuery on your app, you can check here how to trigger it using vanilla javascript.

Hope that helps somebody.

Answer 3

If you're using Selenium 1.x, there is a fireEvent command that you can use to manually trigger the onChange event after typing in the value. Maybe that would solve your problem?

Answer 4

Your solution normally is found by looking at the JavaScript code..

An option you always have is to put in the value and manually trigger the actual OnChange event from code.

There are an open issue about this link text Problem with FireFox Windows not being active and prevents the OnChange to be triggered.

Try this before using typeKeys command:

selenium.selectWindow(null);

Answer 5

This worked for me in IDE do the following 3 commands in order

Typekeys   targetID    input
FireEvent  targetID    focus
Type       targetID    input

The source looks like this (input was letter r)

<tr>
<td>typeKeys</td>
<td>//form/input</td>
<td>r</td>
</tr>
<tr>
<td>fireEvent</td>
<td>//form/input</td>
<td>focus</td>
<tr>
<td>fireEvent</td>
<td>//form/input</td>
<td>focus</td>
</tr>
<tr>
<td>type</td>
<td>//form/input</td>
<td>r</td>
</tr>
</tr>
<tr>
<td>type</td>
<td>//form/input</td>
<td>r</td>
</tr>

Answer 6

It looks like the "sendKeys" command was implemented to rectify this:

https://code.google.com/p/selenium/issues/detail?id=5451

This worked for me.

<tr>
    <td>sendKeys</td>
    <td>id=Quantity</td>
    <td>Type stuff here</td>
</tr>

Answer 7

I had a similar problem, with a Dropdown list made with Ajax.
As the user types in a field, the system displays AJAX divw with several options, each one as a link with target='#'

And even worse, there was a function called on the onChange() that filled a system flag, and that flag would be used as a validation on the form.submit() (oh, the pain)

Anyways, my solution for this:
1 - Selenium sendKeys command so the Ajax div would appear

<tr>
    <td>sendKeys</td>
    <td>id=txtTipoDocumento</td>
    <td>ipsum lorem</td>
</tr>

2 - wait for the link with the expected option to appear

<tr>
    <td>waitForElementPresent</td>
    <td>link=ipsum lorem</td>
    <td></td>
</tr>

3 - selenium clickAt the link

<tr>
    <td>clickAt</td>
    <td>link=ipsum lorem</td>
    <td>10,20</td>
</tr>

4 - Here is the ONE of the catches: manually fire the onChange() AND blur events. Also, foce the browser to set focus on different field

 <tr>
        <td>fireEvent</td>
        <td>id=txtTipoDocumento</td>
        <td>blur</td>
    </tr>
    <tr>
        <td>fireEvent</td>
        <td>id=selSerie</td>
        <td>change()</td>
    </tr>
    <tr>
        <td>fireEvent</td>
        <td>id=selSerie</td>
        <td>blur</td>
    </tr>
    <tr>
        <td>focus</td>
        <td>id=imgDataElaboracao</td>
        <td></td>
    </tr>

5 - Finally, to be sure, I made Selenium do execute the ClickAt() command on the Submit button of the forme, between a mouseDown and MouseUp commands

<tr>
    <td>mouseDown</td>
    <td>id=btnSalvar</td>
    <td></td>
</tr>
<tr>
    <td>focus</td>
    <td>id=btnSalvar</td>
    <td></td>
</tr>
<tr>
    <td>clickAt</td>
    <td>id=btnSalvar</td>
    <td>10,20</td>
</tr>

Not elegant, but it worked.