Every year, I find myself faced with a tedious task of submitting around 100 rows of data through a cumbersome form on a website. Instead of wasting hours manually inputting the information row by row, I decided to invest my time in writing some JavaScript code to automate the process.
For the past three years, my code has worked flawlessly. However, now that they have switched to an Angular JS application, I am struggling to figure out how to interact with the forms as if they were being filled out by a real person.
Take this Angular form as an example: https://codepen.io/sevilayha/full/xFcdI/
Previously, I could simply set the values of the form elements, simulate clicking on them to trigger a "dirty" state, click submit, and be done. But with Angular apps, this approach no longer seems to be effective:
function setAndClick(selector, value) {
const el = document.querySelector(selector);
el.value = value;
el.click();
}
setAndClick('[name="name"]', 'Happy Robot');
setAndClick('[name="username"]', 'happyrobot');
setAndClick('[name="email"]', '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef878e9f9f96af9d808d809bc18c8082">[email protected]</a>');
Although manually clicking on the fields after they have been filled by the script does trigger a "dirty" state, I have not been able to identify any event (such as change, keyup, keydown, etc.) that can programmatically trigger it.
Do you have any insights or suggestions on how I can successfully fill out and submit a form in an Angular App using plain JavaScript?