I'm trying to fill inputs on https://account.protonmail.com/login with javascript.
First navigate to https://account.protonmail.com/login and run the following javascript in devtools:
document.querySelector('#username').value = 'MyUser'
document.querySelector('#password').value = 'MyPassword'
And the form is filled:
But when I click on "Sign in", the values are gone:
How can I keep the values when I click on "Sign in"?
The Proton Account page you linked is based on React, according to its source code. React (like many other frameworks) listens for specific events to know whether or not a user has changed values in form fields.
Fortunately, answerers in another SO thread were able to leverage a simple function for this same functionality, which you can re-use to complete the fields and trigger the appropriate events & validation logic. Your code would look something like this:
function changeValue(input,value){
var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
window.HTMLInputElement.prototype,
"value"
).set;
nativeInputValueSetter.call(input, value);
var inputEvent = new Event("input", { bubbles: true });
input.dispatchEvent(inputEvent);
}
changeValue(document.querySelector('#username'), 'MyUser');
changeValue(document.querySelector('#password'), 'MyPassword');
This allows the field validation to be passed for me when running this code in the developer console within the latest release of Chrome.
