Question

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

我遇到了麻烦，因为：

它使用AngularJS，因此我似乎无法访问和更改其范围内的值（例如ng-model='login.loginId'）。直接在元素上设置值没有任何效果。
输入字段未使用表单元素包装，因此无法使用通常的fillSelectors()和CasperJS
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

要使用的字段是：

input#fid-login-inline-username
input#fid-login-inline-password
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);

如何使用CasperJS填写表格标签

1 个答案: