javascript 使用量角器在非 AngularJS 页面上测试登录
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22239207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use protractor to test login on non-AngularJS page
提问by xrd
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 进行身份验证。我试图找出一种使用量角器和自动化登录测试的方法。我无法弄清楚如何检索非角度字段以及如何管理等待页面加载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 )
});
});
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).
如何正确加载身份验证页面，在字段中输入正确的信息，然后等待重定向回我的 Angularized 应用程序（我可以从那里处理事情）。
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.findInputsbut was thwarted there as well; these seem to be for AngularJS elements, not elements which are not angularized.
我尝试使用调试器跳入这段代码，但对我来说并不直观。当调试器阻塞时，我似乎不是在我的代码里面，而是在 cli.js 里面。如果我点击“c”，那么我的脚本会一直继续执行并失败而不会进一步阻塞。我是否误解了在脚本中使用调试器命令的位置？而且，我希望使用 Chrome 检查器， window.clientSideScripts.findInputs但在那里也受阻了；这些似乎是针对 AngularJS 元素的，而不是没有角度化的元素。
回答by Leo Gallucci
Testing non-angular pages with Protractor can be tricky regarding waiting for stuff.
使用 Protractor 测试非角度页面在等待内容方面可能会很棘手。
I suggest you upgrade Protractor to latest(1.5.0 as of now), use a custom function waitReady()that browser.waitfor elements ready and rewrite your test like below.
我建议您将 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');
});
More details of why waitReadyhere.
更多详情waitReady请看这里。
Note: in the past I've suggested setting a high implicit, e.g.
注意：过去我建议设置一个高隐式，例如
browser.manage().timeouts().implicitlyWait(5000);
That hackallows to you avoid waitReadyand keep using the standard
该黑客允许您避免waitReady并继续使用标准
expect(loginNameInputElm.isPresent()).toBeTruthy();
But has an ugly disadvantage when testing for elements NOTpresent, 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 秒（5000 毫秒），例如在执行时
expect(someNonExistingElm.isPresent()).toBeFalsy();
