量角器 - 如何处理大量动画的网站？

Question

我必须为一个有大量动画的 Angular 应用程序网站编写测试。几乎所有东西都有一个“迷你”窗口，它从顶部滑入并进入中心，然后其内容从右侧滑入，直到它们进入，依此类推。

这打破了我的测试，很多。量角器看到元素，因为它们被显示，但它不能点击它们，因为它们正在移动，它会抛出一个错误，指出其他元素将接收点击。这种情况经常发生，我不知道如何处理（除了使用 browser.sleep(xxxx)）。

除了使用睡眠功能之外，还有其他解决方案吗？如果我真的没有其他选择，我必须在第二行使用它...

**我试过这个browser.manage().timeouts().implicitlyWait(30000);，但没有帮助。

附：我也遇到过 Protractor 尝试在元素可见之前点击它的情况。

如果需要，我可以制作一个短视频来展示动画是什么。

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';");
};

可能有更巧妙的方法来应用这个概念，但上面的方法对我有用。