각도기 결합 법으로 AngularJS 테스트 - 애니메이션이 완료 될 때까지 기다리는 방법?

저는 현재 회사에서 개발 한 AngularJS 응용 프로그램 용 자동화 테스트를 개발 중입니다. 나는 이미 &을 설계하여 수많은 테스트 케이스를 개발했으며, 이는 예상대로 통과/실패한 &을 실행합니다.각도기 결합 법으로 AngularJS 테스트 - 애니메이션이 완료 될 때까지 기다리는 방법?

그러나, 나는 현재 개발하고 테스트와 함께, 내가 약속을 체인 때 문제로 실행 한 것, 그리고 그것을 해결 드릴 수 없습니다 ... 그것은 약자로 테스트 스크립트는 다음과 같습니다

it('should navigate to the browser page', function() { 
    console.log("Start browser page test"); 
    browser.waitForAngularEnabled(false); 
    browser.wait(EC.visibilityOf(pagesMenuBtn), 10000).then(
     browser.actions().mouseMove(pagesMenuBtn).perform().then(
      //expect(pageBrowserBtn.isDisplayed()).toBeTruthy(); 
      browser.wait(EC.visibilityOf(pageBrowserBtn), 12000).then(
       pageBrowserBtn.click().then(
        function() { 
         console.log("Browser menu button clicked"); 
         //browser.pause(); 
        }).then(
         browser.wait(EC.visibilityOf(browserPageTagsLink), 20000).then(
          function(){ 
           console.log("End browser page test (then call)"); 
           expect(browser.getCurrentUrl()).toBe(VM + '/#/pages/browser'); 
          } 
         ) 
        ) 
       ) 
      ) 
    ); 
});

내 테스트 스크립트를 실행하면 (나는이 일하기 전에 실행되는 다른 시험의 번호를 가지고), 처음 몇 실행 & 패스 성공적으로이 테스트를 실행하기 시작 후 때 콘솔을 보여줍니다 : 그래서

Started

....Start browser page test

Browser menu button clicked

F

Failures:

1) App should navigate to the browser page

Message:

Failed: Wait timed out after 20010ms

Stack:

TimeoutError: Wait timed out after 20010ms at WebDriverError (C:\Users\path\selenium-webdriver\lib\error.js:27:5)

콘솔에 표시된 출력에서 이 테스트는 console.log("Browser menu button clicked); 문까지 정확하게 실행됩니다. 이는 내가 의도 한대로 메뉴 버튼에서 클릭이 수행되었음을 나타냅니다 (예 : 클릭 메뉴 버튼들은 커서 pagesMenuBtn 소자 가리키면 때만 도시 된 팝업 메뉴에 표시되고, 그래서 광고

browser.wait(EC.visibilityOf(pageBrowserBtn), 12000).then(

)이 올바르게 실행되는 것을 나타낸다. console.log("Browser menu button clicked"); 문이 또한 콘솔에 표시되기 때문에

은, 그것은

pageBrowserBtn.click().then(

도 제대로 실행되고 있음을 나타냅니다.

그러나 어떤 이유로, 테스트는 browserPageTagsLink 요소가 표시되기를 기다리는 20 초 후 시간 초과됩니다.

이 요소는 내 테스트가 탐색하려고하는 '브라우저'페이지에 표시된 하이퍼 링크 요소 일뿐입니다. URL은 정확합니다 ...

하지만 테스트가 실행되는 브라우저 창에서 무슨 일이 벌어지고 있는지, 내 테스트가 실행되는 동안 콘솔에 표시되는 내용은 '멈추다'/ 일시 중지/콘솔에 Browser menu button clicked 메시지가 표시되면 잠시 멈추고이 버튼이 실제로 클릭되지 않은 브라우저 창을 볼 수 있습니다.이 버튼이 표시된 팝업 메뉴는 매우 짧게 표시됩니다. browser.actions().mouseMove(pagesMenuBtn).perform()이 원인입니다.커서가 하위 메뉴를 표시하는 데 필요한 버튼 위로 마우스를 가져 가면 하위 메뉴 요소가 완전히로드되기 전에 클릭이 수행 된 것처럼 보입니다 (요소에 애니메이션이 일부 있음 - '보기가 흐리게 보임'),하지만 요소가 완전히로드되기 전에 클릭이 발생하고 있으므로 제대로 등록되지 않았을 것으로 생각됩니다.

하위 메뉴 항목을 클릭하기 전에 테스트가 애니메이션을 완료 할 때까지 기다려야하므로 클릭이 요소와 올바르게 등록됩니다.

가 나는 라인이 일을 시도 :

browser.wait(EC.visibilityOf(pageBrowserBtn), 12000).then(

EC.visibilityOf(...) 조건 요소가 아니라 완전히 불투명 때까지 기다리지 않고, 가시가 시작 되 자마자 만났지만 그

것 같다

라인이 실제로는이 시점에서 수행 할 수 없습니다. 아마도이 요소는 클릭 한 지점에서 '완전히'볼 수 없기 때문일 수 있습니다.

요소를 클릭하기 전에 테스트 (애니메이션을 CSS를 사용하여 구현 됨)가 완료 될 때까지 기다릴 수 있습니까?

내가 애니메이션에 대해 아무것도에 대한 Protractor API에보고했지만, 단지 기능 allowAnimations()을 제공 할 것 ...

편집

이 요소의 애니메이션은 CSS에서 설정

/* Animation for moving lists in configuration */ 
.list-fade.ng-enter, 
.list-fade-leave.ng-leave { 
    -webkit-transition: all linear 0.5s; 
    transition: all linear 0.5s; 
}

즉, 커서가 상위 요소 위로 이동하면 요소를 표시하는 데 0.5 초가 걸릴 수 있습니다.

browser.actions().mouseMove(pagesMenuBtn).perform().then(
    //expect(pageTagBrowserBtn.isDisplayed()).toBeTruthy(); 
    browser.wait(EC.visibilityOf(pageTagBrowserBtn), 12000).then(
     browser.wait(10000).then(
      pageTagBrowserBtn.click().then(
       function() { 
        console.log("Tag Browser menu button clicked");

나는 내 테스트가 완전히 I가 클릭을 보내는 내 테스트의 부분을 업데이트 - 그것을 클릭하기 전에 표시 할 요소를 기다릴 것이다 그래야, browser.wait()에 전화를 추가하는 시도

필자는 요소를로드 할 충분한 시간을 확실히주기 위해이 시점에서 10 초 동안 기다리라고 말했지만 (CSS에 따르면, 표시되는 데는 0.5 초 밖에 걸리지 않음), 어떤 이유로, 내 테스트 같은 시간 초과 문제로 인해 여전히 실패하고 있습니다.

누구든지 의견이 있으십니까?

출처

2017-11-07 someone2088

테스트를 보면 왜 그런 약속을 지켜야하는지 궁금합니다. 페이지가

driver.get(“http://www.google.com”). 
then(function() { 
    return driver.findElement(webdriver.By.name('q')); 
}). 
then(function(q) { 
    return q.sendKeys('webdriver'); 
}). 
then(function() { 
    return driver.findElement(webdriver.By.name('btnG')); 
}). 
then(function(btnG) { 
    return btnG.click(); 
}). 
then(function() { 
    return driver.getTitle(); 
}). 
then(function(title) { 
    console.log(title); 
});

경우 완전히 각 페이지 각도기가 예상되는에 자동으로 내가 실제로이 같은 동기 방식으로 실행이

driver.get(“http://www.google.com”); 
driver.findElement(webdriver.By.name('q')).sendKeys('webdriver'); 
driver.findElement(webdriver.By.name('btnG')).click(); 
driver.getTitle().then(function(title) { 
    console.log(title); 
});

같은 테스트를 작성 즉 때, 약속을 체인 당신이 쓴 것의 대부분은 각성의 필요성이 없어야하고, 시험에 타이밍 문제가 생길 수 있습니다. 약속을 지키지 않고 시험 작성을 시도 했습니까?

아직 말하지 않았 으면 EC.visibilityOf()을 기다리는 대신 EC.elementToBeClickable(yourElement)을 기다리는 것이 좋습니다.

출처

2017-11-07 20:39:44

각도기 결합 법으로 AngularJS 테스트 - 애니메이션이 완료 될 때까지 기다리는 방법?

답변

관련 문제