2016-01-21 115 views
0

我有一個元素列表,所以我想寫一個函數來將這些元素拖拽到一個構建對象的容器中。目前在量角器測試中我發現了這個元素。該元素存在並顯示。我遇到的唯一問題是當我嘗試翻譯或拖放它在屏幕上的位置時。目前我使用量角器拖放和刪除

browser.actions().dragAndDrop(element1.getWebElement(), { x: -500, y: 20 }).perform(); 

爲了儘量拖到-500px向左和20像素下我也試過以下

browser.actions() 
    .mouseDown(element1, {x:10, y:10}) //this show the hovered tool tip 
    .mouseMove(element1, {x:11, y:11}) //do this to make it "grab" the element 
    .mouseMove(element2, {x:50, y:50}) //translate its position into the container 
    .mouseUp() 
    .preform(); 
browser.sleep(3000)//allow time for it to drag and the animation to complete. 

我不知道如果我」 m使用移動元素錯誤或如果我有錯誤的元素,所以任何幫助將不勝感激。

謝謝。

回答

0

我是新來的量角器,我一直在這方面的每一個主題,看到了很多不好的消化和指導。所以我想出了我自己該怎麼做。首先,在量角器中沒有像.dragAndDrop方法那樣的東西。你不需要x和y。這是我的代碼:

it('drag&drop', function() { 
    var elem = element.all(by.css('.as-sortable-item-handle')).get(1); 
    //select element as you find fit, you dont have to do it like me 

    var target = element(by.css('[id="column1"]')); 

    browser.driver.actions() 
    .mouseDown(elem) 
    .mouseMove(elem) 
    .mouseMove(target) 
    .mouseUp(target) 
    .perform(); 
    browser.sleep(3000); 
}); 
+0

相信我我自己讀了大部分的東西,最後我寫了一個單獨的JS文件,我導入並用作一個函數來拖放頁面上的元素。上面所寫的量角器方法對我來說並不適用,我也沒有使用過的大部分建議。 –

1

我也經歷了很多這些解決方案,但沒有一個爲我工作。爲我工作的解決方案是導入新的js文件。還有就是我的js文件存儲這個文件作爲dragdrop_helper.js

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

    function createCustomEvent(type) { 
     var 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) 
     } 
    } 

    var event = createCustomEvent(EVENT_TYPES.DRAG_START) 
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event) 

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

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

,並使用此代碼在您的量角器文件拖放元素。

var dragAndDropFn = require("../DraodropHelper/dragdrop_helper.js"); //this is your js file address 
    var source = element(by.css('li[draggable="true"]')); 
    var target = element(by.css('ul[class="dropElement"]')); 
    browser.executeScript(dragAndDropFn, source.getWebElement(), target.getWebElement()); 

請將選擇器更改爲特定於您的應用程序。我希望能幫到你