TypeError: $ не является функцией в селеновом Java во время перетаскивания html5 - PullRequest
Новая
       4

TypeError: $ не является функцией в селеновом Java во время перетаскивания html5

1 голос
/ 31 октября 2019

Постановка задачи: функция перетаскивания из класса java Селена возвращает исключение org.openqa.selenium.JavascriptException: TypeError: $ не является функцией

В несколькихНа форумах было предложено использовать js, доступную в расположении ниже, для выполнения перетаскивания html5 в Селене Java, и следовали тем же шагам, но привели к вышеуказанной ошибке.

Selenium 3.141 Chrome 76

Функция drag_drop_ определена в файле drag_drop_helper.js, как показано ниже

js ссылка: https://gist.github.com/rcorreia/2362544#file-drag_and_drop_helper-js

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

Ниже строк кодачтение файла js и запуск функции перетаскивания html5, определенной в файле js 

 String js_filepath = "C:/test/drag_and_drop_helper.js";
           String java_script = "";
           String text;
           BufferedReader input = new BufferedReader(new FileReader(js_filepath));
           StringBuffer buffer = new StringBuffer();
           while ((text = input.readLine()) != null)
                buffer.append(text + " ");
                java_script = buffer.toString();

WebElement source1 = driver.findElement(By.cssSelector("span.object-card-value[title=test]"));
WebElement dest1 = driver.findElement(By.cssSelector("div[data-field-name='references']"));

 java_script = java_script + "$(arguments[0]).simulateDragDrop({dropTarget:arguments[1]});";
((JavascriptExecutor) driver).executeScript(java_script, source1, dest1);

Результат: элементы идентифицированы правильно, файл js также читается, но не может вызвать перетаскивание с ошибкой Ошибка типа: $ is notфункция

Статус 1:

@ pcalkins Спасибо. Я пробовал согласно вашему предложению, но в браузерах Chrome и FF не происходит никакого действия перетаскивания.

Разница лишь в том, что я пытаюсь пройти с помощью селектора CSS, поскольку у меня нет идентификатора. элементы todrag и todrop выделяются правильно. Не генерируются исключения, но действие перетаскивания не происходит. 

 var toDrag =document.querySelectorAll(\"span.object-card-value[title='test']\"); var toDrop = document.querySelectorAll(\" div[data-field-name='references']\");";
 ((JavascriptExecutor)driver).executeScript(simulateFunction + "simulateDragDrop(toDrag, toDrop);"); //also tried with queryselector

Update2 разметка, как показано ниже

перетаскивание разметки 

<ul class="object-list drop-target"> changes to object-list drop-target active drag-over, drag-over triggers?
        <li class="chooser add"><div class="autocomplete">
        <div class="autocomplete-searchbox" tabindex="1">
            <input placeholder="Drop here " class="autocomplete-input autocomplete-single-select form-control" size="30" style="width: 100%;" type="text">
            <span class="autocomplete-reset fonticon fonticon-clear"></span>
        </div>
        <div class="autocomplete-suggests">
        <div class="autocomplete-suggests-scroll  scroller scroller-root" style="overflow: hidden;">
        <div class="no-native-scrollbars  scroller-content" style="right: -16px; bottom: -16px; padding-right: 16px; padding-bottom: 16px;">
        <ul tabindex="1" class="scroller-shift">
            </ul></div></div></div></div>
        <button class="btn"><span class="fonticon fonticon-search"></span></button></li>

        <li class="object-card has-image" data-field-name="item" data-type="Document" data-id="16C31E069B1C00009555C15DB7CC0B00" data-hasfiles="TRUE">
             <span class="draggable-item" draggable="true">
                <span class="thumbnail object-image">
                   <img draggable="false" oncontextmenu="return false" src="http://test.com" title="test">
                </span>
            <span data-field-name="display-value"><span class="object-card-value" oncontextmenu="return false" title="test" style="background: yellow; border: 2px solid red;">test</span></span>
            </span>
            <span class="actions">
                <button class="btn">
                    <span class="fonticon fonticon-down-open" data-field-name="deliverables" title=""></span>
                </button>
            </span>
        </li>

 WebElement source1 = driver.findElement(By.cssSelector("span.object-card-value[title='test']"));

drop markup 

<div id="card0">
<div class="card-content" data-id="16C31E069B1C00008B21C15D91F10B00" oncontextmenu="return false">
      <div class="card-title">Context</div>
      <div class="card-properties">
            <div class="card-details ">
                  <div class="thumbnail type">
                        <span class="task"></span>
 </div></div></div></div></div></div>    

 WebElement dest1 = driver.findElement(By.id("card0"));

Как только пользователь перемещает элемент перетаскивания, возникает событие перетаскивания, которое изменяет drop-target объекта-списка на object-list drop-target drag-over

...