量角器功能测试不更新 ng-model？

Question

所以在我的基本 angular 应用程序中，我有一个登录表单：

<form layout="column" class="form">
  <md-input-container>
    <label for="email" translate>login.email</label>
    <input id="email" type="email" ng-model="login.user.email" />
    <span ng-bind="login.user.email"></span>
  </md-input-container>
  <md-input-container>
    <label for="password" translate>login.password</label>
    <input id="password" type="password" ng-model="login.user.password" />
    <span ng-bind="login.user.password"></span>
  </md-input-container>
  <md-button class="hbd-primary"  ng-click="login.authenticate()" id="submit-button">
    <span translate>login.connection</span>
  </md-button>
</form>

我目前正在用 Protractor 和 jasmine 编写功能测试。这是我的登录测试：

it('should fail login with bogus credentials', function() {
  page.emailInput.clear().then(function() {
    page.emailInput.sendKeys('supermerchant@bogus.com');
  });
  expect(page.emailInput.getAttribute('value')).toBe('supermerchant@bogus.com');
  page.passwordInput.clear().then(function() {
    return page.passwordInput.sendKeys('boguspass');
  })
  .then(function() {
    expect(page.passwordInput.getAttribute('value')).toBe('boguspass');
    return page.submitButton.click();
  })
  .then(function() {
    expect(page.alert.element(by.id("login-alert-text")).getText())
      .toBe('Email ou mot de passe invalide');
  });
});

我的问题是 sendKeys() 方法，即使它正确地写入了电子邮件和密码（视觉上它在输入中），当它触发登录功能时，我注意到请求参数有些奇怪：字段电子邮件和我的对象用户的密码为空，例如“”。但是当我检查输入 'value' 属性时，它被正确填充，例如 "supermerchant@bogus.com" & "boguspass".

所以我搜索了很多，但到目前为止什么也没找到，我不知道问题出在哪里...

任何线索将不胜感激！

编辑：来自控制器和服务的附加代码。

登录控制器

var vm = this;
vm.errors = '';
vm.user = {email: 'a', password: 'a', remember: true};
/**
*
* Log the user in.
*
**/
function authenticate() {
  vm.errors = '';
  retrieveToken(vm.user);
};

/**
*
* Get the jwt token. Change state depending on status.
*
**/
function retrieveToken(user) {
  authService.login(user)
    .success(function(data, status, headers, config) {
      saveToken(data.token);
      $state.go('employee');
    })
    .error(function(data, status, headers, config) {
      vm.errors = 'Email ou mot de passe invalide';
    });
};

/**
*
* Store the authenticated user.
*
**/
function saveToken(dataToken) {
  var token = jwtHelper.decodeToken(dataToken);
  var user = {
    id: token.id,
    firstName: token.firstName,
    lastName: token.lastName,
    roles: token.roles,
    token: dataToken
  };
  authService.setAuthentication(true, user);
};

authService

function auth($injector, constants) {
  var _authenticated = false;
  var _user = null;
  var service = {
    login: login,
    isAuthenticated: isAuth,
    setAuthentication: setAuth,
    getToken: getToken
  };

  /**
  *
  * Get the user authentication jwt.
  *
  **/
  function login(user) {
    return $injector.get('$http')
      .post(constants.baseApiUrl + 'authentication/login', user);
  };

  /**
  *
  * Return a boolean to check if user is connected to app.
  *
  **/
  function isAuth() {
    return _authenticated;
  };

  /**
  *
  * Set the current user authentication.
  *
  **/
  function setAuth(auth, user) {
    if (auth) {
      _authenticated = true;
      _user = user;
    }
    else if (auth === false) {
      _authenticated = false;
      _user = null;
    }
  };

EDIT2：当我将字段 email 和 password 设置为任何内容时，即使使用 clear 和 sendKeys，这些值在验证时也不会改变。但在视觉上，输入被正确清除和填充。所以我怀疑这个问题是一个数据绑定问题。也许双向绑定在某种程度上被破坏了。

EDIT3：好的，所以在每个输入下我都添加了一个带有 ng-绑定到电子邮件和密码模型的跨度。当使用 sendKeys 和 clear 时，跨度值不会改变（例如 'a'）。所以有一个数据绑定问题！当我从输入中手动删除一个字符时值发生变化。

Answer 1

在我们的测试中，我们使用 clear 和 sendKeys，但在不同的调用中。

所以对于你的情况，尝试：

page.emailInput.clear();
page.emailInput.sendKeys('supermerchant@bogus.com');

另一种方法 - Protractor clear() not working

Answer 2

经过数小时的努力，我找到了解决方案。

在启动功能测试时，我正在使用浏览器同步并打开另一个浏览器来检查是否一切正常。

某种程度上，在使用浏览器同步选项 open: false 并让 phantomjs 完成它之后，一切正常。不确定为什么会出现问题，但现在已解决！

量角器功能测试不更新 ng-model？

Protractor functional test does not update ng-model?

phantomjs

angularjs

protractor

jasmine2.0

angular-material