WhatsApp网页版无法通过click()点击联系人元素的问题求助

我正在开发一款WhatsApp聊天机器人扩展程序，希望读取所有未读消息并向对应联系人发送消息。由于WhatsApp API存在限制且需付费，我选择采用网页抓取方案。我使用以下代码尝试点击网页元素来选择联系人：

var list = document.querySelectorAll('div[class="lhggkp7q ln8gz9je rx9719la"]') //for listing all contacts on the screen
list[0].click()//just clicking a contact of my choice for experimental purpose

但遗憾的是，联系人并未被选中，导致我无法继续设置并发送消息。请问是否有模拟点击的方法？或是我选择了错误的元素，该元素未定义点击事件？

解决思路 #

1. 选择器失效是核心问题 #

你用的lhggkp7q ln8gz9je rx9719la这类class是WhatsApp网页版动态生成的，平台会定期更新这些类名，直接依赖它们必然会失效。应该改用基于语义属性的稳定选择器：

• 用role属性定位联系人项：WhatsApp的联系人列表项都带有role="listitem"属性
• 结合未读标记筛选：未读联系人会带有红色小圆点，对应的元素可以用:has()伪类定位

示例代码：

// 定位所有未读联系人项
const unreadContacts = document.querySelectorAll('div[role="listitem"]:has(.x1lliihq.x1n2onr6.x1n5bzlp)');
// 定位第一个联系人项（不管是否未读）
const firstContact = document.querySelector('div[role="listitem"]');

如果:has()伪类在某些环境不支持，可以用父元素遍历的方式：

const contactItems = document.querySelectorAll('div[role="listitem"]');
const unreadContacts = Array.from(contactItems).filter(item => {
  return item.querySelector('.x1lliihq.x1n2onr6.x1n5bzlp') !== null;
});

2. 模拟完整的鼠标事件序列 #

直接调用element.click()有时会失效，因为WhatsApp的前端交互可能依赖完整的鼠标事件链（mousedown→mouseup→click）。可以手动触发这些事件：

function simulateFullClick(element) {
  // 依次触发mousedown、mouseup、click事件
  ['mousedown', 'mouseup', 'click'].forEach(eventType => {
    const event = new MouseEvent(eventType, {
      bubbles: true,
      cancelable: true,
      view: window
    });
    element.dispatchEvent(event);
  });
}

// 使用示例
if (firstContact) {
  // 先滚动到元素可见位置
  firstContact.scrollIntoView({ block: 'center' });
  // 等待滚动完成后触发点击
  setTimeout(() => simulateFullClick(firstContact), 300);
}

3. 额外注意事项 #

• 确保元素处于可见区域：WhatsApp会懒加载联系人，未出现在视口的元素可能无法响应点击，所以需要先调用scrollIntoView
• 避开反爬机制：频繁自动操作可能触发人机验证，建议添加合理的操作间隔

内容的提问来源于stack exchange，提问作者Newtron Malayalam