Question

为什么无法使用JavaScript .click()方法在WhatsApp网站（https://web.whatsapp.com）上单击任何元素？我提到的步骤如下：

假设QR码验证已完成，请访问https://web.whatsapp.com
找到显示为搜索或开始新聊天（即输入元素）的搜索栏，并在其上触发.click()。

我能够找到搜索输入字段，因为它具有唯一的 title 值 Search或开始新聊天，但是当我尝试在Chrome的DevTools控制台中单击它时，什么也没发生。

首先，我认为我可能会点击错误的元素。可以肯定的是，我在Chrome上安装了Katalon Recorder自动化扩展程序。然后，我记录了所采取的步骤（浏览到WhatsApp网站，单击搜索框）。在Katalon中播放例程，按预期单击搜索框。我复制了Katalon记录的Xpath表达式，并将整个内容粘贴到document.evaluate()中。事实证明，它与querySelectorAll捕获的输入元素相同。

在浏览器控制台中，我正在运行以下代码：

let xPath = "(.//*[normalize-space(text()) and normalize-space(.)='Search or start new chat'])[1]/following::input[1]";
let result = document.evaluate(xPath, document);
let searchBox = result.iterateNext();
searchBox.click();

那么，您是否知道.click()为什么不能在WhatsApp网站上运行？我还想知道Katalon的不同之处-允许其单击所需的元素。我可以在无头浏览器中做到这一点吗？

Answer 1

因此解决方案是通过js和new Event()触发事件为此，您需要先触发焦点事件，然后再单击事件。

let xPath = "(.//*[normalize-space(text()) and normalize-space(.)='Buscar o empezar un chat nuevo'])[1]/following::input[1]";
let result = document.evaluate(xPath, document);
let searchBox = result.iterateNext();

var eventFocus = new Event('focus');
var eventClick = new Event('click');
searchBox.dispatchEvent(eventFocus);
searchBox.dispatchEvent(eventClick);

我还必须将Search or start new chat更改为西班牙语，即默认语言Buscar o empezar un chat nuevo。因此，您可以考虑改进代码。希望这会有所帮助：）

无法在WhatsApp网站中以编程方式单击元素

1 个答案: