量角器 - 如何處理大量動畫的網站？

Question

我必須爲一個Angular應用程序的網站編寫測試，並且有大量的動畫。幾乎所有東西都有一個「迷你」窗口，從頂部滑入並進入中心，然後從右側進入內容，直到進入內部等等。

這打破了我的測試，很多。量角器看到的元素，因爲他們顯示，但它不能點擊他們，因爲他們正在移動，它會拋出一個錯誤，說其他元素將收到點擊。這經常發生，我不知道如何處理它（除了使用browser.sleep（xxxx））。

除了使用睡眠功能外，是否有解決方案？如果我真的沒有其他選擇，我必須在第二排上使用它...

**我試過這browser.manage().timeouts().implicitlyWait(30000);並沒有幫助。

P.S.我還有一些情況，在量角器可見之前嘗試點擊元素。

我可以製作一個簡短的視頻，以顯示動畫是否需要。

test.describe('Profile tests: ', function(){ 
this.timeout(0); 

test.before(function(){ 
    browser.get('......'); 
}); 

test.it('Change Username', function() { 
    var newUsername = 'Sumuser'; 

    welcome.continueLink.click(); 
    bonus.takeBonus.isDisplayed().then(function() {     
     bonus.takeBonus.click();    
    }); 
    entrance.openEntrance.click(); 

    browser.sleep(300); 
    loginBasic.openNormalLogin.isDisplayed().then(function() { 
     loginBasic.openNormalLogin.click(); 
    }); 

    browser.sleep(300); 
    login.usernameField.isDisplayed().then(function() { 
     login.usernameField.sendKeys(username); 
    }); 

    login.passwordField.sendKeys(password); 
    login.loginButton.click(); 
    infoBar.avatar.click(); 

    browser.sleep(1000); 
    myProfile.editProfileButton.click(); 

    browser.sleep(1000); 
    username.field.clear(); 
    username.field.sendKeys(newUsername); 
    editProfileButtons.saveChanges.click(); 

    browser.sleep(1000); 
    myProfile.username.getText().then(function (text){ 
     expect(text).to.equal(newUsername); 
    }); 
}); 
}); 

我也試圖加入我的配置文件中的以下禁用動畫：

onPrepare: function() { 
    var disableNgAnimate = function() { 
     angular.module('disableNgAnimate', []).run(['$animate', function($animate) { 
      $animate.enabled(false); 
     }]); 
    }; 

    browser.addMockModule('disableNgAnimate', disableNgAnimate); 
} 

Answer 1

與browser.wait()明確的等待可能使測試更可靠。

例如，等待元素變成可點擊：

var EC = protractor.ExpectedConditions; 
var elm = element(by.css(".myclass")); 

browser.wait(EC.elementToBeClickable(elm), 5000); 

您也可以完全關閉角動畫，請參閱：

• How to disable animations in protractor for angular js application

Answer 2

我剛纔說的回答How to disable animations in protractor for angular js appliction，你可能會覺得有用 - 禁用css轉換。

爲了方便起見，我會在這裏重複重要的代碼。我添加了一個類，像我的樣式之一：

.notransition * { 
    -webkit-transition: none !important; 
    -moz-transition: none !important; 
    -o-transition: none !important; 
    -ms-transition: none !important; 
    transition: none !important; 
} 

...和量角器，我有這樣的：

_self.disableCssAnimations = function() { 
    return browser.executeScript("document.body.className += ' notransition';"); 
}; 

有可能將這一理念的滑頭的方式，但上述爲我工作。