Есть отличная удаленная работа для php+codeception+jenkins+allure+docker спецов. 100% remote! Присоединиться к проекту

Реализовать dragAndDrop на базе Selenium

selenium
Теги: #<Tag:0x00007f7b62261918>

(Alexei Vinogradov) #1

http://the-internet.herokuapp.com/drag_and_drop

Почему-то не работает drag&Drop (Chrome/Firefox 45, Selenium 3.0.1) Кто может написать работающий? :slight_smile:

new Actions().dragAndDrop(By.id("column-a"),By.id("column-b")).perform();


(Milashanna) #2

В Selenium 3 не только drag&Drop не работает, а весь actions :frowning:


(Yaroslav Pernerovskyy) #3

Это для гекодрайвера. Для ФФ-45 он работает по старой схеме, без драйвера. Тут проблема, мне кажется конкретно в самом примере. На других примерах drag&Drop работает и в хроме и в ФФ.


(Yaroslav Pernerovskyy) #4

Можно другой сайт взять для примеров (если, конечно, не стоит задача чтобы работало именно на том сайте) . Вот тут без проблем:

driver.get("http://jqueryui.com/resources/demos/sortable/connect-lists.html");
List<WebElement> dragList = driver.findElements(By.cssSelector("ul#sortable1 li"));
List<WebElement> dropList = driver.findElements(By.cssSelector("ul#sortable2 li"));

new Actions(driver).dragAndDrop(dragList.get(0), dropList.get(1)).perform();

(Alexei Vinogradov) #5

Нет, всё-таки интересно как задачу решить с HTML5 draggable.


(Yaroslav Pernerovskyy) #6

Сори, что играю в испорченный телефон, но @barancev говорит, что пока нельзя через Actions, надо ждать пока производители драйверов это сделают. Остается JsExecutor и писать скрипт, который будет мувать.


(Alexei Vinogradov) #7

Ну хорошо, хоть тушкой, хоть чучелом. Можно ли написать с JavaScript пока производители курят, тьфу пишут драйвера?


(Yaroslav Pernerovskyy) #8

Вобщем вот такой монстрообразный костыль работает для твоего примера:

        driver.get("http://the-internet.herokuapp.com/drag_and_drop");

        String script = "(function( $ ) {" +
                "    $.fn.simulateDragDrop = function(options) {" +
                "        return this.each(function() {" +
                "            new $.simulateDragDrop(this, options);" +
                "        });" +
                "    };" +
                "    $.simulateDragDrop = function(elem, options) {" +
                "        this.options = options;" +
                "        this.simulateEvent(elem, options);" +
                "    };" +
                "    $.extend($.simulateDragDrop.prototype, {" +
                "        simulateEvent: function(elem, options) {" +
                "            /*Simulating drag start*/" +
                "            var type = 'dragstart';" +
                "            var event = this.createEvent(type);" +
                "            this.dispatchEvent(elem, type, event);" +
                "            /*Simulating drop*/" +
                "            type = 'drop';" +
                "            var dropEvent = this.createEvent(type, {});" +
                "            dropEvent.dataTransfer = event.dataTransfer;" +
                "            this.dispatchEvent($(options.dropTarget)[0], type, dropEvent);" +
                "            /*Simulating drag end*/" +
                "            type = 'dragend';" +
                "            var dragEndEvent = this.createEvent(type, {});" +
                "            dragEndEvent.dataTransfer = event.dataTransfer;" +
                "            this.dispatchEvent(elem, type, dragEndEvent);" +
                "        }," +
                "        createEvent: function(type) {" +
                "            var event = document.createEvent(\"CustomEvent\");" +
                "            event.initCustomEvent(type, true, true, null);" +
                "            event.dataTransfer = {" +
                "                data: {" +
                "                }," +
                "                setData: function(type, val){" +
                "                    this.data[type] = val;" +
                "                }," +
                "                getData: function(type){" +
                "                    return this.data[type];" +
                "                }" +
                "            };" +
                "            return event;" +
                "        }," +
                "        dispatchEvent: function(elem, type, event) {" +
                "            if(elem.dispatchEvent) {" +
                "                elem.dispatchEvent(event);" +
                "            }else if( elem.fireEvent ) {" +
                "                elem.fireEvent(\"on\"+type, event);" +
                "            }" +
                "        }" +
                "    });" +
                "})(jQuery);";  
                 
        ((JavascriptExecutor)driver).executeScript(script+"$('#column-a').simulateDragDrop({ dropTarget: '#column-b'});" );

(Alexei Vinogradov) #9

Ярослав еще один воркэраунд нашел - без jquery, но еще более запутанный: