Как проверить угловое перемещение материала с помощью транспортира

Question

Я работаю с приложением angular 7 и использую угловой материал (на данный момент v7.3.7), но я не могу проверить перетаскивание с помощью транспортира.

Я пытался загрузить исходный код углового материала, чтобы узнать, как это сделать, но я нашел любой тест e2e, связанный с перетаскиванием.

Я пытаюсь с помощью следующего кода, и я уверен, что элементы находятся в DOM, и они кликабельны и видимы.

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

Я уверен, что я в чем-то неправ. Кто-нибудь может мне помочь?

Спасибо

Answer 1

Иногда перетаскивание не работает с элементом HTML 5 с использованием API транспортира.Альтернативой является использование функции j Query или java script:

Идентифицируйте исходный и целевой элемент с помощью соответствующих локаторов и перейдите к функции ниже.

 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 2

Существует известная проблема с перетаскиванием и Chrome.См. транспортир api docs для получения дополнительной информации.

Действия мыши не работают в Chrome с API перетаскивания HTML5 из-за известной проблемы Chromedriver

Я успешно использовал html-dnd более года, чтобы перетаскивать элементы в моих тестах.Он очень прост в настройке и прекрасно работает.

Answer 3

Попробуйте добавить .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();