node.js - Selenium 网络驱动程序 : dragAndDrop method fails in IE11 and IE10

Question

我们一直在使用 SauceLabs 进行夜间 Jenkins CI 测试。我们在 Windows 8 下的 Firefox 24 中运行测试没有任何问题。现在我们想要扩展测试并在更多平台和浏览器上运行它们。我们的目标是在 Windows 和 OSX 以及 IE11、10 和 9 下的最新 Firefox 和 Chrome 浏览器中运行测试。

测试是使用 webdriver/selenium2 的 Node.js 客户端编写的 https://github.com/admc/wd

我现在遇到的问题是让我们的 DragAndDrop 方法在 IE11 和 IE10 中工作。它在最新的 Firefox、Chrome 和 IE9 中运行良好。

代码:

dragAndDrop: function (elem, x, y) {
  var i      = 0,
      parent = elem.elementByXPath('..'),
      offsetX,
      offsetY,
      pos,
      offsetPos,
      size;

  offsetPos = this.getLocationInView(elem);
  pos = this.getLocationInView(parent);
  size = this.getSize(elem);

  offsetX = offsetPos.x - pos.x + ~~(size.width / 2);
  offsetY = offsetPos.y - pos.y + ~~(size.height / 2);

  this.moveTo(parent, offsetX, offsetY);

  this.buttonDown(0);

  if(typeof x !== 'undefined' && x) {
    for(; i <= x; i++) {
      this.moveTo(parent, offsetX + i, offsetY);
    }
  }

  if(typeof y !== 'undefined' && y) {
    i = 0;
    for(; i < y; i++) {
      this.moveTo(parent, offsetX, offsetY + i);
    }
  }

  this.buttonUp(0);
}

网站上的拖放脚本可以在 IE11 和 IE10 中运行，但未经我们测试。它既是图像裁剪工具，又是使用拖放功能的输入 slider 。我们认为在 IE 浏览器中脚本被破坏的风险最大，所以如果测试能正常工作那就太好了。

当我在 SauceLabs 中控制浏览器时，当测试运行时，单击页面主体有时实际上会帮助拖放方法工作。这几乎是我现在唯一的线索。我尝试使用 Seleniums click() 方法来模拟它，甚至在 JavaScript 中执行它。

this.execute('var event=document.createEvent("MouseEvent");
    event.initEvent("click",true,true,window,0,50,120);
    document.body.dispatchEvent(event);');

但没有任何运气。我不知道 Selenium 是否有 bug 或者问题出在哪里。我在谷歌上花费的时间并没有让我变得明智。任何帮助将不胜感激。

更新

到目前为止，我已尝试按照建议使用 document.body.focus() 将焦点设置到正文。我尝试使用不同的目标来模拟 JavaScript 鼠标单击和 native WebDriver 单击。尝试复制当我控制 SauceLabs 中的虚拟机时发生的情况。没有任何效果，我什至不确定它是否能解决问题。

我还应该澄清，这不是页面上的第一个操作。初始导航后，两个输入字段被填充，然后测试等待 AJAX 调用完成。然后，当找到正确的元素时，将运行此方法。

Answer 1

下面是 pstenstrm 解决方案的改进版本，用于考虑元素在 X 和 Y 方向上的移动。

/*
    pageX
    pageY
    distanceX
    distanceY
    id
    className

    ###############
    The variables above were defined in the closure scope of function
    running the execute function.
*/
var mousedown = document.createEvent("MouseEvent"),
    mouseup   = document.createEvent("MouseEvent"),
    elem      = document.getElementById(id),
    result    = [],
    elems     = elem.getElementsByTagName("*"),
    k         = 0,
    j         = 0,
    i, interval;

for(i in elems){
    if((" " + elems[i].className + " ").indexOf(" " + className + " ") > -1){
        result.push(elems[i]);
    }
}

mousedown.initMouseEvent("mousedown", true, true, window, 0, 0, 0, pageX, pageY, 0, 0, 0, 0, 0, null);
result[0].dispatchEvent(mousedown);

interval = setInterval(function(){
    if(k !== distanceX){k++;}
    if(j !== distanceY){j++;}
    iter(k,j);
    if(k === distanceX + 1 && j === distanceY + 1){
        clearInterval(interval);
        mouseup.initMouseEvent("mouseup", true, true, window, 0, pageX + k, pageY + j, pageX + k, pageY + j, 0, 0, 0, 0, 0, null);
        result[0].dispatchEvent(mouseup);
    }
}, 100);

function iter(_x,_y){
    var mousemove = document.createEvent("MouseEvent");
    mousemove.initMouseEvent("mousemove", true, true, window, 0, 0, 0, pageX + _x, pageY + _y, 0, 0, 0, 0, 0, null);
    result[0].dispatchEvent(mousemove);
}

新的dragAndDrop看起来像:

dragAndDrop: function (elem, x, y, id, className) {
    var i = 0,
        offsetX,
        offsetY,
        pos, offsetPos,
        size;

    this.sleep(2000);

    offsetPos = this.getLocationInView(elem);
    size = this.getSize(elem);

    pageX = offsetPos.x + ~~(size.width / 2);
    pageY = offsetPos.y + ~~(size.height / 2);

    // No linebreaks
    this.execute('var mousedown=document.createEvent("MouseEvent"),mouseup=document.createEvent("MouseEvent"),elem=document.getElementById("' + id + '"),result=[],elems=elem.getElementsByTagName("*"),k=0,j=0,i,interval;for(i in elems){if((" "+elems[i].className+" ").indexOf(" ' + className + ' ")>-1){result.push(elems[i]);}}mousedown.initMouseEvent("mousedown",true,true,window,0,0,0,' + pageX + ',' + pageY +',0,0,0,0,0,null);result[0].dispatchEvent(mousedown);interval=setInterval(function(){if(k!==' + x + '){k++;};if(j!==' + y +'){j++;};iter(k,j);if(k===' + x + '+1&&j===' + y + '+1){clearInterval(interval);mouseup.initMouseEvent("mouseup",true,true,window,0,' + pageX + '+k,' + pageY +'+j,' + pageX + '+k,' + pageY +'+j,0,0,0,0,0,null);result[0].dispatchEvent(mouseup);}},100);function iter(_x,_y){var mousemove=document.createEvent("MouseEvent");mousemove.initMouseEvent("mousemove",true,true,window,0,0,0,' + pageX + '+_x,' + pageY + '+_y,0,0,0,0,0,null);result[0].dispatchEvent(mousemove);}');

    // Give the script time to execute and take a nap
    this.sleep(x*100+3000);
}