用量角器非AngularJS页面上登录测试
我有一个AngularJS应用程序,它验证使用OAuth SSO在GitHub上。我试图想出一个办法使用量角器和自动化登录测试。我无法弄清楚如何检索无棱角领域以及如何管理wait'ing的页面 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 )
});
});
我像这样运行命令:
I run the command like this:
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).
我试图用调试器跳入这个code,但它不是直观的我。当调试器堵塞,我似乎没有成为我的code里面,但cli.js.内如果我打'C',然后我的脚本继续一路执行和失败,没有进一步的阻挡。我误解在哪里使用我的脚本中的调试器命令?而且,从Chrome检查我希望用 window.clientSideScripts.findInputs
,但被挫败有作为;这些似乎是AngularJS的元素,这是不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.findInputs
but was thwarted there as well; these seem to be for AngularJS elements, not elements which are not angularized.
用量角器测试无棱角的页面可能会非常棘手关于等待的东西。
Testing non-angular pages with Protractor can be tricky regarding waiting for stuff.
我建议你升级量角器最新(1.5.0截至目前),使用的custom功能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
这里。
注:在过去,我建议设置一个高隐,例如
Note: in the past I've suggested setting a high implicit, e.g.
browser.manage().timeouts().implicitlyWait(5000);
这的破解的允许你避免 waitReady
并保持使用标准
That hack allows to you avoid waitReady
and keep using the standard
expect(loginNameInputElm.isPresent()).toBeTruthy();
但对于元素的不可以 present,测试时有一个丑陋的缺点,即不存在对或不可见的元素在这种情况下,它会等待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();