Puppeteer操作Telegram网页K版时无法点击li元素如何解决

问题描述 #

在针对Telegram网页版K端（https://web.telegram.org/k/）编写Puppeteer自动化脚本时，无法触发聊天列表li元素的点击事件，先后尝试调用page.click()方法、执行document.querySelector("xxxxxx").click()原生JS点击、手动派发mousedown事件等方案均未生效。

原测试代码 #

const pup = require('puppeteer')

const url = 'https://web.telegram.org/k/'
async function inicializar() {
  const browser = await pup.launch({
    headless: false
  })
  const page = await browser.newPage()
  await page.goto(url)
  await page.waitForTimeout(15000)
  await page.evaluate(() => {
    document.querySelector("#auth-pages > div > div.tabs-container.auth-pages__container > div.tabs-tab.page-signQR.active > div > div.input-wrapper > button > div").click()
  })
  await page.waitForTimeout(5000)
  try {
    await page.evaluate(() => {
      document.querySelector("#auth-pages > div > div.tabs-container.auth-pages__container > div.tabs-tab.page-signQR.active > div > div.input-wrapper > button:nth-child(2) > div").click()
    })
  } catch {
    await page.evaluate(() => {
      document.querySelector("#auth-pages > div > div.tabs-container.auth-pages__container > div.tabs-tab.page-sign.active > div > div.input-wrapper > button:nth-child(6) > div").click()
    })
  }
  await page.waitForTimeout(5000)
  await page.evaluate(() => {
    document.querySelector("#auth-pages > div > div.tabs-container.auth-pages__container > div.tabs-tab.page-sign.active > div > div.input-wrapper > div.input-field.input-field-phone > div.input-field-input").childNodes[0].textContent = "+55 11 944407845"
    document.querySelector("#auth-pages > div > div.tabs-container.auth-pages__container > div.tabs-tab.page-sign.active > div > div.input-wrapper > button.btn-primary.btn-color-primary.rp > div").click()
  })
  await page.waitForTimeout(30000)
  const foo = await page.$x('//*[@id="column-left"]/div/div/div[1]/div[2]/input');
  await foo[0].type("folio_bill_bot")
  await page.waitForTimeout(5000)
  const xp = `/html/body/div[1]/div[1]/div[1]/div/div/div[2]/div[2]/div[2]/div/div/div[1]/div/div[1]/ul/li/div[1]`;
  const sizeButton = await page.waitForXPath(xp);
  await sizeButton.evaluate(btn => {
    btn.closest("li").dispatchEvent(new Event("mousedown"));
  });
  await page.waitForTimeout(10000);
  //await Promise.all([foo2[0].click()])
  //await foo2[0].click()
  return [page, browser]
}

inicializar()

失效原因 #

• Telegram K端前端框架对列表项的点击事件监听绑定在li节点本身，且要求接收完整的鼠标交互事件流：mousedown -> mouseup -> click，缺少任意一个事件、或者事件没有开启冒泡配置，都不会触发点击逻辑
• 原代码使用从/html/body开头的绝对XPath定位元素，DOM层级只要有微小变动就会定位到错误节点
• 原代码仅派发了单个mousedown事件，没有补全后续的mouseup和click事件，且事件默认不开启冒泡，无法被框架的事件监听器捕获
• 原代码中手机号输入逻辑直接修改节点textContent，不会触发前端框架的响应式更新，容易导致后续流程异常

修复方案 #

• 替换不稳定的绝对路径定位方式，优先使用基于元素class、功能属性的CSS选择器定位目标节点
• 点击操作优先使用Puppeteer原生click()方法，该方法默认模拟完整的鼠标移动、按下、抬起、点击全流程，兼容性最好
• 如果原生点击失效，手动派发鼠标事件时要补全完整事件流，所有事件都添加bubbles: true配置保证冒泡
• 替换固定时长的waitForTimeout等待，使用waitForSelector等主动等待逻辑，等元素可见后再执行操作，避免时序问题

修正后的核心代码片段 #

替换原代码中搜索后点击li的逻辑：

// 等待搜索框输入完成、搜索结果加载可见
await page.waitForSelector('.chatlist li', { visible: true, timeout: 10000 })
// 定位第一个搜索结果li节点，替代原绝对XPath
const targetChat = await page.$('.chatlist li:first-child')
// 优先使用原生点击，添加短延迟模拟真人操作
await targetChat.click({ delay: 80 })

// 如果原生点击仍不生效，使用下面的手动派发全量事件方案
// await targetChat.evaluate(li => {
//   const opt = { bubbles: true, cancelable: true, view: window }
//   li.dispatchEvent(new MouseEvent('mousedown', opt))
//   li.dispatchEvent(new MouseEvent('mouseup', opt))
//   li.dispatchEvent(new MouseEvent('click', opt))
// })

额外优化建议：原手机号输入逻辑建议替换为Puppeteer原生type()方法，避免响应式不触发问题：

// 定位手机号输入框后逐字输入号码
const phoneInput = await page.$('.input-field-phone .input-field-input')
await phoneInput.click()
await phoneInput.type('+55 11 944407845', { delay: 50 })

内容的提问来源于stack exchange，提问作者Bill Hebert