Cómo deshabilitar las animaciones en el transportador para la aplicación angular js

¿Alguien puede sugerirme cómo desactivar animaciones en la aplicación angular js mientras se ejecutan pruebas de transportador? He agregado el código a continuación en mi archivo de configuración del transportador pero eso no me ayuda:

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

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

Debe agregarlo en el bloque de Preparar:

 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); 

Personalmente uso el siguiente código en la función “onPrepare” en mi archivo ‘conf.js’ para deshabilitar las animaciones angulares / 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 la forma de acelerar mis propias pruebas.

Deshabilitar animaciones / transiciones CSS

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

He encontrado que esto a veces contribuye a algunos de esos elementos animados, que pueden parecer a EC.elementToBeClickable(btnUiBootstrapModalClose) ” (es decir, EC.elementToBeClickable(btnUiBootstrapModalClose) ), para no responder realmente a .click() , etc.

En mi caso particular, sufría con un modal ui.bootstrap que hacía la transición de entrada y salida, y no siempre podía hacer clic en el botón de “cerrar” interno.

Descubrí que la desactivación de animaciones css me 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 así como:

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

Puede haber formas más simples de aplicar este concepto, pero descubrí que lo anterior funcionó muy bien para mí: además de estabilizar las pruebas, funcionan más rápido ya que no están esperando las animaciones.

Vea esto para 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(); }); 

@DavidPisoni Parece válido a primera vista. Todavía hay un par de cosas que es posible que desee pagar

  • en Protractor 2.0 deberías devolver una promesa si estás haciendo algo con un navegador como en las cosas comunes de e2e

  • Si está utilizando bootstrap angular hay lugares donde no usan el servicio $ animate, y en su lugar aplicando las animaciones a través de un simple javascript