Looking to test an AngularJS application using PhantomJS? The first step is to fill in the login form with the username field, assuming there are no other fields involved.
Typically, in a real browser, this field is managed by Angular (with the ng-model attribute) and the entire form has an ng-submit attribute.
In the PhantomJS script, follow these steps:
Input username
page.evaluate(function () { document.getElementsByName('username')[0].value = 'tester'; });Capture a screenshot to confirm 'tester' is present in the input
page.render('myfile.jpg');Click on the submit button:
page.evaluate(function () { document.getElementById('go').click(); });Take another screenshot.
When executing these steps, you may notice that although the button gets clicked, there is a message displaying that the value of username is empty. This indicates that the model was not properly updated.
Even trying to set values using jQuery may yield the same result.
Wondering how to correctly input values into fields controlled by Angular?