3

次のテストがあります。

fixture('Minimal reproduction')
  .page('http://www.sport-conrad.com/');


test('Navigate to item-details', async t => {
  await t
    .click('.dropdown-toggle')
    .click('.productData:first-of-type a')
  });

これを実行すると testcafe chrome test.js 、期待どおりに動作します。

もしそうならtestcafe nightmare test.js、エラーが発生しますThe element that matches the specified selector is not visible.。

私はこれを追跡して、明らかにエレクトロンブラウザの悪夢が使用するビューポートでページを開き、デスクトップナビゲーションが消えて.dropdown-toggle見えなくなったという事実にたどり着きました。そこで、手動のサイズ変更を追加して、これを回避しました。

fixture('Minimal reproduction')
  .page('http://www.sport-conrad.com/');


test('Navigate to item-details', async t => {
  await t
    .resizeWindow(1024, 900)
    .click('.dropdown-toggle')
    .click('.productData:first-of-type a')
  });

だから私の最初の質問：これは機能しますが、testcafeがブラウザをナイトメアモードで開くという次元を提供する別の方法はありますか?

...しかし: 今.dropdown-toggle戻ってきました。以前と同じように、テストが再び合格することを期待していました。

残念ながら、別のエラーが発生しました: The specified selector does not match any element in the DOM tree....これは 2 番目のセレクターに関連しているようです。理由はわかりませんが。

私の2 番目の質問: ここでの悪夢のようなブラウザーの違いは何ですか? 別のページで同様のテストケースを試してみたところ、クロムと同じようにページが正常にロードされたようです。

また、ブラウザをしばらく待機させるなどのいくつかの回避策を試しましたが、何も機能しませんでした。

多分誰かがここで私を正しい方向に向けることができますか? :)

4

2 に答える 2

3

1) 今のところ、ブラウザのサイズを設定する唯一の方法は、t.resizeWindowコマンドを使用することです。コードの重複を避けるために、fixture.beforeEachフックでそれを行うことができます ( testcafe ドキュメントを参照)。

一方、Nightmare では、コンストラクター オプションを介してブラウザーのサイズを設定できます。testcafe-browser-provider-nightmareただし、このための API をプラグインに追加する必要があります。

2) あなたのサイトをビジュアル モード (TestCafe なし) で開き、リンクnightmareをクリックしようとしました。.dropdown-toggleただし、新しいページへのリダイレクトは発生しません。event.preventDefault()いくつかのデバッグの後、クリック イベントのスクリプトで が呼び出されていることがわかります。(クロムではこれは呼び出されず、リダイレクトが発生します)。スクリプトは縮小されているため、preventDefault が呼び出される本当の理由を特定するのは困難です。エレクトロンブラウザ特有の現象だと思いますので、原因を調査する必要があります。これが私が実行するスクリプトです：

var Nightmare = require('nightmare');       
var nightmare = Nightmare({
    show: true,
    width: 1024,
    height: 600,
    webPreferences: { devTools: true },
    executionTimeout: 1000000,
    waitTimeout: 1000000
});

nightmare
  .goto('http://www.sport-conrad.com/')
  .wait(1000000)
  .end();
于 2017-04-10T10:01:18.080 に答える
1

そこで、Alexander の助けを借りて (どうもありがとうございました!)、このエラーの原因を jQuery に突き止めることができました。

次の行は、この動作を引き起こすようです:

    // Determine handlers
    handlerQueue = jQuery.event.handlers.call( this, event, handlers );

    // Run delegates first; they may want to stop propagation beneath us
    i = 0;
    while ( ( matched = handlerQueue[ i++ ] ) && !event.isPropagationStopped() ) {
        event.currentTarget = matched.elem;

        j = 0;
        while ( ( handleObj = matched.handlers[ j++ ] ) &&
            !event.isImmediatePropagationStopped() ) {

            // Triggered event must either 1) have no namespace, or 2) have namespace(s)
            // a subset or equal to those in the bound event (both can have no namespace).
            if ( !event.rnamespace || event.rnamespace.test( handleObj.namespace ) ) {

                event.handleObj = handleObj;
                event.data = handleObj.data;

                ret = ( ( jQuery.event.special[ handleObj.origType ] || {} ).handle ||
                    handleObj.handler ).apply( matched.elem, args );

                if ( ret !== undefined ) {
                    if ( ( event.result = ret ) === false ) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                }
            }
        }
    }

    // Call the postDispatch hook for the mapped type
    if ( special.postDispatch ) {
        special.postDispatch.call( this, event );
    }

なぜこれが起こるのかはよくわかりません。そして特に、他のブラウザは問題なく動作しているように見えるのに、悪夢でテストを実行した場合にのみ発生するのはなぜですか...

于 2017-04-10T15:17:39.893 に答える