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

Question

为什么无法使用 JavaScript .click() 方法点击 WhatsApp 网页 (https://web.whatsapp.com) 上的任何元素？我正在采取的步骤如下：

1. 假设二维码验证完成，访问https://web.whatsapp.com
2. 找到显示搜索或开始新聊天的搜索栏，这是一个输入元素，并在其上触发.click()。

我能够找到搜索输入字段，因为它具有唯一的 title 值 搜索或开始新聊天，但是当我尝试在 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。因此，您可以考虑改进代码。 希望这会有所帮助:)