Protractor: $ timeout（）を待つのを避けますか？

ptor.ignoreSynchronizationを使用できますが、これにより、テストの他の場所でフレークが発生する可能性があります。 または、Angular 1.2rc3には、Protractorが待機しないintervalサービスがあります（https://github.com/angular/angular.js/commit/2b5ce84fca7b41fca24707e163ec6af84bc12e83を参照）。 1回繰り返す間隔を設定できます。

こんにちは@drhumlen 、私たちは同じ問題を抱えていました、そして私たちはポップアップが間違いなくユニットテストに行くべきものであると結論付けます。 そのため、通知システムをモックし、モックが呼び出されたことを期待します（最終的にはいくつかの重要な情報が含まれます）。 また、通知をユニットテストして、何も壊れていないことを確認しました。
お役に立てば幸いです。

$intervalが私たちのためにトリックをしました。

  $interval(function() {
    // ...
  }, duration, 1);

今ではうまく機能します。 しかし、私たちは非常に誠実であり、各テストの後にポップアップが他の方法で削除されていることを確認する必要があります（この場合、「x」ボタンをクリックします）。

  afterEach(function() {
    removeLogMessagesFromDOM();
  });

@mackwic ：多くのアプリの単体テストでテストできると思いますが、この場合、エラーメッセージはバックエンドによって生成されるため、e2eでテストする必要があります。

ありがとう@juliemr

分度器が$timeout待つのは奇妙に思えます。 ほとんどの場合、ユーザーはこれに対処する必要がありますか？

また、この問題に直面し、 $interval解決しました。 少しひねると、 $timeoutように使用できます。

保存方法をテストし、保存後に成功通知が表示されることを確認したかったのです。 この通知は$ timeoutサービスによって隠されていました。 分度器は$ timeoutを待っていて、通知が非表示になった後で通知が表示されるかどうかを確認していました。

前：

$timeout(function() {
    //hide notification
}, 3000);

後：

var intervalCanceller = $interval(function() {
    //hide notification
    $interval.cancel(intervalCanceller);
}, 3000);

これは有効な問題とは見なされませんか？ 私は自分でこれに遭遇しました。 $interval代わりに$timeout $interval使用することが解決策であり、より多くの回避策であるとは思いません。

$intervalから$timeout $intervalに変更しても、これを機能させることはできません。

タイムアウト後に消えるトーストがあります。 これは私がそれをテストするために使用しているコードです：

username = element(select.model("user.username"))
password = element(select.model("user.password"))
loginButton = $('button[type=\'submit\']')
toast = $('.toaster')
# Check the toaster isn't displayed initially
expect(toast.isDisplayed()).toBe(false)  # This passes
username.sendKeys("redders")
password.sendKeys("wrongpassword")
loginButton.click()
toastMessage = $('toast-message')
# Check the toaster is now displayed
expect(toast.isDisplayed()).toBe(true)   # This passes
expect(toastMessage.getText()).toBe("Invalid password")  # This fails

関連するマークアップはこちら（翡翠）

.toaster(ng-show="messages.length")
  .toast-message(ng-repeat="message in messages") {{message.body}}

失敗は、 toastMessage = $('toast-message')がどの要素とも一致しないことです。 .toast-messageが存在しないときに最初に呼び出されているため、これは失敗しますか？

この問題はまだ修正されていますか？ タイムアウトの代わりに間隔を使用することは、解決策よりもハッキングまたは作業であるためです。

私は同じ問題に直面し、browser.ignoreSynchronization = true; 助けにならない。 コードを$ intervalに置き換えることはできますが、e2eテストでは、採用されたコードではなく、実際のコードをテストする必要があります。

@ vytautas-pranskunas- ignoreSynchronizationが機能していない場合は、別の問題があるようです。 再現可能な例を提供できる場合は、新しい問題を開いてください。

ignoreSynchronizationないことがわかりました。
エラーメッセージの表示を担当するサービスがあります。 ショーメッセージが消えた後、5秒間画面に表示されたままになります。 このプロセスは$ timeoutによって制御されます。

2つのシナリオがあります-最初のignoreSynchronizationは正常に機能し、2番目のシナリオは機能しません

1）ユーザーがボタンをクリックするとすぐにメッセージが表示されることを知っています。 expec(message).tobe(...)します。この場合、 ignoreSynchronizationが処理を実行します。

2）メッセージは（サーバーの応答時間に応じて）任意の時間が経過すると表示される可能性があり、追加のロジックは表示された後にのみ実行する必要があることを知っています。この場合、ここでbrowser.wait(by.(....).isPresent(), n)を使用する必要がありますignoreSynchronizationが機能を停止し、フローが続きます（待機中にbrowser.wait console.log出力を表示します）

waits
waits
waits (element appears)
browser waits freezes for 5 seconds
after element disappears it continue
wait
wait
wait

ご覧のとおり、$ timeoutにアクセスすると待機がフリーズするため、要素が存在することはありません。

プランカーで再現できるようにする時間はあまりありませんが、このシナリオは非常に一般的であるはずなので、試してみると素晴らしいでしょう。

Thnaks

ログを作成したコードのコンテキストがないと、ログはあまり役に立ちません。 それを共有してもらえますか？

プライバシーのためにコードを共有できませんが、アイデアを得るためにいくつかの擬似コードを表示できます
（メッセージを表示するためのボタンとng-repeatがあるため、htmlコードを記述していません）

constructor(){
$scope.$on('globalMessageAdded', () => {
            $scope.globalMessages = this.getMessages();
        });
}

callServer(){
//interval here acts like server delay
   $interval(()=> {
     $rootScope.messages.push('test messages');
      this.$rootScope.$broadcast('globalMessageAdded');
   }, 3000, 1);
}

getMessages = () => {
        var newMessages = <ISpaGlobalMessage[]>[];
        _.forEach(this.$rootScope.globalMessages, item => {
            newMessages.push(item);
//because of this timeout browser.wait stops waitng for 5 seconds
            this.$timeout(() => {
                this.remove(item);
                this.$rootScope.$broadcast('globalMessageRemoved');
            }, 5000);
        });

        return newMessages;
    }

分度器部分

element('button').click();
browser.ignoreSynchronization = true; //tried with and without it
browser.wait(() => element(by.css('.alert-success')).isPresent(), 10000000);
browser.ignoreSynchronization = false;

other code that should be executed after successful message

要素が存在している間、browse.waitはチェックをトリガーしないため、browser.waitはその要素を検出しません。

これについて何か進展や考えはありますか？

browser.wait（）の直後に「browser.ignoreSynchronization = false;」を設定できないのはなぜですか？

私のコード

        var el = element(by.css('.popup-title.ng-binding'));
        browser.ignoreSynchronization = true; 
        browser.wait(function (){
            return el.isPresent();
        }, 10000);
        var popupMsg = el.getText();
        expect(popupMsg).toEqual('something...');
        browser.ignoreSynchronization = false; // not work, if take out this statement, it works again

同じ問題に噛まれている。 使用するトーストモジュールはnpmの汎用コンポーネントであるため、$ intervalを使用するように簡単に変更することはできません。 また、分度器が一方を待ち、もう一方を待たない理由もわかりません。 理想的には、これはそれ自体で構成可能であるため、他の同期待機には影響しません。

この問題はangular-ui / bootstrap＃3982にあり、$ intervalにスワップしないことにしたので、ここに来て、問題を修正するためにできることがあるかどうかを確認します。

どうもありがとうございました。

今週、トースト通知コンポーネントを使用してこの問題を実行しました。

使用して$interval代わりに$timeoutもっともらしいソリューションではありません。 そして、 browser.ignoreSynchronization = trueは私にとっても機能しません。

何か考えやアイデアはありますか？

ますます多くの人々がこれに遭遇するので、Angularチームはこの問題を再開することを計画していますか？ テストに合うようにコードを書くべきではないので、$ timeoutを$ intervalに置き換えることができるので、問題がないふりをするのは専門家ではありません。テストはテストコードに書く必要があります。

+1修正も必要です。

同意しました。 テストを修正する必要があります。 +1

+1、これもこの問題に遭遇しました。 多分、分度器のタイムアウトを待つべきではないことを伝える方法があるはずです。

ignoreSynchronisationは私には機能しません、私はそれがあまりにも多くのものを無視すると思います。 タイムアウトの同期を無視する方法、またはbrowser.waitForTimeouts();ようなより洗練されたAPIが必要です。

+1。 修正が必要です。 なぜ間隔を空けて醜い回避策を使用する必要があるのですか。

+1

+1、不安定なテストを処理するのが非常に難しいことを発見..これを修正する必要があります

+1は@ vytautas-pranskunasに同意します-テスト自体を機能させるためだけに、テストするコードを変更する必要はありません。

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1

多くの人がbrowser.ignoreSynchronization = trueを間違った方法で使用しているのではないかと思います。 私が間違っている場合は私を訂正してください、しかしあなたが書くなら私に：

browser.ignoreSynchronization = true;
expect( elem.getText() ).toEqual( "foo" );
browser.ignoreSynchronization = false;

その後は機能しません。これは純粋なJavaScriptであり、3行が同期的に読み取られます。 したがって、 getTextとexpect約束が解決するまでに、同期はすでにオンになっています。 分度器が最後の約束を解決し、 thenコールバックで同期を元に戻すのを待つことで、これを回避できます。

分度器チームが人々を支援する1つの方法は、promiseバッファーが実行されたときにのみ同期に影響を与えるメソッドへのアクセスを提供することです。 例えば：

browser.setIgnoreSynchronization( true );
expect( elem.getText() ).toEqual( "foo" );
browser.setIgnoreSynchronization( false );

とにかく、分度器が$ timeoutを待っているために、多くの問題が発生しました。大規模なアプリケーションでは、ツールチップ、モーダル、アニメーションなど、副作用が多すぎます。 browser.ignoreSynchronization = true;との同期をグローバルに無効にすることにしました。

$ intervalを使用した+1はハックであり、解決策ではありません

+1このバグは私に多くの惨めさを引き起こしました。 これを修正する方法についてのダイアログを始めましょう。 数百（！）の場所で$ timeoutを使用する数十のbowerおよびnpm角度モジュールがあり、コードで45回使用しています。 私のコードを変更することは実行可能（そして合理的）ですが、サードパーティのコードを変更することはロジスティック的に完全に問題外です：アップストリームプロバイダーに連絡して動機付けしようとしたり、サードパーティのAngularモジュールをローカルでフォークして並列パッチストリームを維持したりすることは悪夢のシナリオですバグがProtractorと$ timeoutにあり、モジュールの外部にない場合は、受け入れられません。

これに一緒に取り組みましょう。

+1

このバグは、以下のサンプルシナリオでe2eテストを行う際に問題を引き起こしています。

1）フィールドに入力し、フォームを送信します。フォームは、次のような複数のイベントをブロードキャストします。
*ステータスメッセージリンク。$ timeoutが添付され、数秒間しか表示されません。
*新しいメッセージが別のウィジェットのメッセージリストに追加されます
2）次に、ステータスメッセージのリンクをクリックすると、メッセージがポップアップとして開き、詳細が表示されます。

したがって、シナリオを自動化しようとしているときに、フォームを送信できます。 ただし、ステータスメッセージのリンクをクリックしようとすると、browser.ignoreSynchronization = true;が必要になります。 リンクが$ timeoutに接続されているためです。

リンクはクリック可能ですが、ポップアップとして開くメッセージが機能していません。

Stackoverflowといくつかのグーグルアンサーをチェックインしたとき、それは$ timeoutのせいであることがわかりました。 だから私は要素の$ timeoutを削除してチェックしました、今それは正しく動作します。

したがって、私の要求は、$ timeoutなしで要素を持つことができないときはいつでもです。 したがって、上記のシナリオを検討し、分度器が$ timeoutの待機を無視できる新機能を用意してください。

同じ問題に直面し、それを回避するためにwindow.setTimeoutとwindow.clearTimeoutを使用する必要がありました。 あまり角度のない方法であり、ダイジェストに干渉する可能性がありますが、$ intervalと同期の無視は解決策ではありません

まったく同じ問題に直面しましたが、分度器チームの誰かがこれに対応しますか？

+1

以下のような汚い解決策にたどり着くまで、これは私を夢中にさせていました（ここでは分度器noob）。

beforeEach(function () { browser.ignoreSynchronization = true; });
afterEach(function () { browser.restart(); });

正常に動作し、ヘッドレスブラウザでは遅すぎません。

+1

ここでも問題が発生しています。 私のテストは、いくつかのAPIリクエストを行い、いくつかのWebSocketを開くページにアクセスするまで順調に進んでいました。 その時点で、分度器は毎回タイムアウトします。 私は良い解決策を見つけていません。

browser.ignoreSynchronization = true;グローバルにオフにした場合に、提案されたヘルパーメソッドについて@floribonに興味が

describe('something', function() {
  it('should do....', function() {
    var fooPage = new FooPage();
    fooPage.visit();
    var barPage = fooPage.clickCreate();  // does some API call, then redirects to barPage
    // at this point, enough things are happening that it is impossible to interact with barPage.
    // Protractor locks up.
    // barPage makes other API call & opens WebSocket
    barPage.clickBaz();  // nope.  will timeout every time.
  });
});

@benjaminapetersen私のヘルパーは次のようになります：

btn1.click();         // Triggers many things and eventually displays page2
wait.forURL('page2'); // wait for page2 to be loaded before moving on
$('.btn1').click();   // this does some async job and eventually displays btn2
wait.forElement('.btn2');
$('.btn2').click();

たとえば、 wait.forElement返されます

browser.wait(() => elem.isPresent().then(p => p, () => {}), timeout, 'Not found');
// browser.wait(function() { return elem.isPresent().then(function(p) { return p;} , function() {}); }, timeout, 'Not found');

アイデアは、実際のユーザーの行動を模倣することです。要素をクリックし、別の要素が表示されるまで待ってからクリックするなどです。こうすることで、$ timeoutを待つ必要がなくなり、より高速で安全になります。

ここで重要なのは、内部の約束からのエラーを無視し、タイムアウトに達するまでさらに数回試行することです。

PS：そのためにExpectedConditionsを使用することもできますが、angularがDOMノードを再構築するときにいくつか問題がありました（たとえば、 ng-if条件）：

browser.wait(browser.ExpectedConditions.precenseOf(elem), timeout, 'Not found');

@floribon素晴らしい、ありがとう！

@juliemrは、分度器でトーストエラーメッセージをキャッチするのを手伝ってくれます。メールIDanjaliに返信してください。 [email protected]

@juliemr $ intervalサービスを使用して長時間実行されるhttpリクエストを呼び出すことが機能していません。 分度器はまだタイムアウトになっています。
これが私のAngularCodeです
this。$ interval（（）=> this。$ http.get（this.prefix（url）、config）、0、1）
分度器はまだ$ httpタスクが完了するのを待っています。
分度器5.xとangualrjs1.6xを使用しています。
私たちを手伝ってくれますか？

+1、これを処理するために何かを追加する必要があります。

+1

+1

+1

+1

+1

+1

この仕様は私のために働いた。 本当にありがとう！ そして、実行が非同期であるというヒントを求めて@floribonに歓声が

    // screenshot-spec.js

    // a close button that appears on the md-toast template
    const closeToastButton = $('[data-automation="toast-close"]')
    const cond = protractor.ExpectedConditions
    function waitToastShow() {
        return browser.wait(cond.elementToBeClickable(closeToastButton), 5000)
    }
    function waitToastHide() {
        return browser.wait(cond.invisibilityOf(closeToastButton), 5000)
    }

    screenshot = name => browser.takeScreenshot().then(/* save fn */)

    describe('a suite ... ', () => {
        it('takes screenshots of an md-toast once shown and after hidden', function () {
            // ... actions that launch an md-toast using $mdToast.show({ ... })
            browser.ignoreSynchronization = true
            waitToastShow().then(() => {
                screenshot('toast-showing.png')
                waitToastHide().then(() => {
                    screenshot('toast-hidden.png')
                    browser.ignoreSynchronization = false;
                })
            })
        });
    }

特定のテストケースにタイムアウトを追加する方法
`
it（ '1-電子メールに送信された登録コードでログインする必要があります'、function（done）{

// setTimeout(function () {
            flow.execute(browser.params.getLastEmail)
                .then(function (email) {
                    expect(email.subject)
                        .toEqual('[email protected] submitted feedback');
                    expect(email.headers.to)
                        .toEqual('[email protected]');
                    expect(email.html.includes('User feedback details: accountId: 12345, related To: dashboard, description: ' + D.feedbackMsg + ''))
                        .toEqual(true);
                    console.log(email.html);
                    // done();
                });


    });`