Protractor: 앱이 ngUpgrade로 부트스트랩될 때 각도기가 실패함

이 업그레이드 코드를 다음과 같이 래핑하여 유사한 문제가 해결되었습니다.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app.module';

angular.element(document).ready(() => {
  platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, ['myapp'], {strictDi: true});
  });
});

그리고 구성에서 나는 그 중 어느 것도 사용

//ng12Hybrid: true,
//useAllAngular2AppRoots: true,
//rootElement: 'body',

https://github.com/angular/protractor/issues/4234를 살펴보고 동일한 문제가 있는지 확인할 수 있습니까? 또한 ngUpgrade에서 $interval 는 이제 이전에 없었던 각도기를 차단하지만(https://github.com/angular/angular/issues/16349), 저는 그 작업을 하고 있습니다.

@Evilweed - 제안해 주셔서 감사합니다. 불행히도 해결되지 않는 것 같습니다.

@heathkit - 전체 프로젝트를 검색하여 하나의 장기 실행 $interval을 찾았지만 제거한 후에도 문제가 지속됩니다. 또한 전체 앱에서 $interval 또는 $timeout의 모든 사용법을 주석 처리했지만 여전히 동일한 오류로 실패합니다. 비동기 문제인 경우 차단할 수 있는 항목을 디버그하고 찾을 수 있는 방법이 있는지 알고 있습니까?

전체 오류를 게시할 수 있습니까? 오류 메시지에 보류 중인 작업이 무엇인지 표시해야 하지만 일부가 누락되었을 수 있습니다. 예를 들어, 오류는 아직 Angular 측에서 보류 중인 작업을 표시하지 않습니다. 앱의 Angular 부분에서 오래 실행되는 비동기 작업이 있는 경우 각도기를 차단하지 않도록 Angular 영역 외부에서 작업을 실행해야 합니다. (https://github.com/angular/protractor/blob/master/docs/timeouts.md 참조)

답장해주셔서 다시 한번 감사드립니다. 오류 세부 정보는 아래에 있습니다. 몇 가지 참고 사항:

• 내 테스트 파일에는 beforeAll 블록이 있습니다. 이 블록은 로그인을 위해 사용자 이름과 암호 필드를 채우도록 되어 있습니다. 사용자 이름 필드를 성공적으로 채우지만 waitForAngular 에서 시간 초과되고 암호 필드를 채우지 않습니다. 이것이 오류의 전반부인 것 같습니다. 후반부는 실제 실패한 테스트입니다(로그인에 실패하여 요소가 존재하지 않기 때문에 의미가 있음).

• 이 오류는 문제가 HTTP 호출에서 비롯된 것일 수 있음을 암시하므로 $interval 또는 $timeout이 아닐 수 있습니다.

• 나는 현재 Angular에 대해 별로 가지고 있지 않으며, 거의 대부분이 여전히 AngularJS입니다. 그것은 로그인을 관리하지 않기 때문에 새로운 Angular 구성 요소를 표시하는 것만큼 멀리 가지 않습니다 (따라서 http 호출이 Angular 4 구성 요소와 관련이 있는지 의심됩니다)

  Message:
    Failed: Timed out waiting for asynchronous Angular tasks to finish after 11 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular
    While waiting for element with locator - Locator: By(css selector, *[name="password"])
  Stack:
    ScriptTimeoutError: asynchronous script timeout: result was not received in 11 seconds
      (Session info: chrome=58.0.3029.110)
      (Driver info: chromedriver=2.29.461585,platform=Mac OS X 10.12.4 x86_64) (WARNING: The server did not provide any stacktrace information)
    Command duration or timeout: 11.07 seconds
    Build info: version: '3.4.0', revision: 'unknown', time: 'unknown'
    System info: host: 'Matt.lan', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.12.4', java.version: '1.8.0_111'
    Driver info: org.openqa.selenium.chrome.ChromeDriver
    Capabilities [{applicationCacheEnabled=false, rotatable=false, mobileEmulationEnabled=false, networkConnectionEnabled=false, chrome={chromedriverVersion=2.29.461585, takesHeapSnapshot=true, pageLoadStrategy=normal, databaseEnabled=false, handlesAlerts=true, hasTouchScreen=false, version=58.0.3029.110, platform=MAC, browserConnectionEnabled=false, nativeEvents=true, acceptSslCerts=true, locationContextEnabled=true, webStorageEnabled=true, browserName=chrome, takesScreenshot=true, javascriptEnabled=true, cssSelectorsEnabled=true, unexpectedAlertBehaviour=}]
    Session ID: 40deafceb49b72b1c0188ad0895c1179
        at Object.checkLegacyResponse (/Users/matt/web-app/node_modules/selenium-webdriver/lib/error.js:505:15)
        at parseHttpResponse (/Users/matt/web-app/node_modules/selenium-webdriver/lib/http.js:509:13)
        at doSend.then.response (/Users/matt/web-app/node_modules/selenium-webdriver/lib/http.js:440:13)
        at process._tickCallback (internal/process/next_tick.js:109:7)
    From: Task: Protractor.waitForAngular() - Locator: By(css selector, *[name="password"])
        at thenableWebDriverProxy.schedule (/Users/matt/web-app/node_modules/selenium-webdriver/lib/webdriver.js:816:17)
        at ProtractorBrowser.executeAsyncScript_ (/Users/matt/web-app/node_modules/protractor/lib/browser.ts:608:24)
        at angularAppRoot.then (/Users/matt/web-app/node_modules/protractor/lib/browser.ts:642:23)
        at ManagedPromise.invokeCallback_ (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:1366:14)
        at TaskQueue.execute_ (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:2970:14)
        at TaskQueue.executeNext_ (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:2953:27)
        at asyncRun (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:2813:27)
        at /Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:676:7
        at process._tickCallback (internal/process/next_tick.js:109:7)Error
        at ElementArrayFinder.applyAction_ (/Users/matt/web-app/node_modules/protractor/lib/element.ts:482:23)
        at ElementArrayFinder.(anonymous function).args [as sendKeys] (/Users/matt/web-app/node_modules/protractor/lib/element.ts:96:21)
        at ElementFinder.(anonymous function).args [as sendKeys] (/Users/matt/web-app/node_modules/protractor/lib/element.ts:873:14)
        at /Users/matt/web-app/e2e-tests/modules/authentication.js:83:38
        at ManagedPromise.invokeCallback_ (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:1366:14)
        at TaskQueue.execute_ (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:2970:14)
        at TaskQueue.executeNext_ (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:2953:27)
        at asyncRun (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:2813:27)
        at /Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:676:7
        at process._tickCallback (internal/process/next_tick.js:109:7)
    From: Task: Run beforeAll in control flow
        at Object.<anonymous> (/Users/matt/web-app/node_modules/jasminewd2/index.js:94:19)
    From asynchronous test: 
    Error
        at Suite.<anonymous> (/Users/matt/web-app/e2e-tests/specs/home/asset.spec.js:28:3)
        at Object.<anonymous> (/Users/matt/web-app/e2e-tests/specs/home/asset.spec.js:7:1)
        at Module._compile (module.js:571:32)
        at Object.Module._extensions..js (module.js:580:10)
        at Module.load (module.js:488:32)
        at tryModuleLoad (module.js:447:12)
  Message:
    Failed: No element found using locator: By(css selector, .toggle-asset-summary-button)
  Stack:
    NoSuchElementError: No element found using locator: By(css selector, .toggle-asset-summary-button)
        at elementArrayFinder.getWebElements.then (/Users/matt/web-app/node_modules/protractor/lib/element.ts:851:17)
        at ManagedPromise.invokeCallback_ (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:1366:14)
        at TaskQueue.execute_ (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:2970:14)
        at TaskQueue.executeNext_ (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:2953:27)
        at asyncRun (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:2813:27)
        at /Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:676:7
        at process._tickCallback (internal/process/next_tick.js:109:7)Error
        at ElementArrayFinder.applyAction_ (/Users/matt/web-app/node_modules/protractor/lib/element.ts:482:23)
        at ElementArrayFinder.(anonymous function).args [as click] (/Users/matt/web-app/node_modules/protractor/lib/element.ts:96:21)
        at ElementFinder.(anonymous function).args [as click] (/Users/matt/web-app/node_modules/protractor/lib/element.ts:873:14)
        at Page.showAssetSummaryComponent (/Users/matt/web-app/e2e-tests/specs/home/page-object.js:289:31)
        at Object.<anonymous> (/Users/matt/web-app/e2e-tests/specs/home/asset.spec.js:63:12)
        at /Users/matt/web-app/node_modules/jasminewd2/index.js:112:25
        at new ManagedPromise (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:1067:7)
        at ControlFlow.promise (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:2396:12)
        at schedulerExecute (/Users/matt/web-app/node_modules/jasminewd2/index.js:95:18)
        at TaskQueue.execute_ (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:2970:14)
    From: Task: Run fit("should open asset summary component") in control flow
        at Object.<anonymous> (/Users/matt/web-app/node_modules/jasminewd2/index.js:94:19)
        at /Users/matt/web-app/node_modules/jasminewd2/index.js:64:48
        at ControlFlow.emit (/Users/matt/web-app/node_modules/selenium-webdriver/lib/events.js:62:21)
        at ControlFlow.shutdown_ (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:2565:10)
        at shutdownTask_.MicroTask (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:2490:53)
        at MicroTask.asyncRun (/Users/matt/web-app/node_modules/selenium-webdriver/lib/promise.js:2619:9)
    From asynchronous test: 
    Error
        at Suite.<anonymous> (/Users/matt/web-app/e2e-tests/specs/home/asset.spec.js:62:5)
        at Suite.<anonymous> (/Users/matt/web-app/e2e-tests/specs/home/asset.spec.js:60:3)
        at Object.<anonymous> (/Users/matt/web-app/e2e-tests/specs/home/asset.spec.js:7:1)

완전히 똑같습니다. 새로운 '빠른 시작' angular4 구성과 매우 기본적인 각도기 테스트가 있습니다. 모든 것이 비 하이브리드 모드에서 잘 작동합니다.

Failed: Timed out waiting for asynchronous Angular tasks to finish after 50 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular
    While waiting for element with locator - Locator: By(css selector, #loginModal h4)

이 문제가 계속 표시됩니다.
사용: @angular/upgrade 4.2.2
테스트 가능성 API를 안정적으로 유지하기 위해 @heathkit (https://github.com/angular/angular/pull/16836)의 수정 사항이 포함되어 있지만 여전히 작동하지 않는 것 같습니다.

누군가 문제를 보여주는 리포지토리를 공유할 수 있다면 더 자세히 살펴보겠습니다.

지금까지 내가 발견한 것

파기 후 나는 내가보고있는 시간 초과의 원인 중 하나를 발견했습니다 (또는 그 중 하나는 유일한 것이 아니라고 생각합니다). 내가 사용하고 있는 종속성 중 하나가 window.setTimeout() 를 호출하여 각도기가 동기화되지 않도록 하는 것으로 나타났습니다(제 경우에는
각 모멘트 .

내 앱이 AngularJS만 실행 중일 때는 제대로 실행되었지만 하이브리드 앱으로 부트스트랩할 때 시간 초과 문제가 발생합니다(아마도 영역에서 실행되는 방식 때문에).

예시 리포지토리

https://github.com/mattwilson1024/angular-hybrid 에서 예제 리포지토리를 만들었습니다. 다음 부분으로 구성된 하이브리드(NgUpgrade) 앱입니다.

• 가장 바깥쪽 페이지(CharactersPage)는 AngularJS(1.6)에서 제공합니다.
• 이 페이지에는 다운그레이드된 Angular(4) 구성 요소인 CharacterListComponent가 포함되어 있습니다.
• CharacterListComponent는 다른 Angular 4 구성 요소인 CharacterDetail 구성 요소를 사용합니다.

마스터 브랜치 는 작동하는 앱과 문제 없이 통과하는 단일 각도기 테스트를 포함합니다.

angular-moment 분기 는 angular-moment 라이브러리에 대한 종속성을 추가하고 am-time-ago 지시문을 사용하여 첫 번째 에피소드 이후 몇 년 전인지 보여주는 레이블을 페이지에 추가합니다. 앱 자체는 잘 실행되지만 각도기 테스트는 이제 동기화되지 않습니다.

시간 초과

이것이 일어나고 있는지 확인하기 위해 다음과 같은 결과와 함께 AngularJS 컨트롤러에 다양한 종류의 시간 초과를 추가하려고 시도했습니다. 이것은 $interval이 작동하지만 $timeout, setInterval 또는 setTimeout이 작동하지 않음을 확인했습니다.

function sayHello() { console.log('Hello, world'); }

$interval(sayHello, 30000); // Succeeds (with Angular 4.2.0 and later - see https://github.com/angular/angular/pull/16836)
$timeout(sayHello, 30000); // Fails - Timed out waiting for asynchronous Angular tasks to finish after 11 seconds
setInterval(sayHello, 30000); // Fails - Timed out waiting for asynchronous Angular tasks to finish after 11 seconds
setTimeout(sayHello, 300000); // Fails - Timed out waiting for asynchronous Angular tasks to finish after 11 seconds

다음 단계

무슨 일이 일어나고 있는지 추적해 보았지만 여전히 해결책이 무엇인지 확신할 수 없습니다. 영역 등을 삽입할 TypeScript 클래스가 없는 AngularJS 세그먼트에서 이 작업을 수행하는 방법을 잘 모르겠지만 "Angular 영역 외부"에서 특정 코드를 실행해야 할 수도 있다는 것을 이해합니다.

그럼에도 불구하고 문제 코드가 타사 라이브러리 내부에서 발생하는 경우(angular-moment의 경우와 같이) - 이 문제를 해결하기 위한 접근 방식은 하이브리드 설정?

영역은 창에 설정되어 있으므로 NgZone을 주입할 필요가 없습니다. 다음과 같이 AngularJS의 Angular 영역 외부에서 실행할 수 있습니다.

if (Zone && Zone.current.name === 'angular') {
  let angularZone = Zone.current;
  Zone.parent.run(() => {
    $timeout(() => {
       // Stuff here is run outside the Angular zone and will not be change detected
       angularZone.run(() => {
         // Inside the zone and will be change detected.
       });
    }, 500);
  });
}

타사 코드에서도 setTimeout 또는 setInterval을 사용하면 각도기 안정성이 차단되고 시간 초과가 발생할 수 있습니다. Protractor가 시간 초과한 비동기 작업이 어디에서 왔는지 보여줌으로써 이러한 문제를 더 쉽게 디버그할 수 있도록 Angular 및 AngularJS에 작업 추적을 추가하고 있습니다. 현실적으로, 우리가 그것을 각도기로 가져올 수 있기까지는 몇 달이 걸릴 것입니다.

Angular-moment가 진행되는 한 가장 좋은 방법은 위에 표시된 것처럼 영역을 인식하도록 PR을 제출하는 것입니다. 그렇지 않으면 waitForAngular 선택적으로 끄고 browser.wait 및 ExpectedConditions를 대신 사용할 수 있습니다. 기다리는 작업을 제어할 수 있는 보다 유연한 waitForAngular API를 개발 중이지만 아직 멀었습니다.

우리 상황에서 테스트는 일반(Angular 동기화 없이) 방식으로 작성할 수 있지만(EC 등을 사용하여 browser.ignoreSynchronization = true ), "Error while waiting for Protractor to sync with the page: "Cannot read property '$$testability' of undefined" browser.ignoreSynchronization = false; 를 설정하면 실패합니다.

이것은 기본적으로 전체 E2E 자동화 테스트 제품군을 무효화합니다.

각도기 5.1.2를 사용하여 ng12Hybrid: true 설정하면 다음 메시지가 표시됩니다.

ng12Hybrid를 설정했습니다. 각도기 4.1.0부터 각도기는 ngUpgrade 앱을 사용 중인지 자동으로 추론할 수 있으며(platformBrowserDynamic()을 호출하기 전에 ng1이 로드된 경우) 이 플래그는 대부분의 사용자에게 더 이상 필요하지 않습니다.

따라서 분명히 angular.io 문서는 여기에서 구식입니다. https://angular.io/guide/upgrade#e2e -tests

같은 문서의 유명한 마지막 단어:

E2E 테스트는 실제로 애플리케이션 구성 요소의 내부 구조와 관련이 없습니다. 이는 또한 업그레이드하는 동안 프로젝트를 상당히 수정하더라도 E2E 테스트 제품군은 약간의 수정으로 계속 통과해야 함을 의미합니다. 사용자의 관점에서 애플리케이션이 작동하는 방식을 변경하지 않았습니다.

angular.io에 대한 그 진술에 비추어:

@heathkit 영역 내부 및 외부 실행에 대한 팁에 감사드립니다. 하지만 솔직히 말해서 우리는 기존 AngularJS 코드를 있는 그대로 실행하는 솔루션을 찾고 있습니다. 암시적 AngularJS 동기화에 의존하는 광범위한 Protractor 제품군이 있습니다. 우리의 목표는 ngUpgrade를 사용하여 AngularJS를 Angular로 마이그레이션하는 것이지만 하이브리드 업그레이드 모드에서 기존 Protractor 제품군을 실행할 수 없다는 이 문제로 인해 이니셔티브가 좌절되었습니다. 현명한 수정은 지금쯤이면 가장 환영할 일입니다.

우리가 근본적으로 잘못된 일을 하고 있다면 무엇인지 알고 싶습니다.

같은 문제에 직면! :0

여기에서 동일한 것을 볼 수 있습니다. AngularJS 1.6 -> Angular 4.2.4

누구든지 해결 방법을 알고 있습니까? 그것이 아무리 클 수 있습니까? 즉, 1.6으로 되돌리지 않는 것입니다.

@quinw68 - @heathkit 은 이 스레드의 이전 응답에서 Angular 'Zone' 외부에서 코드를 실행하는 방법을 제안합니다. 이것이 작동하도록 앱의 소스 코드를 변경하는 것을 의미하며 지원을 추가하는 타사 라이브러리에 의존할 수도 있습니다. 내가 틀렸다면 저를 수정하십시오.

내가 알고 있는 또 다른 '해결 방법'은 기존 앱을 더 이상 AngularJS 앱이 아닌 것처럼 취급하는 것입니다. 이것은 본질적으로 더 이상 Angular를 기다리지 않고 상태를 쿼리하기 전에 페이지에 요소가 있는지 명시적으로 확인하도록 각도기 테스트를 변경해야 함을 의미합니다. 앱의 크기에 따라 어려운 작업이 될 수 있습니다.

도움이 되기를 바랍니다.

내가 이 문제를 이해하는 한 이것은 ngUpgrade 관련이 아니라 Angular 관련입니다. 내 말은, 순수한 Angular(2+) 앱에서도 긴 setTimeout (직접 또는 타사 라이브러리를 통해)가 있으면 각도기가 시간 초과됩니다.

@heathkit , 확인해 주시겠습니까 아니면 제가 놓친 것이 있습니까? ngUpgrade가 각도기를 던지거나 어떤 식으로든 상황을 악화시키나요?

@gkalpak 이것은 Angular 관련 문제에 더

AngularJS에서 각도기는 $browser.defer() 시작된 비동기 작업만 기다립니다. 기본적으로 애플리케이션 코드에서 $timeout 및 $http 호출 setTimeout 호출(제3자 라이브러리에서 잠재적으로)으로 인해 시간 초과되기 시작합니다. 따라서 대부분의 문제는 ngUpgrade가 의도한 대로 작동하고 있으며 이제 사람들의 AngularJS 앱 및 Protractor 테스트가 갑자기 Angular(2+) 의미 체계에 종속된다는 것입니다.

그렇다면 순수한 Angular 앱의 경우 이 문제를 어떻게 해결할 수 있을까요? 타사 Angular 라이브러리가 긴 setTimeout 하여 각도기가 시간 초과되는 경우 어떻게 해야 합니까?

@vikerman 당신이 곧 새로운 팀원을 구해서 이 팀원을 실행할 수 있도록 도와

타사 앱이 긴 시간 제한을 설정하는 경우에는 실제로 좋은 답변이 없습니다. 현재로서는 waitForAngular 끄고 ExpectedConditions에 의존하는 것이 가능하지만 이상적이지는 않습니다. 나는 사람들이 테스트가 기다리는 매크로 작업을 더 잘 제어할 수 있도록 각도기에 기능을 추가하는 작업을 하고 있지만 아직 멀었습니다.

@heathkit @vikerman 이것에 대한 업데이트가 있습니까?

내가 작업하는 프로젝트는 이전에 이 문제가 있었지만 브라우저에 영향을 미치지 않도록 각도 영역 외부에서 실행되도록 연속 폴링 기능을 래핑했습니다.

먼저 각도기 팀/기고자에게 감사드립니다 . 각도기는 약 400개의 e2e 각도기 테스트가 포함된 200개 이상의 서비스, 지시문, 구성 요소, 컨트롤러와 함께 3년에 걸쳐 수십 개의 릴리스에 걸쳐 내 앱이 프로덕션 문제가 거의 없는 기반이 되었습니다.

이것은 내가 Protractor에 얼마나 의존하는지 상기시켜주는 좋은 방법이지만 이 문제는 ngUpgrade 및 보조 요구 사항을 부트스트랩하는 데 2주를 전념한 후 트랙에서 Angular 업그레이드를 중단했습니다. 완료되었지만 이제 e2e 테스트를 실행할 수 없으며 가시적인 경로 없이 배포가 중지됩니다(아직).

@mattwilson1024 의 훌륭한 정보 덕분에 $timeout , setTimeout , setInterval 이 앱에서 사용되지 않도록 했습니다.

그러나 angular-ui-bootstrap (v.2.5.6) 및 ui-select (v0.19.8) 가 $timeout 사용한다는 것을 알았습니다. 두 라이브러리를 광범위하게 사용합니다. angular-ui-bootstrap - 400k npm downloads/mo, ui-select 100k+/mo 등 많은 사람들이 이에 의존하는 것 같습니다.

angular-ui-bootstrap 불행하게도 특별히 때문에이 문제에 $ 간격으로 $ 제한 시간을 대체하기 위해 2015 년 문제를 만들었지 만이있다 않기로 결정 "이 버그는 각도기에 고정되지 여기되어야한다.이 닫기." 또한 angular-ui-bootstrap 는 베타 버전인 @ng-bootstrap/ng-bootstrap의 Angular 버전 liu에서 더 이상 업데이트를 제공하지 않습니다.

각도기 유효성을 보장하지 않는 많이 사용된 각도 라이브러리를 보고 놀랐습니다. 그 점에서 나는 해당 라이브러리가 스스로 수정해야 한다는 @heathkit에 동의합니다. 하지만 Protractor가 개입하여 한 번에 모든 것을 완화할 수 있기를 바랍니다. 좋은 해결 방법조차도 황금색이 될 것입니다. $timeout 종속성을 모두 파헤칠 때까지 지금은 ngUpgrade를 취소해야 한다는 사실에 실망합니다. ngGrade를 포함하고 가능할 때 업그레이드 항목을 선택하기 시작하는 것보다 가능합니다. ngUpgrade를 추가하는 것과 함께 해당 타사 항목에서 업그레이드하거나 마이그레이션하는 데 종속성이 있을 수 있습니다. 어.

내 앱(시간 초과를 유발하는 특정 원인, 앞으로 나아가는 방법 등)에 대해 계속 연구하고 있으며 다른 사람들에게 유용할 수 있는 모든 것을 다시 보고할 것입니다.

$timeout을 찾은 곳:
Angular-ui-bootstrap v2.5.6

• UibAlertController
• UibCarouselController
• UibDatepickerPopupController
• UibTypeaheadController
• UibTooltip

UI 선택

• UI선택
• uiSelectMultiple
• uiSelectSingle
• UISelectSort
• uisOpenClose

angular-resource $resource 는 $timeout 주입하고 사용합니다.
각도 필터( $window.setTimeout )

안녕 - 우리는 위의 문제를 처리하는 데 도움이 될 수 있도록 각도기가 기다리는 작업을 구성할 수 있도록 변경 작업을 진행 중입니다. 이것은 Zone.js 및 Angular와 관련된 광범위한 변경이며 특정 ETA가 없습니다(몇 주 정도 소요될 예정). 여기에서 진행 상황을 업데이트합니다.

내 부트 스트랩 때 같은 문제가 [email protected]의 에 NgUpgrade와 응용 프로그램 [email protected]을.
위의 의견, 특히 @mattwilson1024 및 @tonybranfort 덕분에 문제를 더 잘 이해할 수 있었습니다.

제 경우에는 시간 초과되는 코드 주위에 browser.ignoreSynchronization = true/false; 를 추가하여 해결 방법을 찾았습니다.

예를 들어, 내 테스트 중 하나는 라디오 버튼 그룹에서 간단한 선택을 수행했으며 올바른 옵션이 선택될 것으로 예상합니다.

it('should be able to pick option', function () {
        expect(myPage.optionSelected()).toBe(false);
        myPage.pickOption('Option 1');
        expect(myPage.anyOptionSelected()).toBe(true);
        expect(myPage.getSelectedOption()).toBe('Option 1');
});

이 코드를 디버그하려고 할 때 마지막 단계에서 시간 초과가 발생했음을 발견했습니다. 근본적인 문제는 $timeout을 사용하는 angular-ui-bootstrap의 툴립이라고 가정합니다. https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js

그러나 이 테스트에는 비동기 호출이 없습니다. 그래서 내가하는 일은 처음에 ignoreSynchronization을 추가하고 마지막에 재설정하는 것입니다.

it('should be able to pick a font', function () {
        browser.ignoreSynchronization = true;  // tell protractor do not waitForAngular
        expect(myPage.optionSelected()).toBe(false);
        myPage.PickOption('Option 1');
        expect(myPage.anyOptionSelected()).toBe(true);
        expect(myPage.getSelectedOption()).toBe('Option 1');
        browser.ignoreSynchronization = false;  // reset the flag
});

이것이 권장되는 방법인지 아니면 테스트를 더 불안정하게 만들지 모르겠습니다. 그러나 비동기 호출이 필요하지 않지만 여전히 시간 초과 문제가 있는 테스트의 경우 수정해야 합니다.

안녕하세요 @vikerman - 이에 대한 업데이트가 있습니까? https://github.com/angular/protractor/issues/4290#issuecomment -337094393

내 솔루션:

이 저장소에서:

https://github.com/Innovic-io/protractor-angular-hybrid-app

여기에서 앱을 기다립니다.
https://github.com/Innovic-io/protractor-angular-hybrid-app/blob/master/src/models/angular.ts#L9

@vikerman 이에 대한 업데이트가 있습니까?

내 응용 프로그램에서 시간 초과를 제거할 수 있도록 이러한 장기 실행 시간 초과를 찾는 방법에 대한 좋은 조언이 있습니까?

From : 각도기 문제 #4290에 의해 좌초된 AngularJS 섬의 Castaway(s?)
받는사람 : @vikerman @juliemr

어이! 이 문제에 대한 업데이트를 받을 수 있습니까? 10월 16일의 마지막 업데이트는 "주 단위"의 ETA였습니다. 또는 계속 진행할 수 있도록 이 문제를 닫으십시오.

현재 고려하고 있는 뗏목은 다음과 같습니다.

• 모든 angular-ui-bootstrap / ui-select 를 교체하십시오 . 이것은 나에게 중요합니다. 어쨌든 수행해야 하지만 내 관심사는 다른 것이 나타날 것이고 그 작업 후에도 여전히 AngularJS에 고정될 것이라는 것입니다. 학습한 내용: 타사 구성 요소를 자체 구성 요소로 래핑합니다.
• @vladotesanovic이 제안한 모든 테스트에 대해 waitForAngularEnabled(false) 입니다 . 나는 전체 앱에 대해 이것에 대해 회의적이지만 테스트하지는 않았습니다. 나는 현재 한 가지 상황에서만 waitForAngularEnabled 를 사용하고 있으며 매우 특정한 경우에만 사용합니다.
• 전체 앱을 AngularJS/
• Angular 대신 Vue 또는 React로 마이그레이션하십시오 . 특히 둘 다 AngularJ와 공존할 수 있다는 점을 고려하면 목록에서 가장 높습니다.
• Puppeteer로 이동하고 모든 각도기 테스트
• 또는 #4290에서 수정하면 ngUpgrade 사용을 시작하는 데 필요한 몇 줄의 주석을 제거할 수 있습니다. :)

우리 팀은 복잡한 응용 프로그램을 업그레이드하는 중이며 NgUpgrade로 부트스트랩할 때 각도기 테스트가 실패합니다. 이제 잘못된 긍정인 모든 실패한 테스트를 처리할 수 없기 때문에 변경 사항을 되돌려야 했습니다.

이 문제에 대해 우리는 어디에 있습니까? Angular 업그레이드 계획을 유지할 수 있도록 다른 테스트 프레임워크로 이동해야 하는지 걱정됩니다.

@tonybranfort : 당신과 똑같은 배에서... 우리는 ui-select 및 angular-ui-bootstrap 에 크게 의존합니다. 이것이 우리의 업그레이드를 방해하는 주요 요인입니다. 하지만 이 문제를 주도하신 것 같으니 계속 업데이트해 주세요! 😁

우리는 같은 문제를 겪고 있습니다. 각도기에서 누군가 우리에게 이것에 대해 업데이트할 수 있습니까?

우리는 Angular V1에서 앱을 업그레이드하는 중이며 이 원인이 V1으로 돌아가서 지금까지 Angular V5로의 업그레이드를 위해 수행한 모든 작업을 버리는 것을 싫어합니다.

여기에 또 한 표를 던지고 우리는 앱을 Angular로 업그레이드하는 과정에 있으며 현재 waitForAngularEnabled(false) 의 단편적인 애플리케이션을 사용하여 전체 제품군을 더 큰 위험에 빠뜨리지 않고 통과하도록 하고 있습니다. 그러나 매우 이상적이지 않으므로 더 나은 솔루션을 높이 평가할 것입니다.

특히 $interval 서비스와 관련하여 이 문제도 발생했습니다. 때로는 각도기가 기다리고 있고 때로는 그렇지 않습니다. 아직 패턴을 찾지 못했습니다.

긴 시간 편집: 분명히 간격이 호출되는 시점에 따라 다릅니다(영역 내 여부).

안녕하세요 @vikerman - 각도기가 기다리는 작업을 구성할 수 있는 변경 사항에 대한 소식이 있습니까?

여기에서도 같은 문제입니다.

@vikerman 업데이트나 해결 방법이 있습니까?

우리는 같은 문제에 직면해 있습니다. 이 문제에 대해 약간의 진전이 있다면 좋을 것입니다.

슬프게도 같은 문제가 있습니다. 이에 대한 진전이 있습니까?

Protractor가 시간 초과한 비동기 작업이 어디에서 왔는지 보여줌으로써 이러한 문제를 더 쉽게 디버그할 수 있도록 Angular 및 AngularJS에 작업 추적을 추가하고 있습니다.

@heathkit 이미 어딘가에서 완료되었나요? 우리는 코드베이스에서 해당 위치를 식별하는 데 어려움을 겪고 있습니다.

또한 각도기가 정확히 무엇을 기다리고 있는지 문서를 가지고 있는 것이 좋을 것입니다. 이것은 오래된 것 같습니다: https://www.protractortest.org/#/system -setup. $timeout 을 $interval 로 바꾸는 것만 언급합니다. setTimeout 또는 setInterval에 대한 정보는 없습니다.
일부 문서는 http://www.protractortest.org/#/timeouts에 있습니다. 그러나 그들을 감지하는 방법에 대한 힌트는 없습니다 ...

이것이 "각형 하이브리드 + 각도기" 테스트를 실행하는 데 도움이 될 것이라고 생각합니다. 도움이 되었습니다. 링크 확인: https://github.com/ui-router/angular-hybrid/issues/39#issuecomment -309057814

우리는 이 문제에 무슨 일이 일어나고 있는지 이해하는 데 약간의 진전을 이루었습니다. 우리는 같은 것을 가지고있는 것 같습니다. 업그레이드된 angularjs 감시자/다이제스트 사이클은 약간 다르게 작동하며 일부 무한 다이제스트 사이클 루프를 활성화할 수 있습니다. 사용 중인 타사에서 1개를 찾았고 다음 제품을 조사 중입니다. 그러나 기본적으로 감시자는 감시 대상을 변경하여 감시자가 트리거하는 등의 원인이 되었습니다. 동일한 문제가 있는지 테스트하려면 크롬에서 개발 도구를 열고 성능으로 이동하여 몇 초를 기록하고 NgZone 통화가 많이 발생하는지 확인하십시오. 그렇다면 코드 어딘가에 무한 다이제스트 주기가 있습니다. 호출을 자세히 살펴보면 호출의 원인을 찾는 데 도움이 될 수 있습니다.

또한 로컬 zone.js 파일을 약간 수정하고 시간 초과/간격 작업이 패치되는 콘솔 로그를 추가하여 호출하는 항목을 확인할 수 있습니다. 그렇게 하는 쉬운 방법:

try {
  throw new Error("track");
} catch(err) {
  console.debug(err);
}

편집: 모바일에서 코드 형식을 지정하는 것이 너무 재미있습니다!

@vikerman 이것에 대한 업데이트가 있습니까? 이 문제가 얼마나 빨리 수정될지에 대한 의견을 제공할 수 있다면 얼마나 좋을까요? 감사 해요.

또한 로컬 zone.js 파일을 약간 수정하고 시간 초과/간격 작업이 패치되는 콘솔 로그를 추가하여 호출하는 항목을 확인할 수 있습니다. 그렇게 하는 쉬운 방법:

try {
  throw new Error("track");
} catch(err) {
  console.debug(err);
}

편집: 모바일에서 코드 형식을 지정하는 것이 너무 재미있습니다!

시간 초과/간격을 추적하기 위해 해당 코드를 어디에 넣겠습니까?

@maurycyg patchTimer -> patchMethod 함수가 트릭을 수행해야 합니다.

이 스레드는 보기에 민망합니다. 이에 대한 업데이트가 있습니까?

$timeout 사용하지 않는 잠재적인 해결 방법은 $interval (타사 라이브러리의 경우)로 재정의하는 것입니다.
아래 코드는 시간 초과 문제를 해결했습니다(경우에 따라 브라우저 확인 추가). 제 경우에는 지연 없이 $timeout을 호출하는 angular-bootstrap 구성 요소로 인해 문제가 발생했습니다.

app.config(function($provide) {
    function isUnderProtractor() {
        var nav = window.navigator;
        var lowercasedUserAgent = nav.userAgent;
        return !lowercasedUserAgent || lowercasedUserAgent.contains('protractor');
    }

    if (isUnderE2ETest()) {
        $provide.decorator('$timeout', ['$interval', '$delegate', function($interval, $delegate) {
            var newTimeout = function(fn, delay, invokeApply, pass) {
                if (!delay)
                    return $interval(fn, delay, 1, invokeApply, pass);
                else
                    return $delegate(fn, delay, invokeApply, pass);
            };
            newTimeout.cancel = $delegate.cancel;
            return newTimeout;
        }]);
    }
}

zone.js v0.8.9부터 이러한 모듈의 패치로 인해 발생하는 오버헤드를 줄이기 위해 패치할 웹 API 모듈을 선택할 수 있습니다.
https://github.com/angular/zone.js/blob/master/MODULE.md

아래 내용이 포함된 zone-flags.ts 파일 추가
(window as any).__Zone_disable_timers = true;

zone.js 이전에 polyfills.ts로 가져오기

import './zone-flags';
import 'zone.js/dist/zone';  // Included with Angular CLI.

구역 타이머를 비활성화하는 위의 솔루션은 Obserables(예: asyncValidators)를 엉망으로 만드는 것으로 나타났습니다. 마침내 나를 위해 일한 솔루션은 원숭이 패치 setTimeout입니다.

platformBrowserDynamic().bootstrapModule(AppModule)
.then((moduleRef: NgModuleRef<AppModule>) => {
  const ngZone: NgZone = moduleRef.injector.get(NgZone);
  const originalSetTimeout = window.setTimeout;
  (window as any).setTimeout = function setTimeout(fn, ms) {
    return ngZone.runOutsideAngular(() => {
      return originalSetTimeout(() => {
        ngZone.run(fn);
      }, ms);
    });
  };
})

아마도 문제는 각도기 자체가 아니라 응용 프로그램 코드에 있습니다.

다이제스트 주기를 사용하여 변경 사항을 추적하는 Angular JS에서 Angular2+ 마녀가 있는 하이브리드 앱으로 전환하면서 zone.js를 사용하여 변경 사항을 감지하면서 Protractor가 시간 초과로 떨어지기 시작했습니다.

각도기는 응용 프로그램이 안정적인 경우에만 다음 테스트 작업을 시작합니다. 하이브리드 앱의 경우 안정성이란 애플리케이션의 Angular JS 부분과 애플리케이션의 Angular2+ 부분의 안정성을 의미합니다. 두 부분 모두 안정적이어야 합니다.

Angular JS 안정성은 $$testability.whenStable 통해 정의됩니다. Angular 2+의 안정성은 window.getAngularTestability(...).whenStable 통해 결정됩니다. 각도기 코드를 디버그하고 직접 확인할 수 있습니다. 이렇게 하려면 waitForAngular __\node_modules\protractor\built\clientsidescripts.js_ 파일에 debugger; 문을 추가하십시오.
Angular2+ 영역의 안정성이 절대 발생하지 않음을 알 수 있습니다. 안정성을 위해 모든 마이크로 작업과 매크로 작업을 완료해야 합니다.

이제 우리는 문제를 이해합니다. 응용 프로그램의 Angular 2+ 부분은 항상 불안정하므로 각도기는 안정되고 시간 초과로 떨어질 때까지 무기한 기다립니다. 하이브리드 앱의 경우 Angular JS 안정성은 변경되어서는 안 되며 각도기 시간 초과에 영향을 미치지 않습니다. 이것으로부터 우리는 Angular2+ 영역의 불안정성을 수정하는 것이 필요하다는 결론을 내릴 수 있습니다. 그러면 각도기가 예상대로 작동하기 시작할 것입니다.

첫 번째 수정 시도:
시간이 거의 없었고 모든 것을 한 번에 수정하고 싶었기 때문에 Angular2+ 영역에서 작업 일정을 잡는 코드를 작성했습니다.

    $provide.decorator("$animateCss", ["$delegate", createDecorator]);
    $provide.decorator("$http", ["$delegate", createDecorator]);
    $provide.decorator("$timeout", ["$delegate", createDecorator]);
    $provide.decorator("$interval", ["$delegate", createDecorator]);
    $provide.decorator("$q", ["$delegate", createDecorator]);
    $provide.decorator("$xhrFactory", ["$delegate", createDecorator]);
    $provide.decorator("$templateRequest", ["$delegate", createDecorator]);
    $provide.decorator("$httpBackend", ["$delegate", createDecorator]);

    $provide.decorator("$animate", ["$delegate", createDecorator]);
    $provide.decorator("$rootScope", ["$delegate", createDecorator]);
    $provide.decorator("$templateCache", ["$delegate", createDecorator]);
    $provide.decorator("$browser", ["$delegate", createDecorator]);

    function runInRootZone(fn, ...args) {
        if (window.Zone.current.parent) {
            return window.Zone.current.parent.run(() => runInRootZone(fn, ...args));
        }

        return fn(...args);
    }

    function decorate(decorator, $delegate) {

        const keys = Object.keys($delegate);
        for (let i = 0; i < keys.length; i++) {

            const key = keys[i];
            if (angular.isFunction($delegate[key])) {
                decorator[key] = createDecoratorForFunctionLikeService($delegate[key]);
            } else {
                if (decorator[key] !== $delegate[key]) {
                    decorator[key] = $delegate[key];
                }
            }
        }
    }

    function createDecoratorForFunctionLikeService($delegate) {

        function decorator(...args) {
            return runInRootZone($delegate, ...args);
        }

        decorate(decorator, $delegate);

        return decorator;
    }

    function createDecoratorForService($delegate) {

        decorate($delegate, $delegate);

        return $delegate;
    }

    function createDecorator($delegate) {
        if (angular.isFunction($delegate)) {
            return createDecoratorForFunctionLikeService($delegate);
        }
        return createDecoratorForService($delegate);
    }

이 접근 방식은 실행 가능한 것으로 입증되었지만 시간이 보여주듯이 이 접근 방식에는 고유한 단점이 있습니다. 주된 것은 하이브리드 앱의 특정 부분에 대해 어떤 영역(루트 또는 각도)이 될지 결정하는 것이 불가능하다는 것입니다. 정상적인 작동을 위해 Angular2+는 항상 Angular 영역에 있어야 하며 데코레이터는 Angular2+ 구성 요소가 루트 영역에 있도록 할 수 있습니다. ngUpgrade는 Angular 영역이 대부분의 응용 프로그램을 포괄함을 의미합니다.

이를 피하기 위해 데코레이터를 포기하고 원래 문제로 돌아가 원인을 더 자세히 분석하여 두 번째 수정 시도가 있었습니다.

이제 어떤 코드가 영역을 불안정하게 만드는지 이해해야 합니다. 이를 위해 zone.js에는 _TaskTrackingZoneSpec_(_\node_modules\zone.js\dist\task-tracking.js_)과 같은 특수 유틸리티가 있어 영역에 있는 작업과 생성된 위치를 추적할 수 있습니다( creationLocation ). 또한 앱의 Angular2+ 부분 시작 부분에서 Angular 영역 (window as any).a9Zone = (upgradeModule as any).ngZone._inner; 하고 이 코드를 어딘가에 추가합니다.

$rootScope.$watch(function () {
    if (window.a9Zone) {
        console.log("Angular2+ task count:", window.a9Zone._zoneDelegate._taskCounts);

        // Optional.
        window.getAllAngularTestabilities().forEach(_ => {
            _.taskTrackingZone.macroTasks.forEach(t => {
                console.log(t, t.creationLocation);
            });
        });
    }
});

따라서 응용 프로그램에서 마이크로 작업과 매크로 작업이 오랫동안 영역에 있는 위치를 찾습니다(_microTasks.lenght! == 0 && macroTasks.lenght! == 0_).

그런 다음 이 코드를 Angular 영역에서 가져와야 합니다. 이렇게 하려면 ngZone.runOutsideAngular 코드를 래핑합니다. 그러나 매우 조심스럽게 수행하고 루트 영역이 필요하지 않은 곳에 나타나지 않았는지 확인하십시오.

각도 영역이 안정되면 각도기가 더 이상 시간 초과로 떨어지지 않습니다.

도움이 되었기를 바랍니다.

아래 논리로 waitForAngular 함수를 재정의하여 이 문제를 해결하기 위해 임시 해킹을 생각해 냈습니다.

onPrepare: function() {

            var script = "var callback = arguments[arguments.length - 1];" +
                "angular.element(document.querySelector(\"body\")).injector()"+
                ".get(\"$browser\").notifyWhenNoOutstandingRequests(callback)");

            browser.waitForAngular = function() {
                return browser.executeAsyncScript(script)
            };
}