使用量角器在非angularjs页面上测试登录

I have an AngularJS app which authenticates using oAuth SSO at GitHub. I am trying to figure out a way to use protractor and automate the login tests. I cannot figure out how to retrieve a non-angular field and how to manage wait'ing for the page to load with browser.driver, My spec looks like this:

我有一个AngularJS应用，在GitHub上使用oAuth SSO进行认证。我正在尝试找到一种使用量角器并自动执行登录测试的方法。我不知道如何检索一个非角字段，以及如何管理等待页面加载的浏览器。司机，我的规格是这样的:

// 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 )
  });                                                                                                                                      
});

I run the command like this:

我这样运行命令:

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

How can I properly load the authenticate page, enter the correct information into the fields, and then wait for redirection back into my Angularized application (I can handle things from there).

如何正确地加载authenticate页面，将正确的信息输入到字段中，然后等待重定向返回到我的角度化应用程序(我可以从那里处理事情)。

I tried to use the debugger to jump into this code, but it was not intuitive for me. When the debugger blocked, I did not seem to be inside my code, but inside of cli.js. If I hit 'c' then my script continued all the way to execution and failed without blocking further. Am I misunderstanding where to use the debugger command inside my script? And, from the Chrome inspector I hoped to to use window.clientSideScripts.findInputs but was thwarted there as well; these seem to be for AngularJS elements, not elements which are not angularized.

我试图使用调试器来跳转到这段代码，但这对我来说并不直观。当调试器阻塞时，我似乎并没有在代码中，而是在cli.js中。如果我点击了“c”，那么我的脚本就会一直执行下去，并且在没有进一步阻塞的情况下失败了。我是否误解了在我的脚本中使用调试器命令的位置?而且，从Chrome的检查器，我希望使用windows . clientsidescrippts。findinput也在那里遭到挫败;这些似乎是针对AngularJS元素，而不是非非angulalizedelements。

1 个解决方案

#1

Testing non-angular pages with Protractor can be tricky regarding waiting for stuff.

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

I suggest you upgrade Protractor to latest (1.5.0 as of now), use a custom function waitReady() that browser.wait for elements ready and rewrite your test like below.

我建议您将pro拖拉机升级到最新的(现在是1.5.0)，使用一个自定义函数waitReady()浏览器。等待元素准备好，然后像下面这样重写测试。

// 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');
});

More details of why waitReady here.

更多细节在这里等待。

Note: in the past I've suggested setting a high implicit, e.g.

注:过去我曾建议设定一个高的隐含值。

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

That hack allows to you avoid waitReady and keep using the standard

这个技巧可以让你避免等待，并继续使用标准

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

But has an ugly disadvantage when testing for elements NOT present, i.e. when testing for absent or non visible elements in which case it will wait 5 seconds (5000ms) in vane, e.g. when doing

但是在测试不存在的元素时有一个很糟糕的缺点，例如在测试不存在的或不可见的元素时，它将在叶片中等待5秒(5000ms)

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

#1