5

I have a task where I need to automate Sign in form authentication. For this example, I'll show you Tiktok authentication form (Mobile interface, not desktop. E-mail and password option)

form screenshot with inactive login button

If I enter text values into the fields programmatically, the Login button won't become active, and if I manually focus on the fields with a mouse click, the value disappears. These are two lines of code I run to put the value in:

let email_input = document.getElementsByName("email")[0];
email_input.value = 'sample@email.com';

I understand it needs to trigger a certain event to assign a value into it's JS model, but I can't figure out how to do it. I have tried sending change or input events onto this text field with no luck using this code:

let email_input = document.getElementsByName("email");
email_input[0].value = 'sample@email.com';

custom_event = new Event('input');
email_input[0].dispatchEvent(custom_event);

// tried also change, textInput like so:
custom_event = new Event('change');
email_input[0].dispatchEvent(custom_event);

But this does not seem to help. So my goal is to put values into both fields Email and Password in the way it will be detected and Log in button would become active.

Any suggestion would be much appreciated

Yuriy P.
  • 111
  • 8
  • Does this answer your question? [Pure Javascript listen to input value change](https://stackoverflow.com/questions/26946235/pure-javascript-listen-to-input-value-change) – goto Aug 17 '20 at 10:41
  • no, since this would require a change to be made on Tiktok side in this case. My goal is to set values of both fields as on 3rd party website, so its values would be detected and Login button would become active. – Yuriy P. Aug 17 '20 at 10:53
  • Can you try `email_input[0].dispatchEvent(new Event('input', { bubbles: true }));` – Liju Aug 17 '20 at 11:09
  • Tried so, did not help, unfortunately. – Yuriy P. Aug 17 '20 at 13:05
  • 2
    I found the solution - injecting this function helped me: `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); }` – Yuriy P. Aug 17 '20 at 14:46

3 Answers3

11

You should first focus needed input element and then execute document.execCommand with insertText command:

let email_input = document.getElementsByName("email");
email_input[0].focus();
document.execCommand('insertText', false, 'sample@email.com');

With this method input\textarea value modification should be captured by all major frameworks including Angular and Vuejs. This modification will be processed by frameworks the same way as if user pressed "Paste" option in browser main menu.

Eugene Mala
  • 1,081
  • 12
  • 25
0

It all depends...

Who/what are you? A normal browser user? A bot? The browser author?

Because code like this is useless...

let email_input = document.getElementsByName("email")[0];

What document are you referring to? Who's document? Did you inject this instruction into the page and executed it?

You're not telling us where you're coming from, but anyway...

If you are the browser author, or you can run JavaScript macros from your browser (ie: the Classic browser) then you can do something like this...

var Z=W.contentWindow.document.querySelectorAll('input[type="password"]');

 if(Z.length>0){ 

   Z[0].value='password123';

   Z=W.contentWindow.document.querySelectorAll('input[type="email"]');

   if(Z.length>0){Z[0].value='email@abc.com';}
 }

To automatically populate such fields, and if you also want you can SubmitButtonID.click() the submit button for as long as the isTrusted property is not tested by the website.

user4723924
  • 1
  • 1
  • Thank you for your answer. I'm injecting Javascript as a browser author. Running this code will populate input values, however, this will only set input values. For example, after running this code Log in button remains inactive, as the page did not get the appropriate event that the values were actually entered. My goal is to reach the same behavior as if I would enter the values manually using keyboard. – Yuriy P. Aug 17 '20 at 11:50
  • See my new post here. – user4723924 Aug 17 '20 at 12:02
0

Continued...

Test if normal (non-custom) submit button exists and click...

  Z=W.contentWindow.document.querySelectorAll('input[type="submit"]');

  if(Z.length>0){

   if(Z[0].hasAttribute('disabled')){Z[0].removeAttribute('disabled');}  <--- Enable it if disabled

   Z[0].click(); <--- automate click

  }
user4723924
  • 1
  • 1
  • The button will become clickable, but will throw an error that no email or password is present. You can see it the form here https://www.tiktok.com/login/phone-or-email/email?lang=en (mobile view) . Not sure if it's written on React or Vue, but it does not take the value directly from the input field, instead, the value is saved to a variable when you type. So setting the value programmatically using elm.value="value"; does not help. – Yuriy P. Aug 17 '20 at 12:16
  • Well then you need to research further to understand EXACTLY how it works to tackle the problem, although I wonder if “Tik-tok” is worth the trouble... :) – user4723924 Aug 17 '20 at 12:23