如何使用 CasperJS 填写没有表单标签的 AngularJS 输入字段

Question

我正在尝试编写一个在 https://frontier.com/login 登录的 CasperJS 脚本。

我遇到了麻烦，因为：

1. 它使用 AngularJS，所以我似乎无法访问和更改其范围内的值（例如ng-model='login.loginId'）。直接在元素上设置值没有任何效果。

2. 输入字段未用表单元素包装，因此无法使用通常的 fillSelectors() 和 CasperJS

3. casper.exists('input#fid-login-inline-username') 返回 true，但是，casper.sendKeys('input#fid-login-inline-username', 'blah') 给出错误提示 [error] [remote] mouseEvent(): Couldn't find any element matching 'input#fid-login-inline-username' selector

要使用的字段是：

1. input#fid-login-inline-username
2. input#fid-login-inline-password
3. div.login-form-container button.btn-primary - 对于click()

那么，如何将 casper 中的两个输入字段编辑到角度范围内？

这是我尝试过的一个示例：

casper.start('https://frontier.com/login', function() {
  this.echo('waiting for password input field');
  this.waitForSelector("input#fid-login-inline-password");
});

casper.then(function() {
  if (this.exists('input#fid-login-inline-username')) {
    this.echo('username input exists');
  }
  if (this.exists('input#fid-login-inline-password')) {
    this.echo('password input exists');
  }
  this.echo('filling in username and password');
  // these fields are not in a form element, so, use sendKeys to enter text...
  // the above echoes print the fields exist, and then these sendKeys 
  // operations emit an error that the fields don't exist.
  this.sendKeys('input#fid-login-inline-username', 'some@email.com');
  this.sendKeys('input#fid-login-inline-password', 'some-password');
});

casper.then(function() {
  this.echo('clicking login button');
  this.click('div.login-form-container button.btn-primary');
});

Answer 1

我想通了。该应用程序正在为每个 ID 创建两个输入元素。如果我得到第二个，那么我可以设置该值并触发一个事件让 AngularJS 看到它。

function login(un, pw) {
  $($('[ng-model="login.loginId"]')[1]).val(un).trigger('input');
  $($('[ng-model="login.password"]')[1]).val(pw).trigger('input');
};
this.evaluate(login, username, password);