I want to test AngularJS application using PhantomJS. First step is to fill login form with username field (let's assume there are no other fields).
Normally (in real browser) this field is controlled by Angular (it has ng-model attribute) and the whole form has ng-submit attribute.

So in PhantomJS script I do

1. input username

   page.evaluate(function () {
       document.getElementsByName('username')[0].value = 'tester';
   });
   

2. take screenshot and see that 'tester' is present in input

   page.render('myfile.jpg');
   

3. click on submit button:

   page.evaluate(function () {
       document.getElementById('go').click();
   });
   

4. take another screenshot.

What I see happens is that button gets clicked, but the message is displayed which says that the value of username is empty. So I guess the model was not properly updated.
I also tried to set these values using jQuery - same result.

How do I correctly input values into fields controlled by angular?

I want to test AngularJS application using PhantomJS. First step is to fill login form with username field (let's assume there are no other fields).
Normally (in real browser) this field is controlled by Angular (it has ng-model attribute) and the whole form has ng-submit attribute.

So in PhantomJS script I do

1. input username

   page.evaluate(function () {
       document.getElementsByName('username')[0].value = 'tester';
   });
   

2. take screenshot and see that 'tester' is present in input

   page.render('myfile.jpg');
   

3. click on submit button:

   page.evaluate(function () {
       document.getElementById('go').click();
   });
   

4. take another screenshot.

What I see happens is that button gets clicked, but the message is displayed which says that the value of username is empty. So I guess the model was not properly updated.
I also tried to set these values using jQuery - same result.

How do I correctly input values into fields controlled by angular?

• javascript
• angularjs
• forms
• testing
• phantomjs

1 Answer 1

PhantomJS provides the sendEvent function which can be used to implement a rudimentary sendKeys, but you need to focus on the element first:

function sendKeys(page, selector, keys){
    page.evaluate(function(selector){
        // focus on the text element before typing
        var element = document.querySelector(selector);
        element.click();
        element.focus();
    }, selector);
    page.sendEvent("keypress", keys);
}
sendKeys(page, "*[name=username]", "tester");

You might want to checkout either protractor which seems to be tailored for Angular.js testing or CasperJS which builds on top of PhantomJS with a much nicer API.