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

我必須爲一個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); 
}

來源

2015-08-19 Darkbound

與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

來源

2015-08-19 14:22:17 alecxe

關閉動畫是最好的方法。 – MBielski

要添加到這一點，請確保您也是css動畫的會計。我不確定是否有辦法可靠地切斷它們，但一定要知道它們在哪裏，並有適當的等待它們。 – user2020347

謝謝你的回覆。不幸的是我不能使用ExpectedConditions，因爲我使用的是TS定義的量角器，但它現在還不支持。即使我能解決這個問題，也不能解決問題，因爲我不得不用browser.leit替換browser.sleep，而且實際上什麼都不會改變。我更新了我的主帖，並添加了我的測試。我想擺脫所有這些'睡覺'。我試圖禁用動畫，但它不起作用 - 我在我的主帖中添加了我在配置文件中使用的代碼。請幫忙！:) – Darkbound

我剛纔說的回答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';"); 
};

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

來源

2015-08-28 06:49:32 JcT

謝謝，但我沒有應用程序的源代碼，我只是測試它。 – Darkbound

如果您無法將任何CSS添加到應用程序的源代碼中，我會懷疑是否可以從量角器內動態添加它;可能在傳遞給'browser.executeScript（...）'調用的函數中做這樣的事情：https：//developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule – JcT

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

回答

相關問題