Как использовать CasperJS для заполнения полей ввода AngularJS без тега формы

Я пытаюсь написать сценарий CasperJS, который делает логин на https://frontier.com/login .

У меня проблемы, потому что:

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

1 ответ

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