即使JavaScript设置了值，输入表单也被判断为空

Question

我正在尝试编写一个小的脚本，该脚本会自动在this login page中输入用户名。根据（Firefox的Inspector），输入字段被标识为CSS选择器input.input.input-text.input-default。所以我在下面写了脚本。

(function() {
    "use strict";

    window.setTimeout(() => {
        const username = document.querySelector('input.input.input-text.input-default');
        username.setAttribute('value', 'test');
    }, 100); //waits a little until the input form becomes available

})();

这实际上成功输入了用户名test，但是当我输入密码并单击提交按钮时，错误消息

需要用户名

即使该字段不为空也被打印。

[此后，如果我单击用户名字段，添加任何字符，删除该字符，然后再次单击提交按钮（请参见下面的gif），则现在该字段的值已正确解释并且显示错误消息

认证失败

已打印，这完全可以，因为我们使用无效的test作为用户名。

我认为此行为来自与输入字段相关的事件。根据检查员的说法，focus，invalid，keydown，mousedown和onChange事件已绑定到该字段。但是，即使我执行

username.dispatchEvent(new Event('onChange'));

或此类，该值仍被解释为空。

两个问题：

• 在这种情况下如何使脚本正常工作？

• 如果您成功完成了脚本的工作，能否告诉我您如何分析网站的代码结构？现在，我使用Inspector，但似乎不够用。

Answer 1

问题1

只需将下面的行添加到第一个代码段中，问题便已解决。

username.dispatchEvent(new Event('input', {bubbles: true}));

所以结果代码应该是

(function() {
    "use strict";

    window.setTimeout(() => {
        const username = document.querySelector('input.input.input-text.input-default');
        username.setAttribute('value', 'test');
        username.dispatchEvent(new Event('input', {bubbles: true})); //only difference
    }, 100);

})();

但是，我[知道为什么{bubbles: true}会骗人。

问题2

这是我想出的方式：

[执行console.log(username)时，我发现对象具有__reactEventHandlers方法的属性onChange。由于

username.dispatchEvent(new Event('onChange'));

username.dispatchEvent(new Event('change'));

username.dispatchEvent(new Event('input'));

等根本不起作用，我怀疑在这种情况下__reactEventHandlers是相关的。
要从JavaScript调用onChange方法，我用Google搜索“ javascript调用react onchange”并找到了this answer。

---

再次，我做

not

知道为什么{bubbles: true}会做出trick俩，应将其附加到此答案或在另一个答案中进行解释。