angularjs - Cómo deshabilitar animaciones en transportador para la aplicación angular js

ng-href angular 4

Question

¿Alguien puede sugerirme cómo deshabilitar las animaciones en la aplicación angular js al ejecutar pruebas de transportador? He agregado el siguiente código en mi archivo de configuración de transportador, pero eso no me ayuda:

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

Answer 1

Deshabilitar las animaciones / transiciones CSS

Además de deshabilitar ngAnimation (es decir, element(by.css(''body'')).allowAnimations(false); ), es posible que deba deshabilitar alguna animación que se haya aplicado a través de CSS.

He descubierto que esto a veces contribuye a algunos de estos elementos animados, que pueden parecerle a Protractor ''clickable'' (es decir, EC.elementToBeClickable(btnUiBootstrapModalClose) ), para no responder realmente a .click() , etc.

En mi caso particular, estaba sufriendo con un modo ui.bootstrap que hacía la transición de entrada y salida, y no siempre podía hacer clic confiablemente en su botón interno ''cerrar''.

Encontré que deshabilitar las animaciones CSS ayudó. Agregué una clase a una hoja de estilo:

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

... y en transportador, tengo algo como:

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

Puede haber formas más ingeniosas de aplicar este concepto, pero descubrí que lo anterior funcionó muy bien para mí: además de estabilizar las pruebas, se ejecutan más rápido ya que no esperan animaciones.

Answer 2

@DavidPisoni Parece válido a primera vista. Aún así, hay un par de cosas que tal vez quieras revisar

• en Protractor 2.0 debe devolver una promesa si está haciendo algo con el navegador como en las cosas comunes de e2e

• Si está utilizando angular-bootstrap, hay lugares donde no utilizan el servicio $ animate y, en su lugar, aplica las animaciones a través de JavaScript simple

Answer 3

Puede consultar la configuración del transportador angular: https://github.com/angular/angular.js/blob/master/protractor-shared-conf.js

Debe agregarlo en el bloque 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);

Answer 4

Vea esto para ver un ejemplo: 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();
  });

Answer 5

Yo personalmente uso el siguiente código en la función "onPrepare" en mi archivo ''conf.js'' para deshabilitar ambas animaciones 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);
}
...

Tenga en cuenta: no escribí el código anterior, lo encontré en línea mientras buscaba formas de acelerar mis propias pruebas.