Форма ввода считается пустой даже после установки значения JavaScript

Question

Я пытаюсь написать небольшой скрипт, который автоматически вводит имя пользователя на этой странице входа . Согласно Inspector (из Firefox), поле ввода идентифицируется как селектор 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, но когда я ввожу пароль и нажимаю кнопку отправки, появляется сообщение об ошибке

требуется имя пользователя

печатается, даже если поле не пустое.

После этого, если я щелкну поле имени пользователя, добавлю любой символ, удалим символ и затем снова нажмите кнопка отправки (см. рисунок ниже), теперь значение поля правильно интерпретируется и выводится сообщение об ошибке

Ошибка аутентификации

, что вполне нормально, поскольку мы используем неверное test в качестве имени пользователя.

Я думаю, что это происходит из-за событий, связанных с полем ввода. По словам инспектора, события focus, invalid, keydown, mousedown и onChange связаны с полем. Однако, даже если я выполню

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

или около того, значение все равно будет интерпретировано как пустое.

Два вопроса:

• Как я могу заставить скрипт работать в этом случае?

• Если вам удастся заставить скрипт работать, не могли бы вы рассказать, как вы анализировали структуру кода сайта? Сейчас я пользуюсь Инспектором, но этого недостаточно.

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

Вот как я пришел к этой строке:

1. Когда я выполняю console.log(username), я обнаружил, что у объекта есть свойство __reactEventHandlers, у которого есть метод onChange. С

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

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

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

и др. c. не работал вообще, я подозревал, что __reactEventHandlers имеет значение в этом случае.

Чтобы вызвать метод onChange из JavaScript, я прогуглил "javascript call response onchange" и нашел этот ответ .

---

Снова Я не знаю, почему {bubbles: true} делает трюк, который следует добавить к этому ответу или объяснить в другом ответе.