dragAndDrop НЕ работает в Chrome

Я пытаюсь выполнить операцию перетаскивания в нашем приложении Angular с помощью Protractor Jasmine. Я могу получить исходный элемент, но во время выполнения теста исходный элемент выбирается, но после этого ничего не происходит; операция перетаскивания не выполняется. В консоли не отображаются ошибки.

Интересная особенность целевого контейнера заключается в том, что элементы, сброшенные сюда, могут быть изменены по желанию пользователя. Кроме того, в контейнере назначения нет четко обозначенного места/области, куда будет сброшен перетаскиваемый предмет! Но у контейнера есть идентификатор; хотя это все еще не помогло здесь.

Вот код:

let dragAndDrop = require('html-dnd').code;

.
.
.


function dragAndDropListItems(fdIndex: number): void {                                                 
    let dragElement = element.all(by.repeater('listDefinition in lists')).get(fdIndex); // Select the first repeater corresponding to the first List Item in the list

    let dragElementh5 = dragElement.all(by.css('a')).get(0); // Select the first List Item
    let printFD = dragElementh5.getText().then((text: string) => {
        console.log(text); // Print the innerHTML text from the chosen List Item to the Console
    });

    let finalDrop = element.all(by.css('[id="dashboardContainerDiv"]')).get(0);

    dragElement.click();
    browser.actions().dragAndDrop(dragElement, finalDrop).perform();

};

местоположение источника и назначения

Ручное перетаскивание

Я также пытался использовать операцию DragNDrop на основе координат, но во всех случаях одно и то же.

Другие проверенные варианты включают в себя:

    //browser.executeScript(dragAndDrop, dragElement, finalDrop); // Perform the drag and drop operation 

    //browser.driver.actions().dragAndDrop(dragElement, finalDrop).perform();

    //browser.actions().dragAndDrop(dragElement, { x: 400, y: 400 }).perform();      
   // browser.driver.actions().mouseDown(dragElement).mouseMove(finalDrop).mouseUp(finalDrop).perform();

Подскажите пожалуйста решение этой проблемы.

@ФлорентБ. Я прикрепил код с вашими импортированными скриптами.

let JS_DRAG_DROP = require('./drag-drop.js');

функция dragAndDropListItems (fdIndex: число): недействительным {

/*
let source = driver.find_element_by_css_selector("#drag")
target = driver.find_element_by_css_selector("#drop")
driver.execute_async_script(JS_DRAG_DROP, source, target)

# drag and drop an element by offset {x:500, y:200}
source = driver.find_element_by_css_selector("#drag")
driver.execute_async_script(JS_DRAG_DROP, source, None, 500, 200)

# drag and drop an element with a delay of 101ms before the drop
source = driver.find_element_by_css_selector("#drag")
target = driver.find_element_by_css_selector("#drop")
driver.execute_async_script(JS_DRAG_DROP, source, target, 0, 0, 101)
*/

 let source = element.all(by.repeater('listDefinition in 
 lists')).get(fdIndex); // Select the first repeater corresponding to the 
 first List Item in the list
let dragElementh5 = source.all(by.css('a')).get(0); // Select the first List 
Item
let printFD = dragElementh5.getText().then((text: string) => {
    console.log(text); // Print the innerHTML text from the chosen List Item 
    to the Console
});


//browser.driver.switchTo().frame('dashboardContainerDiv'); 

/*
let finalDropClass = element.all(by.css('[class="dashboard mb10"]')).get(0); 
let finalDropCon = 
finalDropClass.all(by.css('[id="dashboardContainerDiv"]')).get(0);
let finalDrop = 
finalDropCon.all(by.css('[id="dashboardContainerUl"]')).get(0);  
*/

let target  = element.all(by.css('[id="dashboardContainerDiv"]')).get(0);

//dragElement.click();

browser.executeScript(JS_DRAG_DROP, source, target); // Perform the drag and 
drop operation 
//browser.actions().dragAndDrop(dragElement, finalDrop).perform();

//browser.driver.actions().dragAndDrop(dragElement, finalDrop).perform();

//browser.actions().dragAndDrop(dragElement, { x: 400, y: 400 }).perform();      

// browser.driver.actions().mouseDown(dragElement).mouseMove(finalDrop).mouseUp(finalDrop).perform();

};


person dhawanaseem    schedule 22.06.2017    source источник
comment
@Thomas Rollet Спасибо за редактирование.   -  person dhawanaseem    schedule 22.06.2017
comment
На странице реализовано перетаскивание HTML5, которое не поддерживается Selenium. Вам нужно будет внедрить скрипт для эмуляции событий. См. gist.github.com/florentbr/60ef7cb8d9b1ae690cafc82aad52da73.   -  person Florent B.    schedule 23.06.2017
comment
@ФлорентБ. Спасибо за ваше предложение. Вы имеете в виду тег «в стороне» здесь? Я удалил тег «в стороне» и попробовал перетаскивание (без добавления предложенных вами сценариев). Это не работает.   -  person dhawanaseem    schedule 30.06.2017
comment
@ФлорентБ. Теперь я также попробовал операцию dragNdrop с использованием ваших сценариев. Я получаю сообщение об ошибке: Исходный элемент нельзя перетаскивать, как определено в ваших сценариях. Что я могу здесь сделать?   -  person dhawanaseem    schedule 30.06.2017


Ответы (1)


Пытаться

https://github.com/html-dnd/html-dnd

У меня сработала его установка и использование примера машинописного текста.

person Shawn    schedule 30.04.2020