Q:

Form created with React doesn't update the backing state object

I am trying to automate the login form of Instagram web app:
https://instagram.com/accounts/login/
With the following code (you can run it on Chrome console):
var frm = window.frames[1].document.forms[0];
frm.elements[0].value = 'qacitester';
frm.elements[1].value = 'qatester';
frm.elements[2].click();

Even though the inputs are populated, when I monitor the XHR request, I see this is posted:

username=&password=&intent=

rather than this:

username=qacitester&password=qatester&intent=

And causes web app to not authenticate. Do you have any idea why the input values are not transferred to the backing state (model?) object of React?

A:

Instagram is using the linkState method from ReactLink:
http://facebook.github.io/react/docs/two-way-binding-helpers.html
The login page links to a bundles/Login.js that contains compressed code like this:
o.createElement("input", {
    className:"lfFieldInput",
    type:"text",
    name:"username",
    maxLength:30,
    autoCapitalize:!1,
    autoCorrect:!1,
    valueLink:this.linkState("username")
}))

If you look at the documentation for ReactLink, this means that the input field value only gets sent back to state when the change event fires on the input fields. However, it's not as simple as just firing the change event on the node in question - I think due to the way that React normalises browser events. The React docs specifically say that onChange in React isn't exactly the same as onChange in the browser for various reasons:
http://facebook.github.io/react/docs/dom-differences.html
Fortunately in your case Instagram are using React with Addons included which gives you access to React TestUtils, so you can do:
var frm = window.frames[1].document.forms[0];
var fReact = window.frames[1].React;
fReact.addons.TestUtils.Simulate.change(frm.elements[0], {target: {value: 'qacitester' }});
fReact.addons.TestUtils.Simulate.change(frm.elements[1], {target: {value: 'qatester' }});
frm.elements[2].click();

More documentation here:
http://facebook.github.io/react/docs/test-utils.html
Notice that since the login form itself is in an iframe, you must use the instance of React from that iframe otherwise the TestUtils won't be able to find the nodes correctly.
This will only work in situations where React Addons are included on the page. The normal non-Addons build of React will require another solution. However, if you're specifically talking about ReactLink then that's an addon anyway, so it's not an issue.

A:

Answering my own question, the required event is input event it seems and this code works:
var doc = window.frames[1].document;
var frm = doc.forms[0];
frm.elements[0].value = 'qacitester';
var evt = doc.createEvent('UIEvent');
evt.initUIEvent('input', true, false);
frm.elements[0].dispatchEvent(evt);
frm.elements[1].value = 'qatester';
frm.elements[1].dispatchEvent(evt);
frm.elements[2].click();

