如何在Headless Chrome中通过Puppeteer禁用闪烁光标？

嘿，这个问题我之前帮不少开发者踩过坑，自动聚焦的输入框确实会让截图里出现碍眼的闪烁光标，给你几个亲测有效的实现方案：

方案一：让聚焦的输入框失去焦点 #

最直接的思路就是找到当前获得焦点的元素，强制让它失去焦点。用page.evaluate()执行前端代码就能搞定：

// 先让聚焦的元素失去焦点
await page.evaluate(() => {
  const focusedEl = document.activeElement;
  // 确认是输入框类可聚焦元素再执行blur
  if (focusedEl && ['INPUT', 'TEXTAREA', 'SELECT'].includes(focusedEl.tagName)) {
    focusedEl.blur();
  }
});

// 接着正常截图
await page.screenshot({ path: 'clean-screenshot.png' });

这个方法精准针对当前聚焦的元素，不会影响页面其他状态。

方案二：用CSS全局隐藏光标 #

如果不确定哪个元素会自动聚焦，或者页面有多个自动聚焦的元素，直接用CSS把光标变透明是更省心的办法：

// 注入自定义样式，隐藏所有聚焦元素的光标
await page.addStyleTag({
  content: `
    :focus {
      caret-color: transparent !important;
    }
    /* 也可以只针对输入框 */
    input:focus, textarea:focus {
      caret-color: transparent !important;
    }
  `
});

// 然后截图
await page.screenshot({ path: 'no-caret-screenshot.png' });

caret-color是专门控制光标颜色的属性，设为transparent后光标就看不见了，完全不影响页面其他样式。

方案三：从根源拦截自动聚焦行为 #

有些页面是通过JS主动调用focus()方法实现自动聚焦的，我们可以提前重写这个方法，阻止元素获得焦点：

// 在页面加载前重写focus方法
await page.evaluateOnNewDocument(() => {
  const originalFocus = HTMLElement.prototype.focus;
  HTMLElement.prototype.focus = function(options) {
    // 这里可以加判断，比如允许某些元素正常focus，或者直接全部禁用
    // 如果需要保留部分元素的focus，就把下面这行注释掉，加条件判断
    // originalFocus.call(this, options);
  };
});

// 然后加载页面
await page.goto('https://your-target-url.com');
// 再截图
await page.screenshot({ path: 'no-auto-focus.png' });

这个方案适合那些页面一加载就自动聚焦的场景，从根源上阻止了焦点获取，自然就不会有光标了。

方案四：等待页面稳定后再截图 #

有时候光标闪烁是因为页面还在加载或执行异步JS，等页面完全稳定后再截图也能解决问题：

// 等待页面网络请求全部完成
await page.waitForLoadState('networkidle');
// 或者等待特定元素加载完成并稳定
await page.waitForSelector('#target-input', { visible: true, timeout: 5000 });

// 可选：再执行一次blur确保安全
await page.evaluate(() => document.activeElement?.blur());

// 最后截图
await page.screenshot({ path: 'stable-screenshot.png' });

总结 #

• 如果知道具体哪个元素会聚焦，优先用方案一；
• 不确定元素时，方案二最省心；
• 页面加载时就自动聚焦的场景，方案三最彻底；
• 页面加载不稳定导致的光标闪烁，试试方案四。

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