JavaScript 通过代码模拟右键单击答案

【问题标题】：JavaScript simulate right click through codeJavaScript 通过代码模拟右键单击
【发布时间】：2010-09-30 20:09:55
【问题描述】：

我正在使用 Selenium 编写一些 UI 测试，并且我有一个 JavaScript 树控件，使用 Dojo 工具包。

我已经使用 Dojo 提供的示例为树的每个节点实现了一个上下文菜单，但是我需要 Selenium 测试来“调用”树节点上的右键单击，但我无法让它工作。测试根本不通过 JavaScript 模拟右键单击事件，上下文菜单也不显示。

有没有人有过使用 Dojo 和 Selenium 调用右键单击上下文菜单的经验？或者对如何做有任何想法？

【问题讨论】：

标签： javascript selenium dojo mouseevent

【解决方案1】：

好问题！

我做了一些研究，似乎您可以触发 is shown here 之类的鼠标事件，并通过将 button 或 which 属性设置为 2 (documented here) 使其成为右键单击。

也许这段代码可以工作：

function rightClick(element){
  var evt = element.ownerDocument.createEvent('MouseEvents');

  var RIGHT_CLICK_BUTTON_CODE = 2; // the same for FF and IE

  evt.initMouseEvent('click', true, true,
      element.ownerDocument.defaultView, 1, 0, 0, 0, 0, false,
      false, false, false, RIGHT_CLICK_BUTTON_CODE, null);

  if (document.createEventObject){
    // dispatch for IE
    return element.fireEvent('onclick', evt)
  }
  else{
    // dispatch for firefox + others
    return !element.dispatchEvent(evt);
  }
}

【讨论】：

【解决方案2】：

试试这个，原因是上下文菜单实际上绑定到 oncontextmenu 事件。

function contextMenuClick(element){
    var evt = element.ownerDocument.createEvent('MouseEvents');

    var RIGHT_CLICK_BUTTON_CODE = 2; // the same for FF and IE

    evt.initMouseEvent('contextmenu', true, true,
         element.ownerDocument.defaultView, 1, 0, 0, 0, 0, false,
         false, false, false, RIGHT_CLICK_BUTTON_CODE, null);

    if (document.createEventObject){
        // dispatch for IE
       return element.fireEvent('onclick', evt)
     }
    else{
       // dispatch for firefox + others
      return !element.dispatchEvent(evt);
    }
}

【讨论】：

【解决方案3】：

如果您不关心上下文菜单的启动位置，这里是一个更正确的版本

function fireContextMenu(el) {
  var evt = el.ownerDocument.createEvent("HTMLEvents")
  evt.initEvent('contextmenu', true, true) // bubbles = true, cancelable = true

  if (document.createEventObject) {
    return el.fireEvent('oncontextmenu', evt)
  }
  else {
    return !el.dispatchEvent(evt)
  }
}

如果你这样做了，我们可能不得不使用前一个，修复它在 IE 中的行为，并适当地填充 screenX、screenY、clientX、clientY 等

【讨论】：

谢谢，我实际上并不关心它发生在哪里，但将来这样做可能会很好......
如果你使用的是jQuery，右键单击一个元素就更简单了：$(your_element).trigger('contextmenu');

【解决方案4】：

为了更好的衡量，这里有一些关于参数的文档：

var myEvt = document.createEvent('MouseEvents');
myEvt.initMouseEvent(
   'click'          // event type
   ,true           // can bubble?
   ,true           // cancelable?
   ,window      // the event's abstract view (should always be window)
   ,1              // mouse click count (or event "detail")
   ,100           // event's screen x coordinate
   ,200           // event's screen y coordinate
   ,100           // event's client x coordinate
   ,200           // event's client y coordinate
   ,false         // whether or not CTRL was pressed during event
   ,false         // whether or not ALT was pressed during event
   ,false         // whether or not SHIFT was pressed during event
   ,false         // whether or not the meta key was pressed during event
   ,1             // indicates which button (if any) caused the mouse event (1 = primary button)
   ,null          // relatedTarget (only applicable for mouseover/mouseout events)
);

【讨论】：

【解决方案5】：

我在 firefox 和 chrome 中尝试这样做，但调度 contextmenu 事件不会使浏览器打开上下文菜单。触发事件是因为我的 oncontextmenu 回调被触发，但上下文菜单仍然丢失。任何人都有想法，因为我使用了上面的所有代码示例？

【讨论】：

FWIW 我也有同样的问题——也许这是在一些最近的版本中为了安全或什么而被禁用的？
OP实现了自己的contextmenu菜单，无法使用javascript触发浏览器的contextmenu。