dragAndDrop TIDAK berfungsi di Chrome

Saya mencoba melakukan operasi Drag and Drop pada aplikasi Angular kami menggunakan Busur Derajat Jasmine. Saya dapat memperoleh item sumber tetapi saat pengujian berjalan, elemen sumber dipilih tetapi tidak ada yang terjadi setelahnya; operasi seret dan lepas tidak terjadi. Tidak ada kesalahan yang ditampilkan di konsol.

Hal yang menarik dari container tujuan adalah barang yang dijatuhkan disini dapat diubah ukurannya sesuai keinginan pengguna. Selain itu, tidak ada tempat/area yang ditandai dengan jelas di wadah tujuan tempat barang yang diseret akan dijatuhkan! Namun container tersebut memiliki ID; meskipun itu masih belum membantu di sini.

Ini kodenya:

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();

};

lokasi sumber dan tujuan

Manual DragAndDrop

Saya telah mencoba menggunakan operasi DragNDrop berbasis koordinat juga tetapi tetap sama di setiap kasus.

Opsi lain yang dicoba meliputi:

    //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();

Mohon sarankan solusi untuk masalah ini.

@FlorentB. Saya telah melampirkan Kode dengan skrip Anda yang diimpor.

biarkan JS_DRAG_DROP = memerlukan('./drag-drop.js');

fungsi dragAndDropListItems(fdIndex: angka): void {

/*
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 sumber
comment
@Thomas Rollet Terima kasih atas editannya   -  person dhawanaseem    schedule 22.06.2017
comment
Halaman ini mengimplementasikan drag and drop HTML5 yang tidak didukung oleh Selenium. Anda harus memasukkan skrip untuk meniru kejadian tersebut. Lihat gist.github.com/florentbr/60ef7cb8d9b1ae690cafc82aad52da73   -  person Florent B.    schedule 23.06.2017
comment
@FlorentB. Terima kasih atas saranmu. Apakah yang Anda maksud adalah Tag 'samping' di sini? Saya telah menghapus Tag 'samping' dan mencoba dragNdrop (tanpa menambahkan skrip yang Anda sarankan). Tidak bekerja.   -  person dhawanaseem    schedule 30.06.2017
comment
@FlorentB. Saya sekarang juga telah mencoba operasi dragNdrop menggunakan skrip Anda. Saya mendapatkan pesan kesalahan: Elemen sumber tidak dapat diseret seperti yang didefinisikan dalam skrip Anda. Apa yang bisa saya lakukan di sini?   -  person dhawanaseem    schedule 30.06.2017


Jawaban (1)


Mencoba

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

Menginstalnya dan menggunakan contoh skrip berhasil untuk saya.

person Shawn    schedule 30.04.2020