我正在尝试为站点创建 Web 自动化。我正在模拟点击。通常我会向如下所示的元素添加一个 ID,然后使用 Chrome 开发者控制台触发点击,它总是有效。
p.s: 下面的问题已经过时了。我实际上是想从 web.whatsapp.com 的上下文菜单中单击一个项目
<div id="myapp">button1</div>
<script>
$("#myapp").click();
</script>
或者,如果那行不通,我使用纯 JavaScript 的 mousedown
事件,如下所示,它会顺利运行。
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 ,我正在通过开发人员控制台测试上述内容。
因此,当您右键单击上下文菜单时,会出现一个菜单项列表,其中列出了 ul
和 li
标签。我手动添加了 ID #myapp
到菜单之一,使用下面的代码,它也通过开发人员控制台选择正确的元素。
var targetNode = document.querySelector("#myapp");
targetNode;
但我无法触发对通过上下文菜单生成的菜单项的点击。我为此苦苦挣扎了超过 24 小时。我尝试了所有我能想到的 JavaScript 事件,例如 mouseup
、mousedown
和 mouseenter
。
最佳答案
您只能在创建上下文菜单时单击菜单项,这是由插件动态完成的。所以,我们首先需要触发菜单。
据我所知,触发 native 上下文菜单是不可能的。然而触发右键单击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为了充分演示这一点,我将插件源代码复制并粘贴到 fiddle 中。
在评论中,您询问了 web.whatsapp.com .我碰巧有一个 WhatsApp 帐户并在那里进行了测试。看起来他们没有使用 jQuery contextMenu 插件。确实定义了一个 $
函数,但它似乎不是 jQuery,而只是 document.querySelector
的快捷方式。 .
我不知道他们的自定义上下文菜单代码是什么,但我确实设法触发了它。基本上,我使用了上述代码的 vanilla 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 这样的包装器.
关于JavaScript - 模拟点击上下文菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43293136/