Como desabilitar animações no transferidor para aplicativo js angular

Alguém pode me sugerir como desabilitar animações no aplicativo js angular durante a execução de testes de transferidor. Eu adicionei abaixo o código no meu arquivo de configuração do transferidor, mas isso não me ajuda:

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

Você pode conferir a configuração do transferidor do angular: https://github.com/angular/angular.js/blob/master/protractor-shared-conf.js

Você deve adicioná-lo no bloco 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); 

Eu pessoalmente uso o seguinte código na function “onPrepare” no meu arquivo ‘conf.js’ para desabilitar ambas as animações 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); } ... 

Por favor, note: eu não escrevi o código acima, achei online enquanto procurava maneiras de acelerar meus próprios testes.

Desativando animações / transições CSS

Além de desabilitar ngAnimation (ou seja, element(by.css('body')).allowAnimations(false); ), você pode precisar desabilitar algumas animações que foram aplicadas através de CSS.

Descobri que isso às vezes contribui para alguns desses elementos animados, que podem parecer ao transferidor ‘clicáveis’ (isto é, EC.elementToBeClickable(btnUiBootstrapModalClose) ), para não responder de fato a .click() , etc.

No meu caso particular, eu estava sofrendo com um modal ui.bootstrap que fazia a transição para dentro e para fora, e eu nem sempre conseguia fazer com que o botão “fechar” interno clicasse com confiança.

Eu achei que a desativação de animações css ajudou. Eu adicionei uma class a uma folha de estilo:

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

… e no transferidor, eu tenho algo como:

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

Pode haver formas mais lisas de aplicar esse conceito, mas descobri que o acima funcionou muito bem para mim – além de estabilizar os testes, eles rodam mais rápido, já que não estão esperando por animações.

Veja isto para um exemplo: 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 à primeira vista. Ainda há algumas coisas que você pode querer finalizar

  • no transferidor 2.0 você deve retornar uma promise se você está fazendo algo com o navegador como no material e2e-common

  • Se você estiver usando bootstrap angular, há lugares onde eles não usam o serviço $ animate, e em vez disso, aplicar as animações através do javascript nu