JavaScript - 模拟点击contextmenu

Question

我正在尝试为网站创建Web自动化。我正在模拟点击。通常我会向下面的元素添加ID，并使用Chrome开发者控制台触发点击，并始终有效。

PS：以下问题是outdated.I我其实是想web.whatsapp.com

<div id="myapp">button1</div> 

<script> 
    $("#myapp").click(); 
</script> 

或者，如果这是行不通的，我用用mousedown事件单击右键菜单中的项目像下面的纯JavaScript，它会顺利运行。现在

function triggerMouseEvent(node, eventType) { 
    var clickEvent = document.createEvent('MouseEvents'); 
    clickEvent.initEvent(eventType, true, true); 
    node.dispatchEvent(clickEvent); 
} 

var targetNode = document.querySelector("#myapp"); 
triggerMouseEvent(targetNode, "mousedown"); 

我的问题是：这是行不通的，它通过了jQuery插件contextMenu产生的菜单。

你可以看到contextMenu here的演示，我正通过开发者控制台测试上述内容。

所以，当你右击上下文菜单上有手动添加ID #myapp菜单之一，可与下面的代码它也通过开发者控制台，选择正确的元素与ul和li tags.I列出的菜单项列表。

var targetNode = document.querySelector("#myapp"); 
targetNode; 

但我无法触发点击通过上下文菜单生成的菜单项。我挣扎了24小时以上。我尝试了所有我能想到的JavaScript事件，如mouseup，mousedown和mouseenter。

Answer 1

您只能在创建上下文菜单时单击菜单项，这是由插件动态完成的。所以，我们首先需要触发菜单。据我所知，触发本机上下文菜单是不可能的。触发右击，但是is possible，您需要使用contextmenu事件。

特别是，使用$(el).trigger('contextmenu')似乎工作正常。这似乎工作，因为该插件明确supports this。完成后，我们需要点击我们想要点击的菜单项。

// first, trigger the context menu 
$('.button-that-has-contextmenu').trigger('contextmenu'); 
// then click the menu item you want to click 
// substitute the correct index in `eq(X)` here 
$('.context-menu-item:eq(1)').trigger('mouseup'); 

因为这个插件没有托管在CDN上，所以在这里创建一个片段并不容易。然而，我创建了一个JSFiddle来演示这个完全，我复制+粘贴到小提琴的插件源。

---

在评论，你问web.whatsapp.com。我恰好有一个WhatsApp帐户并在那里进行测试。它似乎是而不是使用jQuery contextMenu插件。 A $函数确实定义了，但它似乎不是jQuery，而只是document.querySelector的快捷方式。

他们的自定义上下文菜单代码是我不知道，但我确实设法触发它。基本上，我使用上述代码的香草JS版本，然后必须找出触发哪个元素。后者比我想象的要容易。有一个聊天列表，.infinite-list-item元素。它们在DOM中的顺序与视觉顺序不匹配，但是例如可以使用浏览器检查器来查找所需的顺序。鉴于你有这种情况，你需要该列表项中的.chat元素。假设我们感兴趣的是第二项，我们可以按照如下选择它：

var target = $('.infinite-list-item:nth-child(2) .chat'); 

您可以在你得到了正确的元素浏览器控制台检查。然后，按以下方式发起事件。

var evt = new MouseEvent('contextmenu', { 
     bubbles: true, 
     cancelable: true, 
     view: window, 
     buttons: 2 
    }); 
target.dispatchEvent(evt); 

本采用现代MouseEvent构造函数，代码是基于this example。

以上将打开浏览器左上角的上下文菜单。您可以通过将clientX和clientY属性传递给MouseEvent构造函数来更改位置，该构造函数表示窗口中的位置。

完成后，您可以单击上下文菜单中的项目。除了你不能使用JavaScript自动化这个。我偷看了源代码，并且这些菜单项的点击处理程序检查是否event.isTrusted，这意味着您无法以编程方式触发对它们的点击。

您可能想要考虑使用可模拟较低级别的点击的东西，如Selenium 2.0（WebDriver），或者像WebdriverIO那样的一些包装。