使用Javascript在Whatsapp Web中点击新聊天图标

Question

使用检查器的代码图像

我想在 http://web.whatsapp.com/ 上点击新聊天按钮，并搜索一个字符串。

下面是我想要点击的html标签：

<button class="icon icon-chat" title="New chat"></button>

我使用这段 JavaScript 来点击它：

document.querySelector('.icon.icon-chat').click()

但是不起作用。

在同一个网页中，我使用这段代码来点击发送图标以发送消息，它可以正常工作：

 document.querySelector('.icon.icon-send.compose-btn-send').click()

- Tutik Masfiyah

Answer 1

React开发工具显示事件处理程序编写为在mousedown上触发。因此，您需要触发mousedown事件。

在控制台中输入以下内容。

function simulateMouseEvents(element, eventName) {
    var mouseEvent= document.createEvent ('MouseEvents');
    mouseEvent.initEvent (eventName, true, true);
    element.dispatchEvent (mouseEvent);
}

simulateMouseEvents(document.querySelector('.icon.icon-chat'), 'mousedown')

- karthick

---

谢谢Karthick，它起作用了。你能帮我把文本插入到搜索联系人中并按回车键吗？或者你有相关链接可以让我阅读更多关于这个的内容吗？ - Tutik Masfiyah

你是否在开发者控制台中进行所有操作？ - karthick

我不知道你访问该网站的目的是什么。但你只能在一定程度上做这些事情。除非你知道所使用的库，事件如何触发以及最重要的是应用程序状态如何管理。否则，通过模拟无法完成很多事情。例如：搜索下拉菜单可能由某个库处理，只有web.whatsapp的开发人员才知道。 - karthick

你需要在每次mousedown之后发送一个mouseup事件，否则这只能工作一次。simulateMouseEvents(document.querySelector('.icon.icon-chat'), 'mousedown'); simulateMouseEvents(document.querySelector('.icon.icon-chat'), 'mouseup'); - Gary Benade

谢谢！你太棒了！ - Renan Coelho

不再工作 - undefined

Answer 2

Try this one

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

triggerMouseEvent(document.getElementsByClassName("chat-title")[0], "mousedown");

- Saladinost

---

现在在2023年不起作用 - undefined