AngularJSでの分度器でのドラッグ＆ドロップ

Question

E2Eテストの一環として、ドラッグ＆ドロップの自動化についてはかなりの話があります。しかし、多くの時間を過ごした後、私は動作するように記述されたメソッドを得ることができません...関数、座標などを使用しています。奇妙なことに、console.logはテストが成功したことを維持しますが、起こった。 Screenshots shows a portion of the application

ユーザーは、用紙を選択して画像にドラッグします。ドラッグが開始されると、画像上の灰色のオーバーレイが消え、用紙が部屋にレンダリングされます。

コードスニペットは、私が試したより簡単なアイデアの1つを示しています。私は非常に助けになることを嬉しく思います！

const JS_HTML5_DND = 'function e(e,t,n,i){var r=a.createEvent("DragEvent");r.initMouseEvent(t,!0,!0,o,0,0,0,c,g,!1,!1,!1,!1,0,null),Object.defineProperty(r,"dataTransfer",{get:function(){return d}}),e.dispatchEvent(r),o.setTimeout(i,n)}var t=arguments[0],n=arguments[1],i=arguments[2]||0,r=arguments[3]||0;if(!t.draggable)throw new Error("Source element is not draggable.");var a=t.ownerDocument,o=a.defaultView,l=t.getBoundingClientRect(),u=n?n.getBoundingClientRect():l,c=l.left+(l.width>>1),g=l.top+(l.height>>1),s=u.left+(u.width>>1)+i,f=u.top+(u.height>>1)+r,d=Object.create(Object.prototype,{_items:{value:{}},effectAllowed:{value:"all",writable:!0},dropEffect:{value:"move",writable:!0},files:{get:function(){return this._items.Files}},types:{get:function(){return Object.keys(this._items)}},setData:{value:function(e,t){this._items[e]=t}},getData:{value:function(e){return this._items[e]}},clearData:{value:function(e){delete this._items[e]}},setDragImage:{value:function(e){}}});if(n=a.elementFromPoint(s,f),!n)throw new Error("The target element is not interactable and need to be scrolled into the view.");u=n.getBoundingClientRect(),e(t,"dragstart",101,function(){var i=n.getBoundingClientRect();c=i.left+s-u.left,g=i.top+f-u.top,e(n,"dragenter",1,function(){e(n,"dragover",101,function(){n=a.elementFromPoint(c,g),e(n,"drop",1,function(){e(t,"dragend",1,callback)})})})})'; 


describe('Drag and Drop Test', function() { 
it('should drag', function() { 



    var e1 = element(by.xpath('html/body/webapp-app/div/div/webapp-johnlewis-visualiser/div/div[2]/div/digitalbridge-shortlist/div/div/ul/li[1]/a/img')); 
    var e2 = element(by.css('.db-project-designer')); 

    element(by.xpath('html/body/webapp-app/div/div/webapp-johnlewis-visualiser/div/div[2]/div/digitalbridge-shortlist/div/div/ul/li[1]/a/img')).click(); 
    //element(by.xpath('html/body/webapp-app/div/div/webapp-johnlewis-visualiser/div/div[1]/div/div/digitalbridge-project/div/digitalbridge-project-designer/canvas')).click(); 

    browser.driver.actions().dragAndDrop(e1.getWebElement(),e2.getWebElement()).perform(); 

    browser.sleep(2000); 
}); 
}); 

定数にエラーが表示されています'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). (W104) - 私はNode_ModulesにES6をインストールしています。

私はclick行を挿入して、項目を事前に選択しても差がないかどうかを確認しました。

は、このライブラリを試してみてください、あなたに

デビッド

Answer 1

ありがとうhttps://github.com/SunGard-Labs/sg-protractor-tools

ライブラリは、要素 ドラッグし

スクロールなどの一般的なタスクを簡素化し、DOM要素を待っている をドロップする機能を備えて見えるか隠されるか

Answer 2

module.exports = function simulateDragAndDrop(sourceNode, destinationNode) { 
    const EVENT_TYPES = { 
     DRAG_END: 'dragend', 
     DRAG_START: 'dragstart', 
     DROP: 'drop' 
    }; 

    function createCustomEvent(type) { 
     const event = new CustomEvent('CustomEvent'); 
     event.initCustomEvent(type, true, true, null); 
     event.dataTransfer = { 
      data: { 
      }, 
      setData: function(type, val) { 
       this.data[type] = val; 
      }, 
      getData: function(type) { 
       return this.data[type]; 
      } 
     }; 
     return event; 
    } 

    function dispatchEvent(node, type, event) { 
     if (node.dispatchEvent) { 
      return node.dispatchEvent(event); 
     } 
     if (node.fireEvent) { 
      return node.fireEvent('on' + type, event); 
     } 
    } 

    const event = createCustomEvent(EVENT_TYPES.DRAG_START); 
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event); 

    const dropEvent = createCustomEvent(EVENT_TYPES.DROP); 
    dropEvent.dataTransfer = event.dataTransfer; 
    dispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent); 

    const dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END); 
    dragEndEvent.dataTransfer = event.dataTransfer; 
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent); 
} 

あなたがDEVでこの

browser.executeScript(dragAndDrop, element, targetArea);