如何使用 CasperJS 填写 AngularJS 输入字段 w/out 表单标签

Question

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

我遇到问题是因为：

它使用 AngularJS 所以我似乎无法访问和更改其范围内的值（例如 ng-model='login.loginId'）。直接在元素上设置值没有任何效果。
输入字段未用表单元素包装，因此无法使用通常的 fillSelectors() 和 CasperJS
casper.exists('input#fid-login-inline-username') returns 是的，但是，casper.sendKeys('input#fid-login-inline-username', 'blah') 给出一个错误说 [error] [remote] mouseEvent(): Couldn't find any element matching 'input#fid-login-inline-username' selector

要使用的字段是：

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

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

这是我尝试过的示例：

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

如何使用 CasperJS 填写 AngularJS 输入字段 w/out 表单标签

How to use CasperJS to fill in AngularJS input fields w/out a form tag

angularjs

casperjs