使用量角器测试非AngularJS页面上的登录

Question

我有一个AngularJS应用，可使用GitHub上的oAuth
SSO进行身份验证。我试图找出一种使用量角器和自动化登录测试的方法。我无法弄清楚如何检索非角度字段以及如何管理页面加载的等待时间browser.driver，我的规范如下所示：

// Create a repository                                                                                                                     
describe('login', function() {

  it('should login', function() {
      // this issues a redirect to GitHub
      browser.driver.get( process.env.HOST + '/auth/github' ) 
      browser.sleep( 4000 ); // Sleep to make sure page loads fully..                                                                      
      // browser.debugger(); // tried to use debugger...                                                                                   
      var login = element( by.id( "login_field" ) );
      login.sendKeys( process.env.USERNAME );
      var password = element( by.id( "password" ) );
      password.sendKeys( process.env.PASSWORD )
  });                                                                                                                                      
});

我这样运行命令：

HOST=http://someserver.com.dev USERNAME=foobar PASSWORD=barfoo protractor config/protractor.conf

如何正确加载身份验证页面，在字段中输入正确的信息，然后等待重定向回到我的Angularized应用程序（我可以从那里处理事情）。

我试图使用调试器跳入此代码，但对我而言这并不直观。当调试器阻塞时，我似乎不在代码中，而是在cli.js中。如果我点击“
c”，那么我的脚本将一直执行直到失败，并且没有进一步阻止。我是否误解了在脚本中的哪里使用debugger命令？而且，我希望可以使用Chrome检查器，
window.clientSideScripts.findInputs但也遭到了挫败。这些似乎是针对AngularJS元素的，而不是未成角度的元素。

Answer 1

使用量角器测试非角度页面对于等待内容可能很棘手。

我建议您将Protractor升级到最新版本（截至目前为1.5.0），使用自定义函数waitReady（）来browser.wait准备就绪的元素，然后像下面那样重写测试。

// TODO: use page objects
var loginNameInputElm = $('#login_field'); // or element(by.id('login_field'))
var passwordInputElm = $('#password'); // same as element(by.id('password'))
var loginBtnElm = $('button[type=submit]');

it('non-angular page so ignore sync and active wait to load', function() {
    browser.ignoreSynchronization = true;
    browser.get(process.env.HOST + '/auth/github');
    expect(loginNameInputElm.waitReady()).toBeTruthy();
    expect(passwordInputElm.waitReady()).toBeTruthy();
});

it('should fill user and password and logins', function() {
    loginNameInputElm.sendKeys(process.env.USERNAME);
    passwordInputElm.sendKeys(process.env.PASSWORD);
    loginBtnElm.click();
});

it('restores ignore sync when switching back to angular pages', function() {
    browser.ignoreSynchronization = false; // restore
    browser.get('/some-angular-page');
});

为什么waitReady 在这里更多细节。

注意：过去我建议设置一个较高的隐式值，例如

browser.manage().timeouts().implicitlyWait(5000);

该 骇客 可让您避免waitReady并继续使用标准

expect(loginNameInputElm.isPresent()).toBeTruthy();

但是当测试 不 存在的元素时（即测试缺少或不可见的元素时）有一个丑陋的缺点，在这种情况下，它将等待5秒（5000毫秒）的叶片，例如

expect(someNonExistingElm.isPresent()).toBeFalsy();