使用PhantomJS在Angular.js应用程序中填写表单

Question

我想使用PhantomJS测试AngularJS应用程序.第一步是用username字段填写登录表单(假设没有其他字段).
通常(在实际浏览器中)此字段由Angular控制(它具有ng-model属性),整个表单具有ng-submit属性.

所以在PhantomJS脚本中我做了

1. 输入用户名

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

2. 截取屏幕截图,看看输入中是否存在'tester'

   page.render('myfile.jpg');
   

3. 点击提交按钮:

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

4. 再拍一张截图.

我看到的是点击按钮,但会显示消息,表示值为username空.所以我猜模型没有正确更新.
我也尝试使用jQuery设置这些值 - 结果相同.

如何正确地将值输入到由angular控制的字段中？

Answer 1

PhantomJS提供了sendEvent可用于实现基本功能的功能sendKeys,但您需要首先关注元素:

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");

你可能想签要么量角器这似乎为Angular.js测试或进行调整CasperJS它建立在一个更加美好API PhantomJS的顶部.