分度器連鎖約束によるAngularJSテスト - アニメーションが完了するのを待つ方法？

Question

私は現在、私の会社が開発した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'); 
          } 
         ) 
        ) 
       ) 
      ) 
    ); 
}); 

私は私のテストスクリプトを実行すると（私はこの1つ前に実行される他のテストの数を持っている）、最初のいくつかの実行&パスが成功し、このテストが実行を開始し、その後とき、コンソールは示していますので、

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秒後にタイムアウトされます。

このbrowserPageTagsLink要素は、私のテストがナビゲートしようとしている「ブラウザ」ページに表示される単なるハイパーリンク要素です。私はそれが表示されるのを待っているので、 URLは正しいです...

しかし、これらのテストが実行されているブラウザウィンドウで何が起こっているのか、テストが実行されているときにコンソールに表示されているものを見ると、スクリプトは「停止する」/ Browser menu button clickedメッセージがコンソールに表示された後、しばらくの間「ハング、そして私は、このボタンは、実際にこのボタンが表示されたポップアップメニューをclicked-ことはなかったブラウザウィンドウが非常に簡潔に示されている見てから見ることができます：行browser.actions().mouseMove(pagesMenuBtn).perform()が原因になっていますサブメニューを表示するために必要なボタンの上にカーソルを移動するカーソルが、視界にフェードイン」に表示され、エレメントにいくつかのアニメーションがあります（サブメニュー要素が完全にロードが終了する前にクリックが行われているようです）、要素のロードが完全に終了する前にクリックが発生していると思われ、正しく登録されていない可能性があります。正しく要素とクリックレジスタように私は、私のテストは、サブメニューのメニュー項目をクリックしようとする前に完了するアニメーションのために待機させることができますどのように

？

は、私はラインでこれをやってみました：

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

EC.visibilityOf(...)条件が要素ではなく、それは完全に不透明になるまで待っているよりも、目に見えるなり始めるとすぐに会ったが、それ

ているようです

pageTagBrowserBtn.click().then(

これは、実際にはこの時点では実行できません。おそらく、要素がクリックされた時点で「完全に」表示されていないためですか？

要素をクリックしようとする前に、テスト（アニメーションが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"); 

：

は、私は私のテストは完全に私はクリックを送信している私のテストの一部を更新IT-をクリックしようとする前に表示される要素を待つなるように、 browser.wait()への呼び出しを追加してみました

私は、この時点で要素に十分な時間を与えてCSSを表示するには0.5秒しかかかりませんでしたが、この時点で10秒待つように指示しましたが、何らかの理由でテストしました同じタイムアウトの問題のためにまだ失敗しています。

誰もが何か提案がありますか？

Answer 1

あなたのテストを見ると、なぜそのような約束を結ばなければならないのでしょうか？あなたのページがある場合は

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)もお試しください。