I am trying to using javascript to login to a webpage, however, the page gives an error saying "username/password field is empty" even though the text is clearly inputed. Here is how I enter the username/password using javascript.
document.getElementById('username').value='TestUsername';
document.getElementById('password').value='TestPassword';
I believe the page is using angularJS to block the javascript input from being recognized. If I manually in browser backspace one character, the text is recognized. Chrome/Safari/Opera autofill are able to get around this, however mobile safari has issues occasionally.
How can I, using javascript, make it so the text being inputted is recognized by the webpage?
Another note, the HTML class of elements such as the username, password,
form, and submit button all change class when text is recognized from something like "ng-touched ng-dirty ng-invalid" to "ng-touched ng-dirty ng-valid". I have tried using javascript to change the className, however the text still isn't recognized.
After setting the input values, try to fire the "input" event, like so:
var element = document.getElementById('username');
element.value='TestUsername';
var event = new Event('input', {
'bubbles': true,
'cancelable': true
});
element.dispatchEvent(event);
Event input is the way from where Angular knows that some changes occurs and it must run digest loop
Related
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)
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
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.
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.
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
}
I like to fill out some forms in webpages automatically.
E.g. https://www.dropbox.com .
My problem:
The value is set but not used when sending the form.
Only if I use a real keypress the values are accepted and send.
Is that a kind to bot protection?
I am writting a Firefox Plugin that fills in my username and password.
In the picture you can see, using the script the values is in the background, the fieldname is still shown to me whereas using a real key press will enter the data correctly and allows to submit the input.
Thanks in Advance!
Minimal Code: https://pastebin.com/7TZyKaMM
Key press code seems to be equal to real key press but does not influance element value whereas val('123') updates the value but does not sending a keypress.
It is still not working :-(
The goal is: entering a text as value using key press simulation.
It seems to be the answer:
// set value
$(elSource).val('123');
$(elSource).change();
// fire event
var event = new Event('input', {
bubbles: true,
cancelable: true,
});
elSource.dispatchEvent(event);
https://pastebin.com/v1BmyGsE
Hello and thanks for reading.
So I am trying to automatically log into this form using Chrome.
https://app.patientaccess.com/login
I use my own Chrome extension to do this. It's basically just a javascript file that fills in the fields automatically. I use it for a range of websites.
For example, this is my function for filling in a textbox:
function fld(param, val){try{document.querySelectorAll(param)[0].value = val} catch(e){}}
And I call it like this:
fld("input[id='loginForm-email']", "mail#myemail.com")
For most websites it works. But for the Patient Access website above, it doesn't and I think the reason is because the password textbox requires a physical keypress (or listening for a change event or something).
When I run my script, it fills in the textboxes just fine but it doesn't let me click next because, even though the textboxes appear to be filled in, the webpage knows that I haven't actually pressed any keys.
To get around it, I have to have my script fill in the form, then click in the password box, press space, delete the space I just entered and then it lets me sign in because it knows I have physically pressed a key in the password box.
So my question is how can I make my automatic sign in javascript work on this website?
I don't think a script can use keypress events to type into a textbox but that's ok because I can fill in the textbox programmatically (using the fld function above). But how can I convince the page that I have typed into the password textbox so it lets me submit the form?
I am using JavaScript as I said and I can include jQuery if needed.
Thanks.
After much trial and error, I was able to solve it with JavaScript using this:
var fireOnThis = document.querySelectorAll("[type='text']")[0]
const changeEvent = new Event('input', { bubbles: true, cancelable: true });
fireOnThis.dispatchEvent(changeEvent);
It works absolutely beautifully. I turned this into a function and all I do is run this function after automatically filling in the text field (it doesn't work before filling in the field, has to be after).
I tried many other solutions on other websites and none worked but this one does. Whee!
I got the concept from a Chrome Extension called Form Filler. I tried the extension on the form I was trying to automate and to my surprise, it filled in the form without issue. So I looked at the source code to find out how it did it and I found this:
['input', 'click', 'change', 'blur'].forEach(event => {
const changeEvent = new Event(event, { bubbles: true, cancelable: true });
element.dispatchEvent(changeEvent);
});
So I just converted that into the code in my answer and it worked a treat. So credit should really go to Hussein Shabbir, the developer of Form Filler.
Is it somehow possible to refocus an input field after a refresh which was last focused before the page was requested?
I have a Wicket Form within my WebPage and in this Form there are quite some input fields (like text fields) the user can use to filter my data view. But when the user for example has the focus on the second input field and then clicks on 'go to next page' within the data view he loses the focus, but due to accessibility it is necessary to refocus the second input field.
My idea was to first tag the input field with jQuery with "regain-focus" when focused:
$("input").focus(function() {
$("input").removeAttr("regain-focus");
$(this).attr("regain-focus", "regain-focus");
});
Then on server update search for the element with the "regain-focus" tag - but that's the part, I don't know how to do that... - tag the corresponding component with "autofocus":
input.add(AttributeModifier.append("autofocus", "autofocus"));
and refocus with javascript:
$('[autofocus]').focus();
Since you have JavaScript experience it would be much simpler to do it completely client side: $(document).on('focusin', 'input textarea', function(event) {localStorage.setItem('focus:'+location.pathname, event.target.id)}) and then use jQuery.ready() based logic to read the entry and use it.
When your page DOM/elements change between requests/refresh/ajax calls, it is better to use a CSS selector using optimal-select to store just a unique identifier for the element and use a JQuery selector to find it again for focus setting. I used this in the NoWicket web framework to remember the focused element on ajax calls. Example JS code here.
I open telegram with PhantomJS and try to fill phone number input with evaluate page like below:
page.evaluate(function(){
$("input[name='phone_number']").val("123456789");
});
When PhantomJS clicks on next button with jQuery the alert massage says:
"tel input is empty"
but when the page is rendered we can see numbers in the input field. How can I fill this input?
The problem is probably that the web app has some event listeners on that field, but they are not called when you change the value directly. You can try to trigger some of those events with jQuery.
For example:
$("input[name='phone_number']").blur();
or
$("input[name='phone_number']").change();
I found that this doesn't necessarily work. You can try to use the native keypress events in PhantomJS like this:
page.evaluate(function() {
document.querySelector("input[name='phone_number']").focus();
});
page.sendEvent("keypress", "123456789");
page.sendEvent() sends the given keys to the focussed input field. That's why you need to focus to the intended field beforehand.