在 Headless Chrome 中禁用闪烁光标（使用 puppeteer）答案

【问题标题】：Disabling blinking cursor in Headless Chrome (using puppeteer)在 Headless Chrome 中禁用闪烁光标（使用 puppeteer）
【发布时间】：2018-04-05 20:09:23
【问题描述】：

我正在使用puppeteer 节点模块捕获网页截图。

有些页面有一个自动获得焦点的输入字段。

我希望闪烁的光标不会出现在屏幕截图上。有没有办法这样做？

【问题讨论】：

标签： puppeteer google-chrome-headless

【解决方案1】：

您可以在 puppeteer 中使用 addStyleTag 实现此 answer：

const styleContent = `
  input {
    color: transparent;
    text-shadow: 0 0 0 black;
  }
  input:focus {
    outline: none;
  }
`;

await page.addStyleTag({ content: styleContent });

【讨论】：

就我而言，我需要文本颜色保持不变。所以我使用了这个 css：css * { caret-color: transparent !important; } From stackoverflow.com/a/48389261/1408516
一件事很明显，但我一开始就错过了，请确保在使用await page.goto 加载页面后使用await page.addStyleTag({ content: styleContent });。因为当然，页面需要加载，才能添加样式！ :P
你也可以使用caret-color: transparent !important;。