量角器 - 存在但不可见的字段 - 元素当前不可交互并且可能无法操作

Question

我才刚刚开始使用 Protractor。

这是我的问题：

我想登录一个网站。当页面加载时，它会在显示用户名和密码字段以及登录按钮之前显示一个旋转的加载轮。 我的问题是clear() 或sendKeys() 的任何尝试都失败了，因为这些字段在屏幕上尚不可见，并且量角器正在尝试与它们进行交互。

InvalidElementStateError：无效元素状态：元素不是 当前可交互，可能无法操作。

我注意到在页面源中，最初的纺车有class='ngscope'，过了一会儿它变成了class='ng-scope ng-hide'

整件事是这样的：

<div ng-show="Model.Busy" class="ng-scope ng-hide">
    <div ng-class="{'control--inline': small, 'div-centre': !small}" class="div-centre">
    <img ng-src="/assets/img/loading.gif" ng-class="{'very-small-loading': small}" src="/assets/img/loading.gif">
</div>
</div>

我正在使用的代码是：

describe('Testing', function() {
    browser.driver.manage().window().maximize();

  var username = element(by.model('Model.Username'));
  var password = element(by.model('Model.Password'));
  var loginbutton = element(by.css('[ng-click="Model.Logon()"]'));


  beforeEach(function() {
    browser.get('MY WEBSITE');
  });

  it('should log me in', function() {

//  expect($('[ng-show=Model.Busy].ng-hide').isDisplayed()).toBeTruthy();  <-- this fails


    username.clear();
    password.clear()

    username.sendKeys('1');
    password.sendKeys('2');

    loginbutton.click();

  });
});

如何做到这一点？

Answer 1

您必须等到加载动画隐藏，然后尝试使用量角器的内置 wait() 函数处理页面上出现的元素。一种方法是使用presenceOf() 功能等到元素出现。方法如下-

browser.ignoreSynchronization = true; //Its Kendo UI coupled with Angular, so ignore the angular load

//There are 2 login forms with same attributes so using by.model wouldn't work in this case
var username = $('#MainView .form-input[name="txtUsername"]');
var password = $('#MainView .form-input[name="txtPassword"]');
var loginbutton = $('[ng-click="Model.Logon()"]');
var EC = protractor.ExpectedConditions;

browser.wait(EC.visibilityOf(username), 20000).then(function(){
    username.clear().then(function(){
        username.sendKeys('1');
    });
    password.clear().then(function(){
        password.sendKeys('2');
    });
    loginbutton.click();
});

希望对你有帮助。