Login Form in Clockify

Question

I'm trying to create a PowerShell script to open Internet Explorer, navigate to https://clockify.me/login , fill in the email and password inputs and submit the form or click the log in button.

The problem is that, when filling the inputs using:

• document.getElementById("email").value="123"
• document.getElementById("password").value="123"

I have the following results:

• When I submit the form with document.forms[0].submit() the pages reload with URL https://clockify.me/login?email=&password= and nothing happens
• When I click the button, using javascript or manually, it considers that the inputs are empty

So, is there a way to work around this? Either using purely javascript or PowerShell (I wish to keep the IE window invisible)

Thanks!

Answer 1

Even though you are changing the values of the input DOM objects, that is not enough to trigger the change detection of the underlying Angular libraries, thus making the form appear 'empty'.

The following pure JS example works on Chrome, but I have not tested it in Internet Explorer:

let email = document.getElementById("email");
let password = document.getElementById("password");
let button = document.getElementsByTagName("button")[0];

email.value = 'someone@example.com';
password.value = 'yourpassword';

// Trigger change detection
email.dispatchEvent(new Event('input'));
password.dispatchEvent(new Event('input'));

button.click();

In case dispatchEvent does not work in IE, you could try with createEvent and initEvent. See dispatchEvent not working in IE11