Question

我正在使用angular 7应用程序，并且使用的是角材料（目前为v7.3.7），但无法使用量角器测试拖放。

我尝试下载角形材料源代码以了解如何做，但我发现任何与拖放有关的e2e测试。

我正在尝试以下代码，并且确定这些元素都在dom中，并且它们是可单击且可见的。

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

我确定我在某种程度上错了。有人可以帮助我吗？

谢谢

Answer 1

尝试将.perform()添加到链的末尾：browser.actions().dragAndDrop(justCreatedActivity,nextColumn).perform();

来自Protractor 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浏览器存在一个已知问题。有关更多信息，请参见protractor api docs。

由于已知的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();
  }

还有非异步版本（如某些报告异步和浏览器操作here的问题）：

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找到目的地。希望对别人有帮助。

如何使用量角器测试角材料拖放

4 个答案: