如何使用量角器測試角材料拖放

Question

我正在使用angular 7應用程序，並且正在使用角度材質（目前為v7.3.7），但無法使用量角器測試拖放。

我嘗試下載角形材料源代碼以了解如何做，但是我發現任何與拖放相關的e2e測試。

我正在嘗試以下代碼，並且我確定元素在dom中，並且它們是可單擊的且可見的。

browser.actions().dragAndDrop(justCreatedActivity,nextColumn);

我確定我在某種程度上錯了。 有人可以幫我嗎？

謝謝

Answer 1

嘗試將.perform()添加到鏈的末尾： browser.actions().dragAndDrop(justCreatedActivity,nextColumn).perform();

從量角器API中 ：

// Dragging one element to another.
browser.actions().
    mouseDown(element1).
    mouseMove(element2).
    mouseUp().
    perform();

// You can also use the `dragAndDrop` convenience action.
browser.actions().
    dragAndDrop(element1, element2).
    perform();

// Instead of specifying an element as the target, you can specify an offset
// in pixels. This example double-clicks slightly to the right of an element.
browser.actions().
    mouseMove(element).
    mouseMove({x: 50, y: 0}).
    doubleClick().
    perform();

Answer 2

有時使用量角器API進行拖放時，HTML 5元素不起作用。 一種替代方法是使用j Query或Java腳本函數：

使用適當的定位器識別源元素和目標元素，然后傳遞給以下功能。

 async PerformDragAndDrop(source: ElementFinder, target: ElementFinder){

browser.executeScript("function createEvent(typeOfEvent) {\n" +

"var event = document.createEvent('CustomEvent');\n" +

"event.initCustomEvent(typeOfEvent, true, true, null);\n" +

" event.dataTransfer = {\n" +

" data: {},\n" +

" setData: function (key, value) {\n" +

" this.data[key] = value;\n" +

" },\n" +

 " getData: function (key) {\n" +

" return this.data[key];\n" +

 " }\n" +

 " };\n" +

 " return event;\n" +

 "}\n" +

"\n" +

 "function dispatchEvent(element, event, transferData) {\n" +

 " if (transferData !== undefined) {\n" +

 " event.dataTransfer = transferData;\n" +

" }\n" +

" if (element.dispatchEvent) {\n" +

" element.dispatchEvent(event);\n" +

" } else if (element.fireEvent) {\n" +

" element.fireEvent('on' + event.type,event);\n" +

 " }\n" +

"}\n" +

 "\n" +

 "function simulateHTML5DragAndDrop(element, target) {\n"

 " var dragStartEvent =createEvent('dragstart');\n" +

 " dispatchEvent(element, dragStartEvent);\n" +

" var dropEvent = createEvent('drop');\n" +

" dispatchEvent(target, dropEvent,dragStartEvent.dataTransfer);\n" +

" var dragEndEvent = createEvent('dragend'); \n" +

" dispatchEvent(element, dragEndEvent,dropEvent.dataTransfer);\n" +

 "}\n" +

"\n" +

"var source = arguments[0];\n" +

 "var target = arguments[1];\n" +

"simulateHTML5DragAndDrop(source,target);", source, target);

 }

Answer 3

拖放和Chrome存在一個已知問題。 有關更多信息，請參見量角器api文檔 。

由於已知的Chromedriver問題，鼠標操作在使用HTML5拖放API的Chrome上不起作用

我已經成功使用html-dnd一年多了，可以在測試中拖放元素。 它非常容易設置，效果很好。

Answer 4

我使用Angular和Material拖放進行以下操作：

private async dragAndDrop(element: WebElement, destination: WebElement) {
    await browser.actions().mouseDown(element).perform();
    await browser.actions().mouseMove(destination).perform();
    await browser.actions().mouseUp(destination).perform();
  }

也是非異步版本（因為有些版本在這里報告異步和瀏覽器操作問題 ）：

private dragAndDrop(element: WebElement, destination: WebElement) {
    return browser.actions().mouseDown(element).perform()
      .then(() => browser.actions().mouseMove(destination).perform())
      .then(() => browser.actions().mouseUp(destination).perform());
  }

但是，只要稍做更改，它就會崩潰。 另外，使用css選擇器.cdk-drop-list可以找到目標。 希望它可以幫助某人。