How to web scrape past complex login page using javascript?

Question

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.

I doubt that the site is actively blocking anything... try triggering blur on the inputs, and if not maybe focus *and* blur. — Leroy Stav, Jan 29 '19 at 02:32
Also, I'm wondering... how are you bringing up the page with your javascript? Are you running a snippet? browser extension? — Leroy Stav, Jan 29 '19 at 02:35

score 1 · Accepted Answer · answered Jan 29 '19 at 02:36

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

How to web scrape past complex login page using javascript?

1 Answers1