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

Question

我才刚刚开始使用量角器。

这是我的问题：

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

InvalidElementStateError: invalid element state: Element is not currently interactable and may not be manipulated.

我注意到在页面源代码中，纺车最初有 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();
});

希望对您有所帮助。

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

Protractor - fields present but not visible - Element is not currently interactable and may not be manipulated

javascript

automation

jasmine

angularjs

protractor