Selenium 拖放不适用于 AngularJS答案

【问题标题】：Seleniums Drag & Drop doesn't work with AngularJSSelenium 拖放不适用于 AngularJS
【发布时间】：2015-10-28 11:38:24
【问题描述】：

Selenium WebDirver 无法在 that AngularJS UI 上拖放元素。

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

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

【问题讨论】：

Selenium 还不支持 HTML5 拖放，我怀疑这是你的问题，而不是 angular。
嗨，Ardesco，谢谢，这可能是原因。

标签： c# angularjs selenium selenium-webdriver selenium-firefoxdriver

【解决方案1】：

好吧，尝试使用下面的方法，如果仍然遇到问题，请告诉我？

Actions builder = new Actions(driver);

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

dragAndDrop.perform();

【讨论】：

感谢帮助我。不幸的是，它也不起作用。我认为问题更深：它与驱动程序本身有关。在 C# 中，您建议的代码是：Actions builder = new Actions(driver); var dragAndDrop = builder.ClickAndHold(sourceBox).MoveToElement(targetBox).Release(targetBox).Build(); dragAndDrop.Perform();

【解决方案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');" );

【讨论】：

【解决方案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});

【讨论】：