각도 js 애플리케이션을 위해 투영기에서 애니메이션을 비활성화하는 방법

각도 js 애플리케이션을 위해 투영기에서 애니메이션을 비활성화하는 방법

angular js 어플리케이션에서 프로젝터 테스트를 실행하는 동안 애니메이션을 비활성화하는 방법을 제안해 주실 수 있나요?프로젝터 설정 파일에 다음 코드를 추가했지만 도움이 되지 않습니다.

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

https://github.com/angular/angular.js/blob/master/protractor-shared-conf.js에서 앵귤레이터 구성을 확인할 수 있습니다.

onPrepare block 아래에 추가해야 합니다.

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

개인적으로 'conf.js' 파일의 'onPrepare' 함수에 있는 다음 코드를 사용하여 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);
}
...

주의:위의 코드를 작성하지 않았습니다.온라인에서 자신의 테스트 속도를 높이는 방법을 찾고 있었습니다.

CSS 애니메이션/트랜지션 비활성화

ngAnimation 비활성화(즉,element(by.css('body')).allowAnimations(false);CSS를 통해 적용된 일부 애니메이션을 비활성화해야 할 수 있습니다.

저는 이것이 때때로 프로젝터에게 '클릭하기 쉬운' 것처럼 보일 수 있는 그러한 애니메이션 요소에 기여한다는 것을 알게 되었습니다(즉,EC.elementToBeClickable(btnUiBootstrapModalClose)에 실제로 응답하지 않는 경우.click(),기타.

특히 저는 ui.bootstrap modal이 안과 밖으로 전환되어 어려움을 겪었고, 내부 '닫기' 버튼을 항상 확실하게 클릭할 수 없었습니다.

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';");
};

이 컨셉을 적용하는 방법이 좀 더 매끄러운 방법이 있을 수 있지만, 저는 위의 방법이 매우 효과가 있다는 것을 알았습니다.테스트를 안정시킬 뿐만 아니라 애니메이션을 기다리지 않기 때문에 동작도 빨라집니다.

예에 대해서는, 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();
  });

언급URL : https://stackoverflow.com/questions/26584451/how-to-disable-animations-in-protractor-for-angular-js-application