Remplir le formulaire reacjs par programmation

Question

J'écris un script d'utilisateur et je n'arrive pas à remplir un formulaire fait par reactjs. Mon code:

document.querySelector("#id-username").value = "name@domain.xx"; 
// Attempt to notify framework using input event 
document.querySelector("#id-username").dispatchEvent(new Event("input", {data:"name@domain.xx"})); 
// Attempt to notify framework using change event 
document.querySelector("#id-username").dispatchEvent(new Event("change")); 
// This doesn't help either 
document.querySelector("#id-username").dispatchEvent(new Event("blur")); 
// Submit the form using button (it's AJAX form) 
document.querySelector("fieldset div.wrap button").click(); 

je suis entré dans ce code dans la console d'outils de Developper après le chargement de la page. Cependant, la forme ne tient pas compte de mon entrée programatical:

Le formulaire est disponible here. Le but de mon travail est d'automatiser la connexion au site Web donné. J'ai fourni l'URL spécifique, mais j'attends une solution générique à ce problème (par exemple en utilisant une API de reactjs) qui peut être appliquée à n'importe quelle forme de réaction. D'autres utilisateurs peuvent avoir besoin de cette solution pour écrire des tests automatisés pour leurs sites.

Answer 1

L'événement doit être émis vers ReactJS pour qu'il enregistre la valeur. En particulier, l'événement input. Il est vraiment important de s'assurer que l'événement bubbles - React JS a un seul écouteur au niveau document, plutôt que sur le champ de saisie. J'ai conçu la méthode suivante pour définir la valeur de l'élément de champ de saisie:

function reactJSSetValue(elm, value) { 
    elm.value = value; 
    elm.defaultValue = value; 
    elm.dispatchEvent(new Event("input", {bubbles: true, target: elm, data: value})); 
} 

Answer 2

Pour la version 64 de Chrome, il existe une solution de contournement. Sinon, l'événement est ignoré.

Voir: https://github.com/facebook/react/issues/10135#issuecomment-314441175

(Crédit complet à fatfisz dans le lien)