web-dev-qa-db-fra.com

Comment désactiver les animations dans le rapporteur pour angular js

Quelqu'un peut-il me suggérer comment désactiver les animations dans l'application angular js lors de l'exécution des tests du rapporteur. J'ai ajouté ci-dessous du code dans mon fichier de configuration du rapporteur mais cela ne m'aide pas:

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

Vous pouvez vérifier la configuration du rapporteur de l'angulaire: https://github.com/angular/angular.js/blob/master/protractor-shared-conf.js

Vous devez l'ajouter sous le bloc 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);
32
bugdayci

J'utilise personnellement le code suivant dans la fonction "onPrepare" de mon fichier "conf.js" pour désactiver les deux animations angulaires/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);
}
...

Attention: je n'ai pas écrit le code ci-dessus, je l'ai trouvé en ligne en cherchant des moyens d'accélérer mes propres tests.

20
John Stennett

Désactivation des animations/transitions CSS

En plus de désactiver ngAnimation (c'est-à-dire element(by.css('body')).allowAnimations(false);), vous devrez peut-être désactiver certaines animations qui ont été appliquées via CSS.

J'ai trouvé que cela contribue parfois à certains de ces éléments animés, qui peuvent apparaître à Protractor comme "cliquables" (c'est-à-dire EC.elementToBeClickable(btnUiBootstrapModalClose)), pour ne pas répondre réellement à .click(), etc.

Dans mon cas particulier, je souffrais d'un modal ui.bootstrap qui faisait la transition vers l'intérieur et vers l'extérieur, et je n'étais pas toujours en mesure d'obtenir son bouton de fermeture interne de manière fiable.

J'ai trouvé que désactivation des animations CSS aidé. J'ai ajouté une classe à une feuille de style:

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

... et en rapporteur, j'ai quelque chose comme:

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

Il y a peut-être des façons plus astucieuses d'appliquer ce concept, mais j'ai trouvé que ce qui précède fonctionnait très bien pour moi - en plus de stabiliser les tests, ils fonctionnent plus rapidement car ils n'attendent pas d'animations.

9
JcT

Voir ceci pour un exemple: https://github.com/angular/protractor/blob/master/spec/basic/elements_spec.js#L12

  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();
  });
2
hankduan