Question

我正在尝试使用Selenium Webdriver模拟HTML 5拖放。我试图模拟这个的代码是

public class HTMLDragandDrop {
@Test
public void dragAndDrop() throws AWTException, InterruptedException, IOException {
     WebDriver driver=new FirefoxDriver();
    driver.get("http://the-internet.herokuapp.com/drag_and_drop");
    Thread.sleep(5000);
    driver.manage().window().maximize();
    String jquery_url = "http://code.jquery.com/jquery-1.11.2.min.js";
    String js_filepath = "/Users/sri/Desktop/drag_and_drop.js";
    String java_script="";
    String text;
    String jq_script="";
    String jqtext;
    BufferedReader input = new BufferedReader(new FileReader(js_filepath));
    StringBuffer buffer = new StringBuffer();
    while ((text = input.readLine()) != null)
        buffer.append(text + " ");
        java_script = buffer.toString();
    String jQUERY_filepath = "/Users/sri/Desktop/Jquery_Loader.js";
    BufferedReader inputjq = new BufferedReader(new FileReader(jQUERY_filepath));
    StringBuffer bufferjq = new StringBuffer();
    while ((jqtext = inputjq.readLine()) != null)
        bufferjq.append(jqtext + " ");
        jq_script = bufferjq.toString();            
        JavascriptExecutor js=new JavascriptExecutor() {
            @Override
            public Object executeAsyncScript(String arg0, Object... arg1) {
                return null;
            }
            @Override
            public Object executeScript(String arg0, Object... arg1) {
                return null;
            }
        };
        input.close();
        inputjq.close();
        js.executeAsyncScript(jq_script, jquery_url);
        java_script = java_script+"$('#column-a').simulateDragDrop('#column-b');" ;
        ((JavascriptExecutor)driver).executeScript(java_script);
    }
}

并且拖放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);

我总是在elem结束未定义。请帮我解决。

Answer 1

模拟拖放（HTML5）：

static final String JS_DRAG_AND_DROP =
  "var src=arguments[0],tgt=arguments[1];var dataTransfer={dropEff" +
  "ect:'',effectAllowed:'all',files:[],items:{},types:[],setData:f" +
  "unction(format,data){this.items[format]=data;this.types.append(" +
  "format);},getData:function(format){return this.items[format];}," +
  "clearData:function(format){}};var emit=function(event,target){v" +
  "ar evt=document.createEvent('Event');evt.initEvent(event,true,f" +
  "alse);evt.dataTransfer=dataTransfer;target.dispatchEvent(evt);}" +
  ";emit('dragstart',src);emit('dragenter',tgt);emit('dragover',tg" +
  "t);emit('drop',tgt);emit('dragend',src);";


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

WebElement ele_drag = driver.findElement(By.id("column-a"));
WebElement ele_drop = driver.findElement(By.id("column-b"));

JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript(JS_DRAG_AND_DROP, new Object[]{ele_drag, ele_drop});

使用HTML 5拖放功能未定义elem

1 个答案: