使用量角器测试非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",那么我的脚本一直继续执行并失败而不会进一步阻塞.我误解了在我的脚本中使用调试器命令的位置吗？而且,我希望使用Chrome检查员, window.clientSideScripts.findInputs但也在那里被挫败; 这些似乎是针对AngularJS元素,而不是非角化的元素.

Answer 1

使用Protractor测试非角度页面在等待内容时可能会非常棘手.

我建议您将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);

该hack允许您避免waitReady并继续使用该标准

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

但是在测试不存在的元素时有一个丑陋的缺点,即在测试不存在或不可见的元素时,在这种情况下它将在叶片中等待5秒(5000ms),例如在做

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