Selenium拖放不适用于AngularJS

Question

Selenium WebDirver不能将元素拖放到that AngularJS UI上。

在执行以下C#代码并将鼠标指针悬停在网页上后，您可以看到，它成功地拖动了元素，但没有将其放入其中：

        IWebDriver driver = new FirefoxDriver();
        driver.Navigate().GoToUrl("https://a5hik.github.io/ng-sortable/#/");

        WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(20));
        IWebElement sourceBox = wait.Until(ExpectedConditions.ElementExists(By.XPath("(.//span[@class='card-title'])[1]")));
        IWebElement targetBox = wait.Until(ExpectedConditions.ElementExists(By.XPath("(.//span[@class='card-title'])[2]")));

        Actions builder = new Actions(driver);
        builder.DragAndDrop(sourceBox, targetBox).Build().Perform();

Answer 1

那么，试着使用下面的，让我知道是否仍然面临这个问题？

Actions builder = new Actions(driver);

Action dragAndDrop = builder.clickAndHold(someElement)
.moveToElement(otherElement)
.release(otherElement)
.build();

dragAndDrop.perform();

Answer 2

我遇到了同样的问题，因为解决方案必须使用自定义javascript创建一个类来实现这一点，它是一个bug selenium。解决方案：

创建文件DragAndDrop.js并粘贴以下代码：

(function() {

var Component = function( element ) {
  element = document.querySelector( element );

  return {
    simulate: simulateFn
  };

  //-------------//

  function simulateFn( elem ) {
    elem = document.querySelector( elem );

    /*Simulating drag start*/
    var type = 'dragstart';
    var event = createEvent( type );
    dispatchEvent( element, type, event );

    /*Simulating drop*/
    type = 'drop';
    var dropEvent = createEvent(type, {});
    dropEvent.dataTransfer = event.dataTransfer;
    dispatchEvent( elem, type, dropEvent );

    /*Simulating drag end*/
    type = 'dragend';
    var dragEndEvent = createEvent(type, {});
    dragEndEvent.dataTransfer = event.dataTransfer;
    dispatchEvent( elem, type, dragEndEvent );
  }

  //------------------//

  function createEvent(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;
  }

  function dispatchEvent(elem, type, event) {
    if(elem.dispatchEvent) {
      elem.dispatchEvent(event);
    }else if( elem.fireEvent ) {
      elem.fireEvent("on"+type, event);
    }
  }

};

window.Drag = Component;
})();

执行操作拖放的代码如下：

String fileContents = Files.toString( new File( "src/test/resources/js/dragAndDrop.js" ), Charsets.UTF_8 );
JavascriptExecutor js = ( JavascriptExecutor ) driver;
js.executeScript( fileContents + "Drag('#column-1').simulate('drop-container');" );

Answer 3

要模拟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});