Ich versuche das Anmeldeformular der Instagram Web App zu automatisieren:
Mit dem folgenden Code (Sie können ihn in der Chrome-Konsole ausführen):
%Vor%Obwohl die Eingaben ausgefüllt sind, sehe ich, wenn ich die XHR-Anfrage überwache:
username = & amp; password = & amp; intention =
und nicht:
username = qacitester & amp; password = qatester & amp; intent =
Und bewirkt, dass sich die Web App nicht authentifiziert. Haben Sie eine Idee, warum die Eingabewerte nicht in das Objekt "Reagieren?" (?!?) Übertragen werden?
Instagram verwendet die Methode linkState von ReactLink:
Die Anmeldeseite verweist auf ein bundles/Login.js , das komprimierten Code wie folgt enthält:
Wenn Sie sich die Dokumentation zu ReactLink ansehen, bedeutet dies, dass der Wert des Eingabefelds nur in den Status zurückgesendet wird, wenn das Änderungsereignis in den Eingabefeldern ausgelöst wird. Es ist jedoch nicht so einfach, nur das Änderungsereignis auf dem fraglichen Knoten auszulösen - ich denke aufgrund der Art, wie React Browserereignisse normalisiert. Die React-Dokumentation besagt ausdrücklich, dass OnChange in React aus verschiedenen Gründen nicht genau mit onChange im Browser übereinstimmt:
Glücklicherweise verwendet Instagram React mit Addons, die Ihnen Zugriff auf React TestUtils geben, damit Sie folgendes tun können:
%Vor%Weitere Dokumentation hier:
Beachten Sie, dass Sie müssen die Instanz von React von diesem iframe verwenden, da das Login-Formular selbst in einem iframe ist, sonst wird TestUtils nicht in der Lage sein, die Knoten korrekt zu finden.
Dies wird nur in Situationen funktionieren, in denen React Addons auf der Seite enthalten sind. Der normale Nicht-Addons-Build von React erfordert eine andere Lösung. Allerdings, wenn Sie speziell über ReactLink sprechen, dann ist das sowieso ein Addon, also ist es kein Problem.
Das Anmeldeformular befindet sich tatsächlich in einem iFrame, was die Dinge etwas komplizierter macht. Ich konnte erfolgreich eine Anmeldung mit dem folgenden Code von der Chrome-Konsole senden. Ich benutze React's TestUtils, aber mit AutoType geht es vielleicht besser:
%Vor%Hintergrund
React verwendet ein eigenes virtuelles Ereignissystem und verwendet in der Regel kontrollierte Komponenten , die bedeutet im Wesentlichen, dass die Eingabe value durch react gesetzt wird und auf das DOM-Element hinunterrieselt.
In Anbetracht dessen glaube ich, dass das Problem, das Sie erleben, darin besteht, dass react nach einem Schlüsselereignis für die Eingabe sucht und den Wert der Eingabe zum Zeitpunkt des Ereignisses verwendet, um den Wert des DOM-Elements festzulegen. Da Sie nur die Eigenschaft value des DOM-Elements festlegen, brechen Sie den Zyklus der kontrollierten Komponente aus.
Ich habe einen schnellen Spike-Versuch unternommen, einen KeyboardEvent auf die Eingabe zu senden, aber leider war das nicht erfolgreich. Ich werde meine Antwort aktualisieren, wenn es mir tatsächlich gelingt.
Nicht zufriedenstellende Problemumgehung:
Verwenden Sie casper / phantomjs, um das Ausfüllen von Formularen zu automatisieren. Das bedeutet, dass Sie sich keine Gedanken darüber machen müssen, Ereignisse selbst zu versenden, und Sie können es einfach dem "Browser" überlassen. Es ist auch besser, als manuell in der Konsole zu arbeiten.
Tags und Links javascript reactjs