使用量角器在非AngularJS頁面上測試登錄頁面

Question

我有一個在GitHub上使用oAuth SSO進行身份驗證的AngularJS應用程序。我正在嘗試找出使用量角器並自動執行登錄測試的方法。我無法弄清楚如何檢索非象角，以及如何管理wait'ing的頁面與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

使用量角器測試非角度頁面對於等待內容可能會非常棘手。

我建議您將量角器升級到latest（1.5.0截至目前），使用custom function 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'); 
}); 

更多細節，爲什麼waitReadyhere的。

注意：在過去，我建議設置一個高隱含的，例如，

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

這破解允許您避免waitReady，並保持使用標準

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

，但有一個醜陋的缺點的缺失或不可見的測試時，測試的內容不存在，即當在這種情況下，它將等待5秒（5000毫秒）的葉片，例如做

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