2

イベントを挿入して jquery.cluetip.js ライブラリをトリガーし、behat と mink を使用して Web サイトのテスト目的でポップアップを表示しようとしています。これを行う必要があるのは、必要な HTML/DOM 要素が後続のテスト ルールのクルーチップによって配置されるようにするためです。

手がかりヒント コードで使用されるイベントをトリガーするコードをいくつか作成しましたが、手がかりヒントはイベントを受け取りますが、問題が発生し、ツールヒントが表示されません。イベントがライブラリ内の正しいイベント ハンドラに到達していないように見えます。

挿入されたテスト コードは次のとおりです。

 xpath = $auth->getXpath(); // $auth is a Mink node
 js = <<<'JS'
    return (function(xpath) {
      console.log('************* Calling mouseover/mousemove trigger ***************');
      var xPathRes = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
      var thisNode = xPathRes.singleNodeValue;
      if (thisNode) {
        var mevent,
            nodeWidth2 = thisNode.offsetWidth/2,
            nodeHeight2 = thisNode.offsetHeight/2,
            pageTop = thisNode.offsetTop,
            pageLeft = thisNode.offsetLeft,
            screenTop = pageTop + window.screenY,
            screenLeft = pageLeft + window.screenX,
            eventParams = {
            pageX: pageLeft+nodeWidth2,
            pageY: pageTop+nodeHeight2,
            screenX: screenLeft+nodeWidth2,
            screenY: screenTop+nodeHeight2
        };
        mevent = jQuery.Event('mouseenter', eventParams);
        jQuery(thisNode).trigger(mevent);
        console.log('sent enter');
        mevent = jQuery.Event('mouseover', eventParams);
        jQuery(thisNode).trigger(mevent);
        console.log('sent over');
        mevent = jQuery.Event('mouseover', eventParams);
        jQuery(thisNode).trigger(mevent);
        console.log('sent over');
        mevent = jQuery.Event('mouseover', eventParams);
        jQuery(thisNode).trigger(mevent);
        console.log('sent over');
        console.log('************* Done trigger ***************');
      }
    return thisNode;
    })("{{XPATH}}");
JS;
$js = str_replace('{{XPATH}}', $xpath, $js);

nodeWidth2 計算の目的は、参照される要素の中心でマウス イベントをシミュレートすることです。

呼び出されると、これは手がかりのヒント ライブラリを呼び出します (デモ用にコンソール ログをいくつか含めました)。

"************* Calling mousever/mousemove trigger ***************" e03842 line 68 > Function:2
"mouseenter mouse - state" jquery.cluetip.js:260
Object { type: "mouseenter", pageX: 141.5, pageY: 188.5, screenX: 859.5, screenY: 188.5, timeStamp: 1417103270770, jQuery182037529489744405187: true, isTrigger: true,     exclusive: undefined, namespace: "", 7 more… } jquery.cluetip.js:261
"mouseover.cluetip" jquery.cluetip.js:814
Object { type: "mouseenter", pageX: 141.5, pageY: 188.5, screenX: 859.5, screenY: 188.5, timeStamp: 1417103270770, jQuery182037529489744405187: true, isTrigger: true,     exclusive: undefined, namespace: "", 7 more… } jquery.cluetip.js:815
"sent enter" e03842 line 68 > Function:21
"mouseenter mouse - state" jquery.cluetip.js:260
Object { type: "mouseover", pageX: 141.5, pageY: 188.5, screenX: 859.5, screenY: 188.5, timeStamp: 1417103270772, jQuery182037529489744405187: true, isTrigger: true, exclusive: undefined, namespace: "", 7 more… } jquery.cluetip.js:261
"mouseover.cluetip" jquery.cluetip.js:814
Object { type: "mouseover", pageX: 141.5, pageY: 188.5, screenX: 859.5, screenY: 188.5, timeStamp: 1417103270772, jQuery182037529489744405187: true, isTrigger: true, exclusive: undefined, namespace: "", 7 more… } jquery.cluetip.js:815
"sent over" e03842 line 68 > Function:24
"mouseenter mouse - state" jquery.cluetip.js:260
Object { type: "mouseover", pageX: 141.5, pageY: 188.5, screenX: 859.5, screenY: 188.5, timeStamp: 1417103270773, jQuery182037529489744405187: true, isTrigger: true, exclusive: undefined, namespace: "", 7 more… } jquery.cluetip.js:261
"mouseover.cluetip" jquery.cluetip.js:814
Object { type: "mouseover", pageX: 141.5, pageY: 188.5, screenX: 859.5, screenY: 188.5, timeStamp: 1417103270773, jQuery182037529489744405187: true, isTrigger: true, exclusive: undefined, namespace: "", 7 more… } jquery.cluetip.js:815
"sent over" e03842 line 68 > Function:27
"mouseenter mouse - state" jquery.cluetip.js:260

ただし、手掛かりコードは「表示」段階に到達せず、何も表示されません。

何がうまくいかないのか、または調査する方法はありますか?

[Ubuntu Precise/64 で Firefox 33 を使用すると、実際のマウスの動きでヒントが正常に動作する]

4

1 に答える 1

1

この回答は問題を解決しませんが、少しは役に立ち、コメントするには多すぎます。

この簡単なセットアップでプラグインをテストしましjquery.cluetipた。jquery-1.11.1Firefox 33Windows 7 / 64

CSS:
#tipElem.highlight {border: 10px solid blue;}
JS:
// on hover cluetip adds class 'highlight' to the element
$("#tipElem").cluetip({hoverClass: 'highlight'});
// additional event listener
$("#tipElem").on('mouseenter', function(ev) {console.log(ev);});
// trigger 'mouseenter' without defining any event params
window.setTimeout(function() {$("#tipElem").mouseenter();}, 3000);

cluetipいくつかの要素を html に挿入します。そのうちの 1 つに id がありcluetipます。デフォルトでは、display: none;. Firebug開いていると、次のことが起こります。

  • マウスが入ると: 1) ボーダーが適用されるので、プラグインが動作します。2) jQuery のイベント システム内でエラーがスローされます。3)#cluetip滞在display: none;
  • マウスが離れたとき: 1) 境界線が削除されます。2) エラーは jQuery 内でスローされます。
  • 3 秒後: 1) 境界線が適用されます。2) エラーがスローされます。3) イベントはログに記録されません。

なしFirebugで (または Firefox 独自の開発者ツールを使用して)、すべての手順が期待どおりに機能します。mouseenter結果: 1)イベント パラメータが定義されていなくても、シンセティックによってプラグインをトリガーできます。2) プラグインの幅広いイベント システムが Firebug と競合します。

于 2014-11-28T08:44:12.200 に答える