如何使用CasperJS填写AngularJS输入字段，不带表格标签(How to use CasperJS to fill in AngularJS input fields w/out a form tag)

 我试图编写一个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');
});

I'm trying to write a CasperJS script which does a login at https://frontier.com/login.
 
I'm having trouble because:
 
 
 
it uses AngularJS so it seems I can't access and change the values held in its scope (eg. ng-model='login.loginId'). Setting the values directly on the elements doesn't have any effect.
 
 
the input fields are not wrapped with a form element so using the usual fillSelectors() with CasperJS isn't possible
 
 
casper.exists('input#fid-login-inline-username') returns true, but, casper.sendKeys('input#fid-login-inline-username', 'blah') gives an error saying [error] [remote] mouseEvent(): Couldn't find any element matching 'input#fid-login-inline-username' selector
 
 
The fields to work with are:
 
 
 
input#fid-login-inline-username
 
 
input#fid-login-inline-password
 
 
div.login-form-container button.btn-primary - for click()
 
 
So, how do I edit the two input fields from casper into the angular scope?
 
Here is an example of what I've tried:
 
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');
});

原文：https://stackoverflow.com/questions/41626029