Подтвердить что ты не робот

Как отключить анимацию в транспортирете для приложения angular js

Может кто-нибудь подскажет мне, как отключить анимацию в приложении angular js при выполнении испытаний транспортира. Я добавил код ниже в свой конфигурационный файл транспортира, но это мне не помогает:

var disableNgAnimate = function() {
    angular.module('disableNgAnimate', []).run(function($animate) {
        $animate.enabled(false);
    });
};
browser.addMockModule('disableNgAnimate', disableNgAnimate);
4b9b3361

Ответ 1

Вы можете проверить конфигурацию транспортира angular: https://github.com/angular/angular.js/blob/master/protractor-shared-conf.js

Вы должны добавить его в блок onPrepare:

onPrepare: function() {
/* global angular: false, browser: false, jasmine: false */

// Disable animations so e2e tests run more quickly
var disableNgAnimate = function() {
  angular.module('disableNgAnimate', []).run(['$animate', function($animate) {
    $animate.enabled(false);
  }]);
};

browser.addMockModule('disableNgAnimate', disableNgAnimate);

Ответ 2

Я лично использую следующий код в функции "onPrepare" в файле "conf.js", чтобы отключить анимацию Angular/CSS:

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

    var disableCssAnimate = function() {
        angular
            .module('disableCssAnimate', [])
            .run(function() {
                var style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML = '* {' +
                    '-webkit-transition: none !important;' +
                    '-moz-transition: none !important' +
                    '-o-transition: none !important' +
                    '-ms-transition: none !important' +
                    'transition: none !important' +
                    '}';
                document.getElementsByTagName('head')[0].appendChild(style);
            });
    };

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

Обратите внимание: я не писал выше код, я нашел его онлайн, ища способы ускорить мои собственные тесты.

Ответ 3

Отключение анимации/переходов CSS

В дополнение к отключению ngAnimation (т.е. element(by.css('body')).allowAnimations(false);) вам может потребоваться отключить некоторую анимацию, которая была применена через CSS.

Я обнаружил, что это иногда способствует некоторым таким анимированным элементам, которые могут показаться, что Protractor может быть "clickable" (т.е. EC.elementToBeClickable(btnUiBootstrapModalClose)), чтобы фактически не отвечать на .click() и т.д.

В моем конкретном случае, я страдал от мода ui.bootstrap, который перешел внутрь и наружу, и я не всегда мог надежно нажать свою внутреннюю кнопку "закрыть".

Я обнаружил, что отключить анимацию 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';");
};

Могут быть более легкие способы применения этой концепции, но я обнаружил, что вышеописанное очень хорошо работает для меня - в дополнение к стабилизации тестов они работают быстрее, так как они не ожидают анимации.

Ответ 4

Посмотрите это на примере: https://github.com/angular/protractor/blob/master/spec/basic/elements_spec.js#L123

  it('should export an allowAnimations helper', function() {
    browser.get('index.html#/animation');
    var animationTop = element(by.id('animationTop'));
    var toggledNode = element(by.id('toggledNode')); // animated toggle

    // disable animation
    animationTop.allowAnimations(false);

    // it should toggle without animation now
    element(by.id('checkbox')).click();
  });

Ответ 5

@DavidPisoni Кажется, это на первый взгляд. Тем не менее есть несколько вещей, которые вы можете проверить

  • в Protractor 2.0 вы должны вернуть обещание, если вы что-то делаете с браузером, например, в e2e-common stuff

  • Если вы используете angular -bootstrap, есть места, где они не используют $animate service, а вместо этого применяют анимацию через голый javascript