Puppeteer 模拟移动端点击没反应怎么办？

宇文慧娟提问于 2026-02-23 19:02:24 阅读 31

移动

我在用 Puppeteer 做移动端自动化测试，页面上有个按钮在手机端应该能点，但用 page.click() 就是没反应，真机上明明可以点的。是不是 viewport 设置不对？

我试过设置 device emulation，也用了 isMobile: true 和 hasTouch: true，但还是不行。下面是 React 组件里那个按钮的代码：

const MobileButton = () => {
  return (
    <button
      onClick={() => console.log('clicked!')}
      style={{ padding: '12px', fontSize: '16px' }}
    >
      点我试试
    </button>
  );
};

Puppeteer 脚本里我是这么写的：await page.emulate(puppeteer.devices['iPhone 12']); 然后直接 await page.click('button');，但控制台没输出，感觉根本没触发点击。

我来解答赞 5 收藏

反馈

1 条解答

江梅 Lv1

你这问题我见过好几次了，真不是 viewport 的问题，是 Puppeteer 的点击在移动端模拟下经常不触发 click 事件，尤其是 React 组件里绑定的 onClick，它底层可能用的是合成事件，而 Puppeteer 的 page.click() 发的其实是 mouse 事件，移动端浏览器有时候会忽略这些“非原生”的点击。

解决办法很简单，别用 page.click()，直接用 evaluate 模拟 touchstart 和 touchend 事件：

await page.evaluate(() => {

  const btn = document.querySelector('button');

  if (!btn) return;

  const touchStart = new TouchEvent('touchstart', { bubbles: true, cancelable: true });

  const touchEnd = new TouchEvent('touchend', { bubbles: true, cancelable: true });

  btn.dispatchEvent(touchStart);

  btn.dispatchEvent(touchEnd);

});

或者更偷懒一点，直接触发 click 的原生事件（有些场景下比 mouseevent 更可靠）：

await page.evaluate(() => {

  const btn = document.querySelector('button');

  if (btn && typeof btn.click === 'function') {

    btn.click();

  }

});

拿去改改，一般都能点上了。如果还不行，大概率是 selector 没匹配到，加个 console.log(document.querySelector('button')) 看看是不是 null 就行了。

2026-02-23 19:03