0

I'm hoping to use javascript within tampermonkey to scrape https://www.intellizoom.com/ so I can be alerted immediately when any new jobs come in for me to accept (jobs can disappear within seconds if not acted on immediately). Unfortunately my login eventually expires, and the website redirects to https://www.intellizoom.com/login.

I therefore want to use a tampermonkey script matching the login URL to automatically log back in when needed.

I'm struggling to get this to work. First of, it seems you have to focus any input fields before they correctly accept any input from javascript. That works for adding the username and password, but just using focus() on the login button fails.

My test script successfully logs in if, before the message "click!" appears in the console, I physically click anywhere in the website page. (Hence the 5 second setTimeout to give me time to physically click - for test purposes). The login button then turns blue, and the .click(); javascript function then successfully submits the login details.

But, I can't find any way to simulate the physical click using javascript, all attempts to use click() on elements or on co-ordinates just does nothing (with no error messages in the console). Adding focus() before click() doesn't help either.

Can anyone figure out how to submit the login details for this website via javascript?

setTimeout(function(){
    document.getElementById("email").focus();
    document.getElementById("email").value = "username@Domain.co.uk";

    document.getElementById("password").focus();
    document.getElementById("password").value = "password";
},500);

setTimeout(function(){
    console.log("click!");
    document.getElementsByClassName("button large primary is-rounded")[0].click();
},3000);

UPDATE: The solution was kindly provided by Markfila - this code works:

setTimeout(function(){
    document.getElementById("email").value = "username@Domain.co.uk";
    document.getElementById("password").value = "password";
    let event = new Event("blur");
    document.getElementById("email").dispatchEvent(event);
    document.getElementById("password").dispatchEvent(event);
    document.getElementsByClassName("button large primary is-rounded")[0].click();
},100);

I've raised a follow up here question (since I'm not supposed to ask follow questions directly in here).

Adrian Wood
  • 59
  • 5
  • 1
    This site is using react. It probably listen for input events on input fields and ignore the actual value – Konrad Dec 05 '22 at 19:16
  • You may need .submit() instead of .click(). But without the full html i cant tell. – markfila Dec 05 '22 at 19:40
  • I tried using submit(); - gives an error: "document.getElementsByClassName(...)[0].submit is not a function". Don't think it uses react - when pulling the innerHTML there is no mention of react. – Adrian Wood Dec 05 '22 at 20:27
  • Konrad - given markfila's help, I think I now see the point you're making - setting .value isn't enough because it is being ignored and possibly reset unless something triggers a blur event to handle the value? But I still wonder why setting focus to the field first and then setting .value works (presumably that doesn't trigger a blur event). – Adrian Wood Dec 06 '22 at 23:15

2 Answers2

2

I dont think you need the focus, there using some kind of third party library for the ui and its not triggering the event that sets the value attribute. After a bit of messing around it looks like the ui library is setting the value on the blur event.

If you add this after setting the value then the login button should enable and the click code you have should work

let event = new Event("blur"); 
document.getElementById("email").dispatchEvent(event); 
document.getElementById("password").dispatchEvent(event);
markfila
  • 440
  • 2
  • 9
  • Perfect - that works. Please see the update to my original question - I'm hoping you'd be willing to explain further, so I can learn more (as a newbie). – Adrian Wood Dec 06 '22 at 15:00
  • Basically to figure it out, when setting the value via javascript i noticed that the value attribute on those fields was blank but was not blank when setting it manually using dev tools inspect html in chrome. Also, the placeholder text was still visible when setting the value via javascript so i figured that they have to be using some kind of ui library. I searched "netflix change input value" since ive seen a similar look and feel login on there site and found this: https://stackoverflow.com/questions/57959345/setting-the-input-value-does-not-permanently-update-the-field. – markfila Dec 06 '22 at 18:59
  • Also, I realized that manually filling in the elements would trigger the blur event on those two elements so I figured that they had to be doing some validation in the blur event handlers to determine if the length of the text in the inputs was greater than 0. – markfila Dec 06 '22 at 19:09
  • Update: I've investigated this in a lot more detail and I've raised a new follow question to try to understand this better. My first follow up questions was closed - it wasn't focused enough and I needed to do more work myself first. See revised link above. – Adrian Wood Dec 06 '22 at 22:16
  • markfila - your explanation is really helpful for my learning, but please still look at my new question if you don't mind. I get a feeling that, when filling in the fields manually, the blur event isn't being used to activate the Log in button (because the button is activated BEFORE exiting the 2nd input field). For learning purposes, I've also found a different way to trigger the blur events (albeit less elegant than your method). – Adrian Wood Dec 06 '22 at 22:22
  • Given that my follow up question has been closed as a duplicate (without giving an answer that I can understand), would anyone be willing to help me with the final question I posed? I've found that manually inputting the username and password activates the 'Log in' button as soon as a valid value is input in both the username and password field - without exiting the 2nd field, despite (presumably) no blur event being triggered! How can that be? – Adrian Wood Dec 06 '22 at 23:05
  • i'll try to look more tomorrow, since its a third party library and i think its minified its hard to tell exactly what there doing without trying to un-minify it and go line by line. – markfila Dec 06 '22 at 23:08
  • It looks like on keydown or on keyup there updating the value attribute and doing the validation, so that is why the login button activates without leaving the password field. You can see this by inspecting the element in dev tools and you can see the value change as you type. – markfila Dec 07 '22 at 13:34
1

It seems like the window isn't focused because if you click the window then it will login and clicking the window focuses it. You could try using var win = window.open("https://www.intellizoom.com/login") then win.focus() to focus the window.

So the whole code would look like this:

var win = window.open("https://www.intellizoom.com/login");
win.focus();
setTimeout(function(){
    document.getElementById("email").focus();
    document.getElementById("email").value = "username@Domain.co.uk";

    document.getElementById("password").focus();
    document.getElementById("password").value = "password";
},500);

setTimeout(function(){
    console.log("click!");
    document.getElementsByClassName("button large primary is-rounded")[0].click();
},3000);

I am not 100% sure about this but by reading your post this is what it made me think. I hope this helps!

iamdeedz
  • 109
  • 8
  • Thanks - I wondered if somehow I needed to focus the window. The code above doesn't work for me because when the window is opened again the script is abandoned and then runs again in a never ending loop - the window keeps re-opening over and over. It never gets a chance to login! – Adrian Wood Dec 05 '22 at 20:46
  • Just tried adding window.focus() before the statement for click(). Didn't work. – Adrian Wood Dec 05 '22 at 20:57