使用量角器在非 AngularJS 页面上测试登录 [英] Use protractor to test login on non-AngularJS page

问题描述

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

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:

// 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 应用程序(我可以从那里处理事情).

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).

我尝试使用调试器跳入这段代码，但对我来说并不直观.当调试器阻塞时，我似乎不在我的代码里面，而是在 cli.js 里面.如果我点击c"，那么我的脚本会一直继续执行并失败而不会进一步阻塞.我是否误解了在我的脚本中使用调试器命令的位置?而且，从 Chrome 检查器中，我希望使用 window.clientSideScripts.findInputs ，但在那里也受阻了；这些似乎是针对 AngularJS 元素的，而不是没有角度化的元素.

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.

推荐答案

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

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

我建议您将 Protractor 升级到最新版(截至目前为 1.5.0)，使用 自定义函数waitReady() browser.wait 为元素准备就绪并重写您的测试，如下所示.

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.

// 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 原因的更多详细信息此处.

More details of why waitReady here.

注意:过去我建议设置一个高隐式，例如

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

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

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

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

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

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

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

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

这篇关于使用量角器在非 AngularJS 页面上测试登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！